在線教育項(xiàng)目04_講師管理前端開發(fā)

• 一、登錄功能（臨時(shí)）
• • 跨域問題
  • 框架使用的過程
• 二、前端講師開發(fā)
• • 1.講師列表
  • 2.講師列表添加分頁
  • 3.講師列表?xiàng)l件查詢實(shí)現(xiàn)
  • 4.講師列表刪除功能
  • 5.講師列表刪除功能
  • 5.講師列表修改功能

---

一、登錄功能（臨時(shí)）

跨域問題

通過一個(gè)地址訪問另外一個(gè)地址，這個(gè)過程中如果有三個(gè)地方任何一個(gè)不一樣，就會(huì)出現(xiàn)跨域問題

訪問協(xié)議 ：http
ip地址：都是主機(jī)地址
端口號(hào) ： 9528、8001 不一致出現(xiàn)跨域問題

解決方式

1、在后端接口controller加@CrossOrigin注解； 2、使用網(wǎng)關(guān)解決

框架使用的過程

第一步 添加路由 --router/index.js
第二步 點(diǎn)擊路由，顯示對應(yīng)頁面內(nèi)容
第三步 實(shí)現(xiàn)頁面的具體功能：在api文件夾創(chuàng)建js文件，定義接口地址和參數(shù)
第四步 在創(chuàng)建vue頁面引入js文件，調(diào)用方法實(shí)現(xiàn)功能，最后使用element-ui顯示數(shù)據(jù)

二、前端講師開發(fā)

1.講師列表

第一步 添加路由

第二步 創(chuàng)建路由對應(yīng)的頁面

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

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

第四步 在講師列表頁面 list.vue頁面調(diào)用定義的接口方法，得到返回的數(shù)據(jù)

<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>

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

2.講師列表添加分頁

<!-- 分頁 --><!-- :是v-bind ，單項(xiàng)綁定@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.講師列表?xiàng)l件查詢實(shí)現(xiàn)

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

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

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

4.講師列表刪除功能

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

3、在綁定事件的方法里傳遞要?jiǎng)h除講師的id值

4、在api文件夾teacher.js定義刪除接口的地址
5、頁面調(diào)用，實(shí)現(xiàn)刪除，刪除前彈框確認(rèn)是否刪除

5.講師列表刪除功能

1、點(diǎn)擊添加講師路由，進(jìn)入到對應(yīng)的表單頁面
2、在表單頁面點(diǎn)擊保存，提交接口，添加數(shù)據(jù)庫
3、進(jìn)入api中寫添加方法，
4、在頁面中進(jìn)行調(diào)用，添加完數(shù)據(jù)需要跳轉(zhuǎn)到講師列表，用到路由跳轉(zhuǎn)

5.講師列表修改功能

1、在每條記錄后面添加修改按鈕
2、點(diǎn)擊修改按鈕讓數(shù)據(jù)回顯進(jìn)入表單，根據(jù)id回顯；

• 根據(jù)講師id查出數(shù)據(jù)
• 點(diǎn)擊修改按鈕根據(jù)路由跳轉(zhuǎn)，因此要添加一個(gè)隱藏路由
  

3、修改表單回顯的數(shù)據(jù)添加到數(shù)據(jù)庫完成修改

• 數(shù)據(jù)回顯： 到aip中寫方法
  
• 調(diào)用該方法實(shí)現(xiàn)數(shù)據(jù)回顯
  
• 因?yàn)樘砑佑谛薷亩际褂胹ave頁面，只有修改時(shí)數(shù)據(jù)回顯、
• 判斷路徑中是否有id值，如果有id值則是修改，如果沒有則是添加
• 在aipteacher.js中寫修改接口

路由切換問題：
問題：點(diǎn)擊修改后再點(diǎn)擊添加，還是會(huì)有數(shù)據(jù)回顯
原因：路由跳轉(zhuǎn)到同一個(gè)頁面，create方法只執(zhí)行一次，不會(huì)去執(zhí)行其中的刪除數(shù)據(jù)回顯；我們需要添加一個(gè)監(jiān)聽監(jiān)聽路由的變化，路由變化再執(zhí)行一次設(shè)置好清空回顯的方法即可；

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。