實戰專案-08(講師管理前端開發(講師列表,新增,刪除,修改))
阿新 • • 發佈：2021-10-20
模擬登陸
-
系統預設使用的地址:https://easy-mock.com/mock/5950abc231f35a6636/vue-admin/user/login
-
我們需要將config中的dev.env.js中的地址改為後端的地址
-
進行登陸呼叫兩個方法,login登陸操作方法,和info登陸之後獲取使用者資訊的方法.所以建立兩個方法實現登陸
login 返回 token的值
info 返回roles name avatar
- 在後端controller中建立對應的兩個方法
package com.sli.eduservice.controller; import com.sli.commonutils.R; import org.springframework.web.bind.annotation.*; /** * @author 1_f_ * @create 2021-10-19 8:59 */ @RestController @RequestMapping("/eduservice/user") @CrossOrigin//解決跨域問題 public class EduLoginController { //login @PostMapping("login") public R login(){ return R.ok().data("token","admin"); } //info @GetMapping("info") public R info(){ return R.ok().data("roles","[admin]").data("name","admin").data("avatar","xxxxxxx.jpg"); } }
-
修改api中的login.js修改本地介面的路徑
-
測試發現問題
-
跨域問題
通過一個地址訪問另外一個地址,如果三個地方有任何一個不一樣,都不行
訪問協議:http https
ip地址: 192.168.1.1 172.11.11.11
埠號: 9528 8001
我們存在埠號不一樣的問題,所以有跨域問題
解決:在後端的controller介面上添加註解(此階段)
@CrossOrigin
然後配置一個config的類
package com.sli.eduservice.config; import org.springframework.boot.SpringBootConfiguration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /** * @author 1_f_ * @create 2021-10-19 10:32 */ @SpringBootConfiguration public class CorsConfiguration implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowCredentials(true) .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*"); } }
- 測試發現跨域問題已經解決
框架使用
新增路由,也就是選單欄
對應的效果:
點選某個路由,顯示路由對應的頁面內容
- 在views中建立
list
<template>
<div class="app-container">
講師表單
</div>
</template>
save
<template>
<div class="app-container">
講師列表
</div>
</template>
在api檔案下面建立edu/teacher.js
定義介面和引數地址
在建立的vue頁面引入js檔案,呼叫方法實現功能
講師列表的前端實現
根據上面的步驟
1. 新增路由
2. 建立路由對應的頁面
3. 在api資料夾建立edu/teacher.js定義訪問介面的地址
根據後端介面編寫
import request from '@/utils/request'
export default{
//1. 講師列表(條件查詢帶分頁)
//current:當前頁,limit每頁記錄數,teacherQuery條件物件
getTeacherListPage(current,limit,teacherQuery){
return request({
// url: 'eduservice/teacher/pageTeacherCondition/' + current + "/" + limit,
url: `eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
method: 'post',
//teacherQuety條件物件,後端使用了RequestBody來獲取rest資料則前端使用如下
//data表示把物件轉換json進行傳遞到後端介面中
data: teacherQuery
})
}
}
4. 在建立的vue頁面呼叫定義的方法
需先引入js檔案
import teacher from '@/api/edu/teacher'
import teacher from '@/api/edu/teacher'
//使用了axios返回json資料
export default{
//寫核心程式碼位置
data() {//定義變數和初始值
return {
list:null,//查詢之後返回的集合
page:1,//當前頁
limit:10,//每頁的記錄數
total:0,//總記錄數
teacherQuery:{}//條件封裝物件
}
},
created(){//在頁面渲染之前執行
this.getList()
},
methods:{//建立具體的方法,呼叫teacher.js定義的方法
//講師列表
getList(page = 1){
this.page = page
teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
.then(response =>{
//response介面返回的資料
// console.log(response)
this.list = response.data.rows
this.total = response.data.total
console.log(this.list)
console.log(this.total)
})
}
}
}
5. 表格的渲染,在上面的div中加入
<!-- 表格 -->
<el-table
:data="list"
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="'/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>
啟動專案檢視
6. 分頁的實現和新增條件查詢
1. 分頁的實現
在頁面最下面插入如下的程式碼
然後在mothods中加入
2. 條件查詢
在頁面的最上面新增
<!--條件部分,也就是根據條件篩選-->
<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>
3. 清空功能的實現
- 清空表單中輸入條件的資料
- 查詢所有的資料
在methods中增加方法
具體的邏輯就是:
- 在config中配置了dev.env.js的BASE_API地址能訪問到後端介面的地址
- 在router中配置了選單欄中顯示的內容(點選需要跳轉到對應的頁面)
- 建立router中配置的選單欄的對應的頁面(注意router中的地址要修改)
- 在api建立要訪問的後端的js檔案(也就是和後端互動的主要檔案,往後端傳遞json和接收後端的json)使用模組化讓頁面中可以呼叫裡面的方法
- 在選單欄跳轉到的頁面引入4中的js檔案,然後編寫核心的程式碼大概就是如下
exprot default{
//核心程式碼的位置
data(){
return{
}
},
//頁面載入之前執行
created(){
},
//建立具體的方法,呼叫引入的js中定義的方法
methods:{
}
}
- 在選單欄跳轉到的頁面中編寫對應的前端程式碼展示資料庫中的資料
講師的刪除功能
1. 程式碼中已經有刪除的按鈕了(如果沒有,需要自己編寫)
2. 給按鈕繫結事件
@click="removeDataById"
3. 在繫結事件的方法傳遞刪除講師的id(因為資料庫中拿到了所有的資料,只是前端沒有展示)
@click="removeDataById(scope.row.id)" //意思是取出每個的主鍵id.scope是整個表,row是每一行
4. 在api/edu/teacher.js定義刪除介面的地址
//刪除講師
deleteTeacherId(id){
return request({
url: `eduservice/teacher/${id}`,
method: 'delete'
})
},
5. 在頁面的mothods中增加繫結的方法
removeDataById(id){//刪除講師的方法
this.$confirm('此操作將永久刪除講師記錄, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //點選確定 then方法
//呼叫刪除的方法
teacher.deleteTeacherId(id)
.then(response => {//刪除成功
//提示資訊
this.$message({
type: 'success',
message: '刪除成功!'
});
//回到重新整理列表頁面
this.getList()
})
})
}
新增講師的實現
概述
進入表單,輸入講師資訊
1. 在api介面中新增講師
//新增講師
addTeacher(teacher){
return request({
url: `eduservice/teacher/addTeacher`,
method: 'post',
data: teacher//用json傳到後端中用於建立物件
})
},
2. 在save頁面增加methods方法
saveTeacher(){
teacherApi.addTeacher(this.teacher)
.then(response =>{//新增成功
//提示資訊
this.$message({
type: 'success',
message: '新增成功!'
});
//回到列表頁面 路由跳轉(重定向)
this.$router.push({path:'/teacher/table'})
})
}
講師修改功能的實現
1. 在每條記錄後面新增修改按鈕(程式碼中以及編寫)
2. 點選修改按鈕,進入表單介面,進行資料回顯
根據講師的id查詢資料進行顯示(因為查詢了之後前端沒有展示主鍵,但是還是可以呼叫主鍵)
3. 新增路由(選單不需要顯示,預設和新增用一個表就行)
通過路由跳轉進入資料回顯頁面,在路由index頁面新增路由
因為已經單向綁定了id
4. 在表單頁面實現資料回顯
- 在teacher.js定義根據id查詢的呼叫後端的介面
//根據id查詢講師
getTeacherInfo(id){
return request({
url: `eduservice/teacher/getTeacher/${id}`,
method: 'get'
})
},
- 在頁面呼叫介面進行資料的回顯(也就是在methods中定義查詢方法)
getInfo(id){
teacherApi.getTeacherInfo(id)
.then(response => {
this.teacher=response.data.teacher
})
},
- 呼叫根據id查詢的方法
因為新增和修改使用save的頁面,區別新增還是修改,只有修改的時候查詢資料回顯
所以判斷路徑中是否有講師的id值,如果有id則為修改,如果沒有就是新增
created(){
//不需要在頁面渲染之前呼叫,是點了儲存按鈕之後呼叫
//判斷路徑是否有id值
if(this.$route.params && this.$route.params.id){
//從路徑中獲取id值
const id = this.$route.params.id
//呼叫根據id查詢的方法
this.getInfo(id)
} else { //路徑中沒有id值做新增
this.teacher = {}
}
}
講師修改功能的修改
1. 在api的teacher.js定義修改的介面
2. 在頁面呼叫修改的方法
問題
1.
第一次點選修改,進行資料回顯,然後點選新增講師,進入表單頁面,發現表單的頁面還是顯示修改回顯資料,正常應該是表單的資料清空
解決
使用vue的監聽解決