在線教育項目04_講師管理前端開發

• 一、登錄功能（臨時）
• • 跨域問題
  • 框架使用的過程
• 二、前端講師開發
• • 1.講師列表
  • 2.講師列表添加分頁
  • 3.講師列表條件查詢實現
  • 4.講師列表刪除功能
  • 5.講師列表刪除功能
  • 5.講師列表修改功能

---

一、登錄功能（臨時）

跨域問題

通過一個地址訪問另外一個地址，這個過程中如果有三個地方任何一個不一樣，就會出現跨域問題

訪問協議 ：http
ip地址：都是主機地址
端口號 ： 9528、8001 不一致出現跨域問題

解決方式

1、在后端接口controller加@CrossOrigin注解； 2、使用網關解決

框架使用的過程

第一步 添加路由 --router/index.js
第二步 點擊路由，顯示對應頁面內容
第三步 實現頁面的具體功能：在api文件夾創建js文件，定義接口地址和參數
第四步 在創建vue頁面引入js文件，調用方法實現功能，最后使用element-ui顯示數據

二、前端講師開發

1.講師列表

第一步 添加路由

第二步 創建路由對應的頁面

第三步 在api文件夾創建edu.js定義訪問接口的地址

import request from '@/utils/request'export default{//1.講師列表（條件分頁查詢）// current當前頁，每頁記錄條數、teacherQuery條件的對象getTeacherListPage(current,limit,teacherQuery){return request({url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,method: 'post',//條件的對象，后端用RequestBody獲取數據//data表示把對象轉換為json進行傳遞到接口里data:teacherQuery})} }

第四步 在講師列表頁面 list.vue頁面調用定義的接口方法，得到返回的數據

<template><div class="app-container">講師表單</div> </template><script> //E:/code_path/web_code/vs1010/vue-admin-template-master/src/api/edu import teacher from '@/api/edu/teacher.js'export default {//寫核心代碼// data:{// },data(){return{list:null,page:1,limit:10,total:0,teacherQuery:{} }},created() {this.getList()},methods:{getList(){teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery).then(response =>{list = response.data.rows}).catch(error =>{console.log(error)})}} } </script>

第五步 把請求接口獲取到的數據在頁面進行顯示（利用element-ui）

2.講師列表添加分頁

<!-- 分頁 --><!-- :是v-bind ，單項綁定@current-change="getList" :綁定自己寫的分頁方法--><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" />

3.講師列表條件查詢實現

使用element-ui實現
在列表上添加條件輸入的表單，使用v-model實現數據的雙向綁定，將查詢的參數傳入到data數據中；

清空功能：把查詢表的條件值清空。然后查詢所有數據；

resetData(){//清空的方法//表單數據清空//清空對象中的值this.teacherQuery = {}//查詢所有數據this.getList()}

4.講師列表刪除功能

1、在每條記錄后面添加刪除按鈕
2、在按鈕上綁定事件

3、在綁定事件的方法里傳遞要刪除講師的id值

4、在api文件夾teacher.js定義刪除接口的地址
5、頁面調用，實現刪除，刪除前彈框確認是否刪除

5.講師列表刪除功能

1、點擊添加講師路由，進入到對應的表單頁面
2、在表單頁面點擊保存，提交接口，添加數據庫
3、進入api中寫添加方法，
4、在頁面中進行調用，添加完數據需要跳轉到講師列表，用到路由跳轉

5.講師列表修改功能

1、在每條記錄后面添加修改按鈕
2、點擊修改按鈕讓數據回顯進入表單，根據id回顯；

• 根據講師id查出數據
• 點擊修改按鈕根據路由跳轉，因此要添加一個隱藏路由
  

3、修改表單回顯的數據添加到數據庫完成修改

• 數據回顯： 到aip中寫方法
  
• 調用該方法實現數據回顯
  
• 因為添加于修改都使用save頁面，只有修改時數據回顯、
• 判斷路徑中是否有id值，如果有id值則是修改，如果沒有則是添加
• 在aipteacher.js中寫修改接口

路由切換問題：
問題：點擊修改后再點擊添加，還是會有數據回顯
原因：路由跳轉到同一個頁面，create方法只執行一次，不會去執行其中的刪除數據回顯；我們需要添加一個監聽監聽路由的變化，路由變化再執行一次設置好清空回顯的方法即可；

總結

以上是生活随笔為你收集整理的在线教育项目04_讲师管理前端开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。