elementui

1 前后端分离

什么叫前后端分离:
前端和后端分离开
前端: 将浏览器中为用户进行页面展示的部分称之为前端
后端: 为前端提供业务逻辑和数据准备的所有代码统称为后端
前后端分工:
前后端开发工作的分工就是前后端分离。 前后端分工;(错误的认识)
真的前后端分离:
不仅仅是前端和后端的分工开发,而是架构的模式

2 前后端分离

(1)交互模式 --restful

(2)代码层次–代码仓库

(3)开发模式–人员分配

现在我们开发 第三个 第四个 :(全栈工程师)

3 前后端分离好处

(1) 专业的人做专业的事情
(2) 提高开发效率 --并行开发
(3) 应对复杂多变的需求
(4) 提高维护性
(5) 成本高 有钱人做的

4 搭建脚手架工程

1)创建一个web项目
2)vue init webpack
3)npm run dev
5 Elementui
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,网站快速成型的工具 类似easyui layui

5.1 elementui使用

1)安装 : npm i element-ui -S
2)在main.js 引入:
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
3)组件
测试elementui的组件
5.2 elementui组件(练习)
layout message
container tree
button …
dialog
table
form
tabs
alert
5.3 mockjs –
为什么需要模拟数据?
主要针对前端人员 , 前端没有后台的数据,需要模拟进行测试
使用mockjs:
(1)安装
npm install mockjs
(2)测试
新创建一个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))
​
3)运行 node mockdemo
5.4 axios请求
axios类似 ajax ,封装promise(异步请求)
安装:
npm install axios --save
5.5 mockjs流程

注意:
main.js引入文件
import axios from ‘axios’
import userMock from ‘…/userMock’
//配置axios的全局基本路径 t
axios.defaults.baseURL=’’
//全局属性配置，在任意组件内可以使用this.$http获取axios对象Vue.prototype.$http = axios
5.6 crud.vue
1)发送请求:
getUsers(){
let params = {
page:this.page
}
//发送请求 controller {data:[],total:100}
this.$http.post(’/user/list’,params).then(res=>{
console.log("-------------------res.data {data: total}");
console.log(res);
this.users = res.data.data;
this.total = res.data.total;
})
}
2)被mock拦截
Mock.mock(new RegExp(’/user/list’),‘post’,(opts) => {
//赋值
var list =dataList;
console.log(opts.body) ;// “{page:2}”
//json字符串转换成JSON对象
var index = JSON.parse(opts.body).page; //2
//每页条数
var size = 10;
//公共的条数
var total = list.length
//分页方法
list = pagination(index, size, list);
return {
‘total’: total,
‘data’: list
}
})