前后端分离
1.1 什么是前后端分离
- 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。
- 很多人误以为前后端分离只是一种web应用开发模式,只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。
- 其实前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。
- 然而作为一种架构模式,我们在实施的过程中主要对以下四个方面来进行比较和重新认识。
前后端分离大概可以从四个方面来理解:
1.2 交互形式
在前后端分离架构中,后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互,前端获取到数据后,进行页面的组装和渲染,页面跳转,最终返回给浏览器。
1.3 代码组织方式
在传统架构模式中,前后端代码存放于同一个代码库中,甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时,都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:
- 半分离
前后端共用一个代码库,但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况,前端不能独立进行开发和测试,项目中缺乏前后端 交互的测试用例。 - 真分离
前后端代码库分离,前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端,能支持前端的独立开发和测试。而后端 代码中除了功能实现外,还有着详细的测试用例,以保证API的可用性,降低 集成风险。
1.4 开发模式
- 真正前后端分离
- 后端先行
1.5 前后端分离的优势
(1) 分工合作 - 为优质产品打造精益团队 专业的人做专业的事情
(2) 提升开发效率 – >并行开发
(3) 完美应对复杂多变的前端需求
(4) 增强代码可维护性
2.elementui
2.1 搭建前端服务
(1) 安装 npm install -g vue-cli
(2) vue init webpack 项目名
(3)cd 项目名
(4)npm run dev 运行服务
2.2 使用
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
(1)安装
npm i element-ui -S
(2)引入elementui 在 main.js
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI) //引用
(3)在vue页面 使用elementui的组件
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
<script>
export default {
name: 'elementUi01',
data () {
return {
msg: 'Welcome to Your Vue.js App',
visible:false
}
}
}
</script>
2.2 组件
el-button 按钮
el-tree 树形
el-table表格
el-form表单
el-pagination分页
el-container容器
el-layout布局
el-tabs页签 选项卡
el-dialog对话框
el-alert 提示框
…
具体使用方法查看官方文档
https://element.eleme.cn/#/zh-CN/component/installation
mock.js
mockjs:前端工程师 来模拟的数据
安装:
(1) npm install mockjs
(2)userMock.js文件引用 mockjs
let Mock=require(‘mockjs’) ;
(3)在js生成数据 ,拦截axios请求(了解)
let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}));
}
//拦截axios请求 this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
//把产生的16数据 放入list对象里面
var list =dataList;
console.log(opts.body)
//取出传递过来的 当前页
var index = JSON.parse(opts.body).page; //3
//每页显示条数
var size = 10;
//取出总的条数
var total = list.length
//分页方法
list = pagination(index, size, list)
return {
'total': total, //总的条数
'data': list //分页之后的数组
}
})
//分页
function pagination(index, size, list){
return list.slice((index-1)*size,index*size); //slice((2-1)*10,2*10) slice(10,20)
}
(4)crud.vue – 掌握
//安装axios
npm install axios --save
getUsers(){
//这个是对象 {key:value} 传递参数
let para = {
page:this.page
}
//加载数据
//发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
this.$http.post('/user/list',para).then(res=>{
console.log(res.data);//返回数组 {'total': total, 'data': list}
this.users = res.data.data; //返回分页list
this.total = res.data.total;//返回总的条数
});
},
handleCurrentChange(val){
//currentPage 每次点击分页条执行的方法
console.log(val);
//把当前页 赋值给page这个字段
this.page = val;
this.getUsers();
}
-----------------------------------------------------------------------------
<div>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true">
<el-form-item>
<el-input placeholder="关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table
:data="users"
style="width: 100%"
border
height="450px"
>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="email"
label="邮件">
</el-table-column>
<el-table-column
prop="phone"
label="电话">
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24" class="toolbar">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
</div>
(5)注意事项 引入usermock.js --在main.js
import UserMock from './usermock.js'