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.            使用：

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

　　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>
    　　　　<!--:data="users"表格的数据-->
    　　　　<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>
    <!--分页标签-->
    <!--@current-change="handleCurrentChange"调用方法获取分页的users-->
    <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/>'
});

1. EasyMock

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

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

　　　　b)       初始设置

　　　　c)        登录注册

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

                   ii.            新建项目，创建接口

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