SSM+ElementUI综合练习（第一天）

1.前后端分离：前后端各自在独立的服务器运行，只约定好数据交互的接口，通过restful风格进行前后端交互

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

i. 效率高，术业有专攻，打造精益的团队，完成前端复杂多变的需求，代码的维护性比较好，

b) 安装vue脚手架
安装vue脚手架：npm install –g vue-cli
初始化webpack:vue init webpack
运行vue: npm run dev

c) 安装前端UI框架：ElementUI
npm install element-ui –S

在main.js里面导入ElementUI的支持
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)

自定义组件；改吧改吧

在路由（route/index.js）里面引用我们写的页面

d) ElementUI(快速网站成型工具)

i. elementUI 的各种组件

e) mock.js前端模拟数据(生成随机数据，拦截Ajax请求)

i. 安装mock.js：npm install mockjs

ii. Mock.js基本入门模拟数据

f) Axios对Ajax请求的优化

i. 下载安装：npm install axios –save

ii. 使用：

在<script>里面引入import axios from ‘axios’
定义方法获取数据
methods：{
getUser(){
    定义获取数据时的参数
    var params = {page:1}
    发送axios请求
    axios.post(‘/user/info‘,params).then(data=>{
     console.log(data)
     })
   }
}
//挂载方法，钩子方法
mounted(){
this.getUser();
}
前台页面模拟后台数据展示

　　a) 先安装模拟后台数据的mockjs（npm install mockjs）和和模拟ajax请求的axios（npm install axios –save）　　b) 定义一个usermock.js模拟生成后台数据

　　　　import Mock from 'mockjs' // 引入mock

　　　　var dataList = [];
　　　　//生成15条数据放入数组里面
　　　　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")'
　　　　}))
　　　　}
　　　　//
　　　　function pagination(index, size, list) {
　　　　console.log(list);
　　　　console.log(index, size);
　　　　return list.slice((index-1)*size, index*size)
　　　　}
　　　　//模拟请求
　　　　// 获取用户列表
　　　　Mock.mock(new RegExp('/user/info'), '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
　　　　}
　　　　});

c)        前台页面(user.vue)书写
　　　　<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" //后台数据
     　　　　 border
      　　　　height="450px"
     　　　　 style=" 100%">
      　　　　<el-table-column
     　　　　   prop="name"
     　　　　   label="姓名"
      　　　　 width="180">
      　　　　</el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </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-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="10"
      @current-change="handleCurrentChange"
      style="float:right"
    >
    </el-pagination>
</div>
</template>

<script>
//引用axios发送请求
import axios from 'axios';
//表格数据的获取源，属性
export default {
    data() {
      return {
        total:0,
        page:1,
        users: []
      }
    },
    methods:{
      handleCurrentChange(currentPage){
        //当前页数赋值给page这个字段
        this.page = currentPage;
        this.getUsers();
      },
      //获取Uuser数据的方法
      getUsers(){
        //json的格式传递过去
        //传入分页参数进行分页显示
        let params = {
          page:this.page
        };
        // 发送请求获取mock模拟数据 function(data){} 发送后台 http://localhost:80/user/info
        //baseURL+/user/info
        // axios.post('/user/info',params).then(result=>{
        this.$http.post('/user/info',params).then(result=>{
          this.total = result.data.total;
          this.users = result.data.data;

        })
      }
    },
//方法挂载
    mounted(){
      this.getUsers();
    }
}
</script>

d) 在路由包下的index.js页面引入user页面和浏览器访问的路径

e) 在main.js引入mock模拟生成的后台数据axios等核心文件
import App from './App'
import router from './router'
import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
//引入模板生成的数据
import './js/userMock'
import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:80'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
//原型 axios.post -->this.$http
Vue.prototype.$http = axios
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});

EasyMock

　　　　a) Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快

　　　　　　速生成模拟数据的在线 mock 服务。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据。　　　　

　　　　b) 初始设置

　　　　c) 登录注册

i. 浏览器打开https://www.easy-mock.com 输出用户名和密码，如果不存在会自动注册。注意：请牢记密码，系统没有找回密码功能！ --

ii. 新建项目，创建接口

iii. 启动前端项目，项目里面不要引用项目的mock.js