文章目录
1 前后端分离(理解)
1.1 什么是前后端分离
前端: 将浏览器中为用户进行页面展示的部分称之为前端
后端: 为前端提供业务逻辑和数据准备的所有代码统称为后端
在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。
很多人误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。 //前后端分工
其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。
1.2 前后端分离理解
- 交互模式 — restful
-
代码层次 —代码仓库
半分离
前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。
真分离
前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端 代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低 集成风险。
- 开发模式–人员分配
1.3 前后端分离好处
-
为优质产品打造精益团队 ----- 专业的人做专业的事情
通过将开发团队前后端分离化，让前后端工程师只需要专注于前端或后端的开发工作，是的前后端工程师实现自治，培养其独特的技术特性，然后构建出一个全栈式的精益开发团队。
-
提升开发效率
前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
-
完美应对复杂多变的前端需求
如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。
-
增强代码可维护性
前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。
搭建脚手架工程
步骤 和之前的步骤一样 详情请参考 Vue第二天
Elementui
官网：https://element.eleme.cn/#/zh-CN
1 安装
使用npm方式：npm i element-ui -S
2 使用
在main.js中写入以前内容
import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/components/01_layout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/layout',
name: 'layout',
component: Layout
}
]
})
3 elementui组件：
请参照elementui官网
mockjs(了解)
为什么需要模拟数据?
主要针对前端人员 , 前端没有后台的数据,需要模拟进行测试
什么是mock.js
Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据
使用mockjs
安装
npm install mockjs
测试：
创建一个js文件
var data = Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last',
email:'@email',
ip:'@ip'
}
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
运行 node demo(文件名)
mockjs流程
Ajax请求优化 – axios请求
axios类似 ajax ,封装promise(异步请求)
使用axios
安装
npm install axios --save
注意：需要引入的文件
import axios from 'axios'
import userMock from '../userMock'
//配置axios的全局基本路径 t
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
crud.vue (掌握)
<template>
<div>
<el-table
:data="users"
style="width: 100%">
<el-table-column
prop="createTime"
label="日期"
width="180">
</el-table-column>
<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>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return {
users:[],
total:100,
page:1
}
},
methods: {
handleCurrentChange(val){
//page当前页
this.page = val;
//发送请求查询
this.getUsers();
},
getUsers(){
//发送请求 获取数据 axios
/* axios.get('/getUser').then(res=>{
})*/
let params = {
page:this.page
}
//发送请求 controller {data:[],total:100}
this.$http.post('/user/list',params).then(res=>{
console.log(res);
this.users = res.data.data;
this.total = res.data.total;
})
}
},
mounted(){
//页面加载完之后 执行该方法
this.getUsers();
}
}
</script>
