SSM+ElementUI综合练习

1 前后端分离

1. 前后端分离并不只是开发模式，而是web应用的一种架构模式
2. 前后端分离优势
   ①效率高
   ②专业的人做专业的事
   ③打造精益的团队
   ④代码的维护性比较好
3. 前后端分类是一种架构模式,前后端人员先预定好接口,并行开发与测试.上线时进行分别部署.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.

2 搭建前端环境

1. Idea创建一个static web项目
2. 根目录下执行vue命令
   vue init webpack
3. 运行项目
   npm run dev
4. 4、浏览器访问

3 ElementUI-基于vue前端ui框架

1. 安装(注意：也可以下载下来导入也ok，和原来easyui一样使用就ok)
   npm i element-ui -S
2. 导入

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

3. 开始使用
   以下组件详情见网页https://element.eleme.cn/2.0/#/zh-CN/component/icon
   ①Layout布局
   ②Container布局容器
   ③Button按钮
   ④Tree树形控件
   ⑤Pagination分页
   ⑥Alert警告
   ⑦Tabs标签页
   ⑧Dialog对话框
   ⑨Form
   ⑩Table

4 Elementui+Crud实现

4.1 页面布局

<template>
  <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-button type="danger">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  export default {
    methods: {
      handleCurrentChange(val){
        console.log(val)
        this.page = val;
        this.getUsers();

      },
      handleClick(row) {
        console.log(row);
      },
      getUsers(){

        let para = {
          page: this.page,
          keyword: this.filters.keyword
        };

        this.$http.post("/user/list",para)
        // axios.post("/user/list",para)
          .then((res=>{
            console.log(res,"jjjjjjjj")
            this.total = res.data.total;
            this.users = res.data.data;
          }))

      }
    },
    name: 'table',
    data () {
      return {
        filters: {
          keyword: ''
        },
        page: 1,
        total:100,
        users: []
      }
    },
    mounted(){
      this.getUsers();
    }
  }
</script>

4.2 接口数据模拟-Mockjs&Easymock

1. 下载安装mock.js
   npm install mockjs
2. 在demo.js文件加入代码 测试

let Mock=require('mockjs') 
let data=Mock.mock({ 
// name|规则:值
'list|5':[ 
{ 
'id':1, 
'name':'测试' 
} 
] 
}) 
console.log(JSON.stringify(data,null,2 ))

3. 执行命令 node demo

4.3 crud数据模拟

import Mock from 'mockjs' // 引入mock
//定义数组
var dataList = [];
//随机产生15条数据
for (var i = 0; i < 15; i++) {
  //push添加早数组里面
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }))
}


//模拟请求
// 获取用户信息
Mock.mock(new RegExp('/user/info'), 'post', (opts) => {
  //这个数据  total  rows
  //接收参数
  let list =dataList;
  let index =0;
  if (JSON.parse(opts.body).page == null){
    index = 1;
  }else {
    index= JSON.parse(opts.body).page
  }
  var size = 10;
  list = pagination(index, size, list);
  var data = {
    "total":15,
    "data":list
  };
  return data;


});

/**
 * index：当前页数
 * pagesize：每页显示的条数
 * list：总数据
 * */
function pagination(index, pagesize, list) {
  return list.slice((index - 1) * pagesize, index * pagesize)
}

4.4 Ajax请求优化-axios

1. 安装
   npm install axios --save
2. 局部使用
   
3. 全局使用

import './js/userMock'

import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:8080';
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios;