前后端分离、ElementUI、Mock.js模拟数据、axios技术笔记

前后端分离

概念：

​ 1.运行阶段：前端代码和后端代码分开运行

​ 2.开发阶段：前后端约定好交互数据，实现并行开发和测试

​ 3.请求方式（Restful规范）：

​ 1.get：查询单个对象

​ 2.post：修改

​ 3.put：新增

​ 4.delete：删除

​ 5.patch：操作批量数据

​ 4.代码存放方式：前后端代码存放在不同的代码库中

​ 5.开发模式：

​ 1.记录定制接口：

​ 1.手写

​ 2.使用seagger自动生成接口文档

​ 2.前后端并行开发：

​ 1.前端make模拟数据

​ 2.后台：单元测试

​ 3.连调

​ 4.测试

​ 5.上线

前后端分离是一种架构设计

为什么要进行前后端分离：

​ 1.责任分明

​ 2.开发效率高

​ 3.维护性较好

​ 4.前后端分离成本高，一般用于大型项目和大型公司

ElementUI

1.简介：

​ 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件

2.安装：

​ 输入指令进行安装：npm i element-ui -S

3.导入：

import ElementUI from 'element-ui'; //引入核心js组件

import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式

Vue.use(ElementUI)//使用ElementUI

Mock.js模拟数据列表（简单了解）

安装：

​ 输入指令进行安装：npm install mockjs

引入：

user.js

//映入mockjs代码
let Mock=require('mockjs')

//模拟数据列表（百度，网上有很多）
var result = Mock.mock({
'list|203': [{
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}]
})

//准备好模拟数据后，要对外暴露的资源（接口）
Mock.mock( "/user/list", "post", function( options ) {

})

User.vue

//数据准备好之后一定要在前端进行引入
import User from "../js/user";

Ajax请求优化-axios

安装：

​ 输入指令进行安装：npm install axios --save

导入：

/*引入axios模块*/
import axios from 'axios'

/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;

使用：

this.$http.post("/user/list",param).then(res =>{

});

模拟数据展示+数据分页代码

user.js

// 使用 Mock
var Mock = require('mockjs')
//模拟数据列表
var result = Mock.mock({
    'list|203': [{
      'id': '@increment',
      'name': '@cname',
      'phone': /^1[0-9]{10}$/,
      'email': '@email',
      'address': '@county(true)',
      'createTime': '@date("yyyy-MM-dd")'
    }]
})

//对外暴露的资源（接口）
Mock.mock( "/user/list", "post", function( options ) {
  let paramJosnStr = options.body;//获取json字符串
  let JosnObj = JSON.parse(paramJosnStr);//把json字符转换成json对象
  let page = JosnObj.page;//获取当前页
  let pageSize = JosnObj.pageSize;//获取煤业条数
  let data = result.list;//获取所有数据

  let begin = (page - 1) * pageSize;//获取开始页数
  let end = page * pageSize;//获取结束页数

  return{//数据响应
    data:data.slice(begin,end),
    total:result.list.length
  }
});

user.vue

<template>
  <div>
    <!--模拟数据列表-->
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建日期">
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
    //引入资源
    import User from "../js/user";
    export default {
      name: "User",
      data() {
        return {
          tableData: [],
          currentPage:1,//设置当前页
          pageSizes:[5,10,15,20],//设置选择展示数据条数
          pageSize:10,//设置分页条数
          total:0,//设置总条数
          loading:true
        }
      },
      methods:{
        currentChange(v){//当前页发生变化时触发事件
          this.currentPage = v;
          this.loadUserList();
          this.loading = true
        },
        sizeChange(v){//当前页展示条数发生变化时触发事件
          this.pageSize = v;
          this.currentPage = 1;
          this.loadUserList()
          this.loading = true
        },
        loadUserList(){//加载数据
          let param = {"page":this.currentPage,"pageSize":this.pageSize};//把当前页和分页条数进行封装
          this.loading = true;
          this.$http.post("/user/list",param).then(res =>{//发送ajax请求到后台
            this.tableData = res.data.data;//获取数据
            this.total = res.data.total;//获取总条数
            this.loading = false
          })
        }
      },
      mounted(){//当页面加载完成之后发送ajax请求
        this.loadUserList()//调用loadUserList()方法
      }
    }
</script>

<style scoped>

</style>