elementui

一、前后端分离

1.1 前后端分离理解

• web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；
• 在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求(restful风格进行前后分离的交互)
• 前端代码和后端代码 分别放到不同的项目里面, 前端和后端 可以单独测试 .并行的测试

1.2 前后端分离优势

• 分工合作 - 为优质产品打造精益团队 专业的人做专业的事情
• 提升开发效率 – >并行开发
• 完美应对复杂多变的前端需求
• 增强代码可维护性

二、搭建前端环境

• 创建static web project项目
• 安装脚手架：npm install -g vue-cli
• 初始化VUE项目：vue init webpack 项目名
• 根据需求选择创建
• 进入创建的项目：cd 项目名
• 运行服务：npm run dev
  vue不是内部或外部命令，查看是否配置环境变量

三、ElementUI基础

3.1 前期准备

• ①安装：npm i element-ui -S
• ②引入：在main.js中引入elementUI

//引入核心js组件
import ElementUI from 'element-ui'; 
//引入依赖的样式
import 'element-ui/lib/theme-chalk/index.css';
//引用
Vue.use(ElementUI) 

• ③使用：在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>

3.2 常用组件

https://element.eleme.cn/2.0/#/zh-CN

• el-button 按钮
• el-tree 树形
• el-table表格
• el-form表单
• el-pagination分页
• el-container容器
• el-layout布局
• el-tabs页签 选项卡
• el-dialog对话框
• el-alert 提示框

四、mockjs(模拟数据)

4.1 特点

• 前后端分离
• 让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性
• 通过随机数据，模拟各种场景。
• 开发无侵入
• 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 用法简单
• 符合直觉的接口。
• 数据类型丰富
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展
• 支持支持扩展更多数据类型，支持自定义函数和正则。

4.2步骤

①、安装
安装mockjs：npm install mockjs
安装axios：npm install axios --save
②、userMock.js文件引用 mockjs

let Mock=require('mockjs') ;

③、在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)
}

④、crud

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>

⑤、在main.js中引入usermock.js

import UserMock from './usermock.js'