ElementUI+Vue

element ui

一.基本概念

1.前后端分离

1.1.什么是前后端分离

前端代码后后端代码分开运行，后端有后端的服务器去运行，前端有前端的服务器去运行，前端和后端通过 HTTP Restful 方式进行交互，通常是前端向后端发送AJAX请求获取数据。

注意：有些人认为 前段人员写前段，后端人员写后端就是前后端分离了，其实这样说不准确，前后端分离不是前后端分工，只有前端代码和后端代码分开各自都有独立的容器运行这才是前后端分离，谁写前端谁写后端其实并不重要。

1.2.为什么要前后端分离

• 责任分离，擅长的人做擅长的事情，专业的前端人员做前端代码，专业的后端人员做后端代码。
• 开发效率高，前后端可以同时开发，专业前端人员写前端比较快，效果也比较好。
• 增强代码可维护性 ，前端是前端，后端是后端，不会混淆。

1.3.前后端分离缺陷

成本高，公司不仅要招聘后端人员，也要招聘前端人员，人力成本是很高的(工资)，小项目，小公司不适合前后端分离

1.4.前后端如何联调

前后端分离后，后端可以使用postman进行测试，前端可以使用mock/Easymock模拟后端数据进行测试，那么前端怎么知道后端的接口如何对接？比如：接口地址，接口参数，请求方式，返回值等等。方式一：我们可以手写接口文档规范，前后端都通过这个接口文档进行开发和调试，方式二：我们可以使用Swagger接口文档生成工具，该工具集成在后端，通过扫描Controller接口自动生成API文档，那么前端小姐姐就可以根据Swagger接口文档对接后端应用，当前后端都开发完成，前后端一起联调测试。

1.5.Element UI

饿了么Element UI 文档 http://element-cn.eleme.io/#/zh-CN

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。资料下载网站：https://unpkg.com/[email protected]/lib/

Element UI 可以使用cdn方式和NPM方式进行安装，我们使用Npm

二.环境搭建

1.安装VUE-CLI

2.1.创建工程

创建一个static web工程

2.1.初始化VUE-CLI

vue init webpack

2.2.安装Element UI

npm方式安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

如果出现报错：npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself. ，就执行 npm i ajv 安装ajv.

在main.js中导入Element ui

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

也可以通过CND方式安装-不推荐

2.配置路由

2.1.创建elementui.vue

拷贝HelloWorld.vue重命名为ElementUI.vue ,内容如下

2.2.配置路由

router.js导入ElementUI.vue

import ElementUI from '@/components/ElementUI'

增加路由配置

{
    path: '/ElementUI',
    name: 'ElementUI',
    component: ElementUI
}

三.用户CRUD

ElementUI简单的组件这个不 一 一 做演示，同学们自己去根据官网文档去尝试。

1.Table组件

2.1.创建页面

创建页面名字为 user.vue

2.2.配置路由

router.js导入user

import ElementUI from '@/components/user'

增加路由配置

{
    path: '/user',
    name: 'user',
    component: user
}

2.3.页面编写

去官网拷贝table页面代码

2.mock模拟动态数据

使用mock模拟数据，Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。

2.1.安装mockjs

npm install mockjs

2.2.创建user.js文件

创建 src/js/user.js ， 引入mockjs用来模拟后台数据

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，随机产生 1 到 10 个元素
    'list|1-10': [{	
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

2.3.测试效果

cd src/js
node user.js

user.js模拟列表数据,并向外暴露资源

//模拟列表数据=======================================
var dataList = []
for (var i = 0; i < 15; i++) {
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }))
}

//开始的位置 size 每页显示的条数 list 总结数据
function pagination(page, size, list) {
  // page = 2 size 10   list.slice(10,20)
  return list.slice((page-1)*size, page*size)
}
// 获取用户列表 opts：参数
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
  //列表所有数据
  var list =dataList;
  //当前页
  var page = JSON.parse(opts.body).page || 1;
  //每页条数
  var size = JSON.parse(opts.body).size || 10;
  //总条数
  var total = list.length
  //枫叶后的列表数据
  list = pagination(page, size, list)

  //返回分页结果
  return {
    'total': total,
    'data': list
  }
})

3.axios动态渲染列表

3.1.安装axios

npm install axios --save

3.2.导入axios

main.js配置axios

import axios from 'axios'

//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:80'

//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

3.3.动态获取数据

修改user.js，在vue挂载完成之后，通过发送ajax请求获取user.js中的模拟数据

4.分页实现

5.删除数据

5.1.添加删除操作按钮

<el-table-column fixed="right" label="操作" width="200">
    <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)" type="primary" round size="small">编辑el-button>
        <el-popconfirm
                       confirmButtonText='一干到底'
                       cancelButtonText='我后悔了'
                       icon="el-icon-info"
                       iconColor="red"
                       title="你确定要删除当前数据？"
                       @onConfirm="handleRemove(scope.row)"
                       >
            <el-button   slot="reference" type="danger" round size="small">删除el-button>
        el-popconfirm>
    template>
el-table-column>

5.2.删除逻辑-JS

handleRemove(row){
    this.$http.post("/user/delete",{id:row.id}).then(res=>{
        if(res.data.success){
            this.$message({message: '恭喜你，你已经成功的抛弃了他',type: 'success'});
        }else{
            this.$message.error('删除失败['+res.data.message+"]");
        }
    }).catch(error=>{
        this.$message.error('删除失败['+error.message+"]");
    })
}

5.3.删除后台-Mock

user.js添加删除逻辑

Mock.mock(new RegExp('/user/delete'), 'post', (opts) => {
  console.log(opts);
  //返回删除结果
  return {
    'success': true,
    'message': "删除成功"
  }
})

6.批量删除

6.1.添加删除按钮

<el-popconfirm
               confirmButtonText='忍心抛弃'
               cancelButtonText='再给一次机会'
               icon="el-icon-info"
               iconColor="red"
               title="你确定要离我而去？"
               @onConfirm="handleBatchRemove"
               >
    <el-button  :disabled="batchRemoveDiabled" slot="reference"
               type="danger" size="large" style="float: left;margin: 20px">批量删除el-button>
el-popconfirm>

6.2.添加删除方法

 //批量删除
handleBatchRemove(){
    //把对象数组转成 id数组
    let ids = this.selectedRows.map(function (obj,index,arr) {
        return obj.id;
    });
    this.$http.post("/user/batchDelete",ids).then(res=>{
        if(res.data.success){
            this.$message({message: '恭喜你，你已经成功的抛弃了他们',type: 'success'});
        }else{
            this.$message.error('删除失败['+res.data.message+"]");
        }
    }).catch(error=>{
        this.$message.error('删除失败['+error.message+"]");
    })
},

6.3.删除后台-Mock

user.js添加删除逻辑

Mock.mock(new RegExp('/user/batchDelete'), 'post', (opts) => {
  console.log(opts);
  //返回删除结果
  return {
    'success': true,
    'message': "删除成功"
  }
})

7.高级查询

7.1.添加工具条

<el-col :span="24" class="toolbar">
    <el-form :inline="true" :model="queryParam" class="demo-form-inline" style="float: left;margin-left: 20px">
        <el-form-item label="用户名">
            <el-input v-model="queryParam.username" placeholder="用户名">el-input>
        el-form-item>
        <el-form-item label="注册时间">
            <el-date-picker
                            v-model="queryParam.registerDate"
                            type="date"
                            placeholder="选择日期">
            el-date-picker>
        el-form-item>
        <el-form-item>
            <el-button type="primary" @click="loadListData">查询el-button>
        el-form-item>
    el-form>
el-col>

7.2.添加绑定数据

data() {
    return {
        queryParam:{
        username:'',
        registerDate:'',
	},
...

7.3.提交查询

直接调用列表的查询方法，添加查询条件作为参数即可

8.新增修改

8.1.弹窗布局

 
    <el-dialog title="新增用户" ref="addForm" :visible.sync="dialogFormVisible" >
      <el-form :model="addForm" label-width="50px" >
        <el-form-item label="姓名" >
          <el-input v-model="addForm.name" autocomplete="off" >el-input>
        el-form-item>
        <el-form-item label="电话" >
          <el-input v-model="addForm.phone" autocomplete="off">el-input>
        el-form-item>
      el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消el-button>
        <el-button type="primary" @click="handlerAddSubmit">确 定el-button>
      div>
    el-dialog>

新增按钮

<el-button type="success" @click="handleShowAddDialog()">新增el-button>

编辑按钮

<el-button @click="handleShowEditDialog(scope.row)" type="primary" round size="small">编辑el-button>

8.2.数据绑定

return {
    dialogFormVisible:false,
    addForm:{
        name:'',
        phone:''
    },
    ...

8.3.显示弹窗

 //编辑显示弹窗
handleShowEditDialog(row){
    //数据回显
    this.addForm = row;
    this.dialogFormVisible=true
},
    //显示添加弹窗
    handleShowAddDialog(){
        this.addForm.name = '';
        this.addForm.phone = '';
        this.dialogFormVisible=true
    },

8.4.后台逻辑-MOCK

Mock.mock(new RegExp('/user/saveOrUpdate'), 'post', (opts) => {
  console.log(opts);
  //返回结果
  return {
    'success': true,
    'message': ""
  }
})