vue.config.js
//匯入defineConfig函式
const { defineConfig } = require('@vue/cli-service')
//將defineConfig函式的結果匯出
module.exports = defineConfig({
//轉譯依賴項
transpileDependencies: true,
//開發伺服器配置
devServer: {
//指定伺服器埠
port: 9090,
//配置代理伺服器
proxy: {
//觸發代理的路徑字首
'/api': {
//指定API請求應傳送到的目標URL
target: 'http://localhost:8080',
//改變請求的源
changeOrigin: true
}
}
}
})
student.js
import axios from "axios";
//分頁條件查詢
export function page(pageNum, pageSize, name, sex) {
return axios({
url: '/api/student/findByPage?pageNum=' + pageNum + '&pageSize=' + pageSize + '&name=' + name + '&sex=' + sex,
method: 'get'
})
}
//新增
export function add(student) {
return axios({
url: '/api/student/add',
method: 'post',
data: student
})
}
//編輯
export function edit(student) {
return axios({
url: '/api/student/edit',
method: 'put',
data: student
})
}
//刪除
export function remove(id) {
return axios({
url: `/api/student/remove/${id}`,
method: 'delete'
})
}
Student.vue
<template>
<div>
<!-- 搜尋框：透過v-model雙向繫結輸入框的值，篩選學生的姓名和性別 -->
<el-input v-model="records.name" placeholder="請輸入姓名" class="search-box" clearable></el-input>
<el-select v-model="records.sex" placeholder="請選擇性別" class="search-box" clearable>
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
<!-- 查詢按鈕：點選觸發query()方法，查詢學生資訊 -->
<el-button type="primary" @click="query()">查詢</el-button>
<!-- 新增按鈕：點選觸發add()方法，開啟編輯對話方塊用於新增學生資訊 -->
<el-button type="primary" @click="add()">新增</el-button>
<!-- 分隔線：分隔查詢區域和學生資訊展示區域 -->
<el-divider></el-divider>
<!-- 學生資訊表格：透過v-bind:data繫結學生資料列表，透過el-table-column定義表格的列 -->
<el-table v-bind:data="students">
<!-- 展示學生的編號、姓名、性別和生日，每一列透過prop屬性繫結到相應資料欄位 -->
<el-table-column label="編號" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="性別" prop="sex"></el-table-column>
<el-table-column label="生日" prop="birthday"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<!-- 編輯按鈕：點選觸發edit()方法，開啟編輯對話方塊用於編輯學生資訊 -->
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<!-- 刪除按鈕：點選觸發remove()方法，刪除學生資訊 -->
<el-button @click="remove(scope.row.id)" type="text" size="small">刪除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分頁元件，其屬性包括：總記錄數、每頁顯示條數、當前頁碼、分頁佈局、
每頁顯示條數列表、當前頁碼改變事件監聽器、每頁顯示條數改變事件監聽器 -->
<el-pagination :total="total" :page-size="records.pageSize" :current-page="records.pageNum"
layout="prev,pager,next,sizes,->,total" :page-sizes="[5, 10, 15, 20]" @current-change="currentChange"
@size-change="sizeChange"></el-pagination>
<!-- 學生資訊編輯對話方塊 -->
<el-dialog title="學生資訊" :visible.sync="dialogVisible" width="30%">
<el-form :model="form" label-width="120px">
<el-form-item label="編號">
<el-input v-model="form.id" :readonly="true"></el-input>
</el-form-item>
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-select v-model="form.sex">
<el-option value="男"></el-option>
<el-option value="女"></el-option>
</el-select>
</el-form-item>
<el-form-item label="生日">
<el-date-picker v-model="form.birthday" type="date" value-format="yyyy-MM-dd"
placeholder="選擇日期" style="width: 180px;"></el-date-picker>
</el-form-item>
<el-form-item>
<!-- 確定按鈕：點選觸發save()方法，儲存學生資訊 -->
<el-button type="primary" @click="save()">確定</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
//引入API模組
import {page, add, edit, remove} from '@/api/student'
const options = {
mounted() {
this.query() //頁面載入時自動執行查詢
},
data() {
return {
students: [], //學生資料列表
total: 0, //總記錄數
dialogVisible: false, //編輯對話方塊的可見性
//當前編輯的學生資訊
form: {
id: 0,
name: "",
sex: "",
birthday: ""
},
//查詢條件
records: {
id: 0,
name: "",
sex: "",
birthday: "",
pageNum: 1, //當前頁碼
pageSize: 5 //每頁顯示條數
}
}
},
methods: {
//當前頁碼改變時觸發，更新records.pageNum並重新查詢
currentChange(pageNum) {
this.records.pageNum = pageNum;
this.query();
},
//每頁顯示條數改變時觸發，更新records.pageSize並重新查詢
sizeChange(pageSize) {
this.records.pageSize = pageSize;
this.query();
},
//新增
add() {
this.dialogVisible = true
this.form = {};
},
//編輯
edit(row) {
this.form = {...row};
this.dialogVisible = true
},
//儲存
async save() {
if (this.form.id) { //如果存在id，則編輯資訊
edit(this.form).then(() => {
this.dialogVisible = false
this.query()
})
} else { //如果不存在id，則新增資訊
add(this.form).then(() => {
this.dialogVisible = false
this.query()
})
}
},
//刪除
async remove(id) {
console.log(id)
try {
//彈窗確認刪除操作
await this.$confirm('此操作將永久刪除該資料, 是否繼續？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
})
//執行刪除操作
await remove(id)
//查詢更新後的資料
await this.query()
} catch (e) {
console.log('取消刪除', e)
}
},
//查詢
async query() {
//呼叫page方法，傳遞指定引數，await關鍵字使該函式暫停執行，直到page方法返回的Promise被解決，並將結果賦值給resp變數
const resp = await page(this.records.pageNum, this.records.pageSize, this.records.name, this.records.sex)
this.students = resp.data.data.records; //將records屬性的值賦給this.students，更新學生列表
this.total = resp.data.data.totalRow; //將totalRow屬性的值賦給this.total，更新總記錄數
}
}
}
export default options
</script>
<style scoped> /* 樣式僅應用於當前元件的元素 */
.search-box {
width: 180px;
margin: 10px;
}
.el-input,
.el-select {
width: 180px;
}
</style>