Vue前端工程化
前后端分离开发
即前端人员开发前端工程,将开发好的前端工程打包部署在前端服务器上
后端开发人员开发后端工程,再将后端工程打包部署在后端服务器上,这种模式称为前后端分离开发
而前后端要顺利对接的关键就是要遵循一定的开发规范
开发规范
这种开发规范定义在一份文档中,即为接口文档.
在接口文档中规定了每一个功能前端需要传递什么参数,
后端需要返回什么样的结果,请求方式,请求路径等等.
前后端只需要根据接口文档进行开发即可.
开发流程
开发项目时,具体的开发流程如下所示:
1,需求分析:
根据产品经理提供的产品原型,以及需求文档来分析需求,熟悉业务.
2,接口定义:
根据需求文档及需求梳理定义接口文档(前后端均有).
3,前后端并行开发:
前后端开发人员依据接口文档,进行并行开发,在开发时,需要严格遵循接口文档中的规范说明.
4,测试:
前后端工程功能开发完毕后,自行测试.前端在测试时,需要通过模拟数据测试.
5,前后端联调测试:
前后端都开发完毕后,进行联调测试.
Yapi
一个高效,易用,功能强大的api管理平台,旨在为开发,产品,测试人员提供更加优雅的接口管理服务.
1,api接口管理:管理项目的api接口
2,mock测试数据:自动生成mock数据(模拟数据),供前端人员进行功能测试.
前端工程化
前端开发存在着大量不同的技术栈和业务实现方式,存在很多的弊端
因此,需要一个前端脚手架来使前端开发工程化.
Vue-cli
Vue官方提供的一个脚手架,用于快速生成一个工程化的Vue模版
Vue-cli功能
1,同一目录结构
2,本地调试
3,热部署
4,单元测试
5,集成打包上线
依赖环境:NodeJs
NodeJs
一个基于Chrome V8引擎的JavaScript运行环境,是一个让js运行在服务端的开发平台,NodeJs对JS有巨大的提升,对于前端来说,就是js代码的运行环境,类似于jdk之于java.
Vue项目
Vue创建
打开ui界面
vue ui
打开项目管理器
创建项目
目录结构
node_modules
//存放项目依赖包
public
//存放项目静态资源文件
src
//存放项目的源代码
package.json
//模块基本信息,项目开发所需模块,版本信息
vue.config.js
//保存vue的配置文件,如:代理,端口配置等
src目录
assets
//静态资源
components
//可重用的组件
router
//路由配置
views
//视图组件(页面)
App.vue
//入口页面(根组件)
main.js
//入口js文件
项目启动
npm run serve
ElementUI
一套基于Vue2.0的桌面端组件库
组件库安装
npm install element-ui@2.15.3
引入ElementUI组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用
Table 表格
Pagination 分页
Dialog 对话框
Form 表单
.......
Vue路由
Vue Router是Vue的官方路由
前端路由:
URL中的hash地址与组件之间的对应关系
组成:
VueRouter:
路由器类,根据路由请求在路由视图中动态渲染选中的组件,路由表中就是路径和视图的对应关系.
router-link:
请求链接组件,浏览器会解析成
<a>
router-view:
动态视图组件,用来渲染展示与路由路径对应的组件
打包部署
npm run build
NGINX
一个轻量级的前端服务器,占用内存少,并发能力强.
项目
部门加员工管理系统:
主页面插入组件
<template>
<el-container>
<el-header>智能学习辅助系统</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
<el-menu-item-group>
<router-link to="/dept">
部门管理
</router-link>
<hr>
<router-link to="/emp">
员工管理
</router-link>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<el-table :data="tableData">
<el-table-column prop="id" label="id" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="gender" label="性别" width="180">
<scope slot-scope="scope">
{{ scope.row.gender == 1 ? "男" : "女" }}
</scope>
</el-table-column>
<el-table-column prop="job" label="职位" width="180">
</el-table-column>
<el-table-column prop="entrydate" label="日期" width="180">
</el-table-column>
<el-table-column prop="updatetime" label="最后修改时间" width="180">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
设置样式
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
获取后端数据返回给页面
<script>
import axios from 'axios';
export default {
data() {
const tableData = [];
return {
tableData: Array(10).fill(tableData)
}
},
methods: {
},
mounted() {
axios.get("http://yapi.eehp.cn/mock/61/user/findAll").then((result) => {
this.tableData = result.data.data;
})
}
}
</script>
路由跳转部门管理页面
<template>
<el-container>
<el-header>智能学习辅助系统</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
<el-menu-item-group>
<router-link to="/dept">
部门管理
</router-link>
<hr>
<router-link to="/emp">
员工管理
</router-link>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<p>成啦兄弟!</p>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
import axios from 'axios';
export default {
data() {
const tableData = [];
return {
tableData: Array(10).fill(tableData)
}
},
methods: {
},
mounted() {
axios.get("http://yapi.eehp.cn/mock/61/user/findAll").then((result) => {
this.tableData = result.data.data;
})
}
}
</script>
路由配置
初始重定向到员工管理页面
{
path: '/',
name: 'home',
redirect:"../views/ContainerView.vue"
},
{
path: '/emp',
name: 'emp',
component: () =>import('../views/ContainerView.vue')
},
{
path: '/dept',
name: 'dept',
component: () =>import('../views/DeptView.vue')
},
刷新路由
在app.vue中刷新路由
<router-view></router-view>
