spring boot + vue + element-ui

一、頁面

---

 

1.布局

假設，我們要開發一個會員列表的頁面。

首先，添加vue頁面文件“src\pages\Member.vue”

 參照文檔http://element.eleme.io/#/zh-CN/component/table中的例子,實現一個靜態的列表頁面

代碼如下：

 

 

 

2.修改路由

src\router\index.js文件中，添加

1 2 3 4 5 6 7 8 9 10 11

routes.push({    path:  '/member' ,    name:  '會員管理' ,    component: Main,    iconCls:  'fa fa-user-circle-o' ,    children: [{      path:  '/member/data' ,      component: Member,      name:  '會員信息管理'    }] })

　　

完整代碼如下：

 

 

3.修改首頁，使其出現“會員管理”的菜單

<el-menu :default-active="$route.path" :collapse="collapsed">
            <template v-for="(item,index) in menus">
              <el-submenu :index="index+''" v-if="!item.leaf">
                <template slot="title"><i :class="item.iconCls"></i><span v-if="!collapsed">{{item.name}}</span></template>
            <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" @click="$router.push(child.path)">{{child.name}}</el-menu-item>
            </el-submenu>
            <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
            </template>
          </el-menu>

完整代碼如下：

 

 

點擊左側的“會員信息管理”的菜單，運行效果如下：

 

二、動態查詢數據

---

 

1.mock.js

添加文件：src\mock\member.js

import Mock from 'mockjs'

let adapters = []
adapters.push(
  (mockAdapter) => mockAdapter.onPost('/api/member/loadPage').reply(req => {
    let promise = new Promise((resolve, reject) => {
      let data = req.data ? JSON.parse(req.data) : {
        size: 20
      }
      let result = {
        rows: [],
        total: 10000
      }
      for (let i = 0; i < data.size; i++) {
        let item = Mock.mock({
          id: Mock.Random.guid(),
          name: Mock.Random.cname(),
          sex: Mock.Random.integer(1, 2),
          'age|18-30': 1,
          date: Mock.Random.date(),
          address: Mock.mock('@county(true)'),
        })
        result.rows.push(item)
      }
      setTimeout(() => {
        resolve([200, result])
      }, 2000)
    })
    return promise
  })
)

export {
  adapters
}

 

添加src\mock\index.js文件

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

let mockAdapter = new MockAdapter(axios)

//會員api
import {
  adapters as member
} from '@/mock/member.js'
member.forEach(item => item(mockAdapter))

export default mockAdapter

 

2.修改main.js文件

在main.js中導入mock.js

//開發模式開啟mock.js
if (process.env.NODE_ENV === 'development') {
  require('./mock')
}

導入axios

import axios from 'axios'
Vue.prototype.$axios = axios

 

完整main.js代碼：

 

 

3.修改Member.vue文件

修改查詢分頁的方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

let  getRows =  function () {    if  ( this .pageLoading)      return    this .pageLoading =  true      let  params = {      page:  this .page,      size:  this .size,      query:  this .filters.query    }    //調用post請求    this .$axios.post( '/api/member/loadPage' , params).then(res => {      this .pageLoading =  false      if  (!res.data || !res.data.rows)        return      //總數賦值      this .total = res.data.total      this .page++;      //頁面元素賦值      this .rows = res.data.rows    }). catch (e =>  this .pageLoading =  false ) }

　　

完整的Member.vue代碼如下：

 

 

完整的項目結構如下圖所示：

 

 

 

運行效果如下：

 

 

 

其中，使用了axios來調用http post協議,url是'/api/member/loadPage'，並post了body參數。

但我並沒有寫任何后端代碼。奇怪的是，獲取的數據從哪里來？答案是：mock.js，因為使用了mock.js+axios-mock-adapter來攔截並模擬http協議。

 

 

 

 

 

返回目錄

 

git代碼地址：https://github.com/carter659/spring-boot-vue-element.git