前后端分离
- 前端：浏览器中为用户进行页面展示的部分
- 后端：为前端提供业务逻辑和数据准备的部分
前后端分离
不仅仅是前端和后端的分工开发，而是架构的模式
交互模式
image.png
代码层次
image.png
开发模式---人员分配
image.png
搭建脚手架工程
- 创建一个web项目
- vue init webpack
- npm run dev
emementui使用
- 安装：npm i element-ui -s
- 在main.js引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
- 去官网复制需要的组件
layout message container tree button dialog table form tabs alert
mockjs
使用场景：
前端人员没有后台数据的时候，用于进行模拟测试
使用
- 安装
npm install mockjs
- 测试
- 运行 node demo
axios请求
axios类似ajax 封装promise（异步请求）
- 安装
npm install axios --save
- main.js引入文件
import axios from 'axios'
import userMock from '../userMock'
//配置axios的全局基本路径 t
axios.defaults.baseURL=''
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
Vue.config.productionTip = false
CRUD
- 发送请求
getUsers(){
//发送请求拿到数据 --把参数传递到后台 (axios)
//user/list page
let para = {
page:this.page
}
this.$http.post("/user/list",para).then((res=>{
console.log(res);
this.users = res.data.data;
this.total = res.data.total;
}))
}
- mock拦截数据(前端测试阶段使用)
//接收前台传过来的请求
//opts接收参数
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
var list =dataList;
console.log(opts.body)
//接收当前页数据
var index = JSON.parse(opts.body).page;
//每页显示条数
var size = 10;
var total = list.length
//分页方法
list = pagination(index, size, list)
return {
'total': total,
'data': list
}
})
