Mooc項目開發筆記（五）：搭建前臺框架、修改前臺框架配置信息、添加講師列表前端顯示

一、導入前臺頁面模板

1、簡介

vue-element-admin：是基於element-ui 的一套後臺管理系統集成方案。

**GitHub地址：**https://github.com/PanJiaChen/vue-element-admin

vue-element-admin是基於element-ui 的一套後臺管理系統集成方案。

vue-admin-template：是基於vue-element-admin的一套後臺管理系統基礎模板（最少精簡版），可作爲模板進行二次開發。

**GitHub地址：**https://github.com/PanJiaChen/vue-admin-template

**建議：**可以在 vue-admin-template 的基礎上進行二次開發，把 vue-element-admin當做工具箱，想要什麼功能或者組件就去 vue-element-admin 那裏複製過來。

2、安裝

# 解壓壓縮包
# 進入目錄
cd vue-admin-template-master

# 安裝依賴
npm install

# 啓動。執行後，瀏覽器自動彈出並訪問http://localhost:9528/
npm run dev

二、項目的創建和基本配置

1、修改項目信息

將vue-admin-template-master重命名爲mooc-admin

修改package.json

{
  "name": "mooc-admin",
  ...
  "description": "在線課程後臺管理系統",
  "author": "Miracle42 <*****@foxmail.com>",
  ...
}

2、修改配置信息

config/index.js中修改

port: 9528
...
useEslint: false //關閉代碼檢查（太嚴格）

3、修改接口地址

將config/dev.env.js下面的BASE_API改爲自己的後端接口地址

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"https://localhost:8080"', //改爲自己的後端接口地址
})

4、項目的目錄結構

. 
├── build // 構建腳本
├── config // 全局配置 
├── node_modules // 項目依賴模塊
├── src //項目源代碼
├── static // 靜態資源
└── package.json // 項目信息和依賴配置

src 
├── api // 各種接口 （主要）
├── assets // 圖片等資源 
├── components // 各種公共組件，非公共組件在各自view下維護 
├── icons //svg icon 
├── router // 路由表 （主要）
├── store // 存儲 
├── styles // 各種樣式 
├── utils // 公共工具，非公共工具，在各自view下維護 
├── views // 頁面顯示，各種layout （主要）
├── App.vue //***項目頂層組件*** 
├── main.js //***項目入口文件***
└── permission.js //認證入口

三、添加模擬登錄功能

1、編寫服務器端接口

在controller包下添加EduLoginController，其中需要實現前端中登錄的功能和獲取信息的功能

不過這裏是模擬實現，之後會具體實現

登陸中返回結果需要一個token

獲取信息接口返回結果包括：

• roles：用戶角色
• name：用戶名稱
• avatar：頭像鏈接

其中需要特別關注的一點是，類上邊添加了**@CrossOrigin註解**。這個註解主要是爲了結果跨域無法訪問的問題。當請求的協議、IP地址或者端口號不同時，會出現跨域問題。

前端端口用的是9528，而後端則是8080，所以會出現跨域的問題，所以需要加上**@CrossOrigin註解**

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin //爲了解決跨域問題
public class EduLoginController {

    @PostMapping("login")
    public R login() {

        return R.ok().data("token", "admin");
    }

    @GetMapping("info")
    public R info() {

        return R.ok().data("roles", "[admin]")
                .data("name", "ada")
                .data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }
}

2、更改前端頁面請求地址

模板默認請求的是紅框內的地址，我們需要改爲將config/dev.env.js中的請求地址改爲我們的地址

接着需要將src/api/login.js中的請求路徑修改爲與後端對應的路徑：

3、測試

重啓前端和服務器端項目

點擊登錄按鈕，就可以登錄

四、講師列表前端實現★

講師列表前端實現可以作爲前端功能實現通用步驟

1、添加路由

首先需要在導航欄也就是路由的位置添加講師相關的導航，路由的文件所在位置如下圖所示：

在export對應的中括號中，添加如下內容：

  //講師路由
  {
    path: '/teacher',
    component: Layout,
    redirect: '/teahcer/table',
    name: '講師管理',
    meta: { title: '講師管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '講師列表',
        component: () => import('@/views/edu/teacher/list'), //對應下面創建的vue文件
        meta: { title: '講師列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加講師',
        component: () => import('@/views/edu/teacher/save'), //對應下面創建的vue文件
        meta: { title: '添加講師', icon: 'tree' }
      }
    ]
  },

接下來刷新頁面就可以看到下面的效果

2、添加路由對應的頁面

路由對應的頁面也就是上面圖片右邊需要顯示的部分

首先在scr/views下面創建文件夾edu/teahcer，然後在下面分別創建list.vue和save.vue

兩個文件分別添加下面的內容：

list.vue

<template>
  <div class="app-container">
    講師列表
  </div>
</template>

save.vue

<template>
  <div class="app-container">
    講師添加
  </div>
</template>

刷新頁面：

3、定義接口訪問地址

在api目錄下創建edu/teacher.js，用於獲取條件分頁獲取講師列表

內容如下：

import request from '@/utils/request' //框架封裝的axios請求

//表示導出，別的文件可以使用
export default {

    /**
     * 獲得講師列表（分頁條件查詢）
     * @param {*} cur 分頁的當前頁
     * @param {*} limit 每個獲取的記錄數
     * @param {*} teacherQuery 查詢條件
     */
    getTeacherListPage(cur, limit, teacherQuery){
        return request({
            //兩種方式都可以拼接路徑，建議第二種
            // url: '/eduservice/teacher/pageTeacherCondition/' + cur + "/" + limit,
            url: `/eduservice/teacher/pageTeacherCondition/${cur}/${limit}`,
            method: 'psot',
            //teacherQuery條件對象，後端使用RequestBody獲取數據
            //data表示把對象轉換爲json傳遞到接口中去
            data: teacherQuery
          })
    }
}

4、編寫頁面調用接口獲取數據

在list.vue中編寫js和html用於獲取和顯示數據

1）初始化vue組件

<template>
  <div class="app-container">
    講師列表
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'
export default {

  data() {// 定義數據
      return {}
  },
    
  created() { // 當頁面加載時獲取數據
    this.getList()
  },
    
  methods: {
    getList() { // 調用api層獲取數據庫中的數據
      console.log('加載列表')
    }
  }
}
</script>

2）定義data

  data(){ //定義變量並設置初始值
    return {
      list : null, //獲得查詢結果
      page : 1, //當前頁
      limit : 10, //每個的數據條數
      total : 0, //總記錄數
      teacherQuery : {}
    }
  },

3）定義methods

  methods:{ // 創建具體的方法，調用teacher.js中的方法
      //獲取講師列表的方法
      getList(){
        teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
              .then(response => {
                //response就是接口返回的數據
                this.list = response.data.rows
                console.log(this.list)
                this.total = response.data.total
                console.log(this.total)
              }) //請求成功
              .catch(error => {
                console.log(error)
              }) //請求失敗
      }
  }

4）表格渲染

        <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"    
      element-loading-text="數據加載中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序號"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名稱" width="80" />

      <el-table-column label="頭銜" width="80">
        <template slot-scope="scope">
          {{ scope.row.level===1?'高級講師':'首席講師' }}
        </template>
      </el-table-column>

      <el-table-column prop="intro" label="資歷" />

      <el-table-column prop="gmtCreate" label="添加時間" width="160"/>

      <el-table-column prop="sort" label="排序" width="60" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/edu/teacher/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

5、添加分頁條

添加分頁組件，其中的前3個屬性都帶了冒號，表示單向綁定，也就是取值，

• current-page：當前頁
• page-size：每頁的記錄數
• total：總記錄數

    <!-- 分頁 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

修改getList函數，el-pagination每次切換頁時都會向getList中傳入當前頁碼，所以我們需要修改getList函數，獲取這個當前頁，否則每次請求都是第一頁

      //獲取講師列表的方法
      getList(page = 1){
        this.page = page
        teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
              .then(response => {
                //response就是接口返回的數據
                this.list = response.data.rows
                console.log(this.list)
                this.total = response.data.total
                console.log(this.total)
              }) //請求成功
              .catch(error => {
                console.log(error)
              }) //請求失敗
      }

效果：

6、添加頂部查詢表單

添加查詢表單組件，其中v-model表示雙向綁定，用於輸入並設置信息，後面跟teacherQuery對象的屬性

    <!--查詢表單-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="講師名"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="講師頭銜">
          <el-option :value="1" label="高級講師"/>
          <el-option :value="2" label="首席講師"/>
        </el-select>
      </el-form-item> 

      <el-form-item label="添加時間">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="選擇開始時間"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="選擇截止時間"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查詢</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

上邊的兩個el-button分別綁定了查詢事件和請求查詢條件事件。下面時resetData的代碼：

7、添加講師刪除功能

在api/edu/teacher.js中定義講師刪除接口的地址

    /**
     * 根據id刪除講師信息
     * @param {*} id 
     */
    removeDataById(id){
        return request({
            url: `/eduservice/teacher/${id}`,
            method: 'delete',
        })
    }

在list.vue頁面中調用上面的方法，即在methods中添加如下方法：

      //刪除講師
      removeDataById(id){
        //彈出刪除講師提示框
        this.$confirm('此操作將永久刪除該講師信息, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //用戶點擊確定會調用
          //嘗試刪除數據，並且提示刪除結果
          teacher.deleteTeacherById(id)
            .then( response => {
                //提示刪除成功信息
              this.$message({
                type: 'success',
                message: '刪除成功!'
              });
              //刷新列表      
              this.getList()
            })
        })
      },