SSM+ElementUI綜合練習（第一天）

時間 2019-11-12

標籤 ssm+elementui ssm elementui 綜合練習第一天简体版

原文原文鏈接

1.先後端分離：先後端各自在獨立的服務器運行，只約定好數據交互的接口，經過restful風格進行先後端交互css

a) 爲何要進行先後端分離：前端

i. 效率高，術業有專攻，打造精益的團隊，完成前端複雜多變的需求，代碼的維護性比較好，vue

b) 安裝vue腳手架
安裝vue腳手架：npm install –g vue-cli
初始化webpack:vue init webpack
運行vue: npm run devwebpack

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）裏面引用咱們寫的頁面ios

d) ElementUI(快速網站成型工具)web

i. elementUI 的各類組件ajax

e) mock.js前端模擬數據(生成隨機數據，攔截Ajax請求)vue-cli

i. 安裝mock.js：npm install mockjsnpm

ii. Mock.js基本入門模擬數據element-ui

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="width: 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/>'
});