公司最近在組織培訓(xùn)Springboot+Vue前后端分離，可特么終于要換了
簡單介紹一下所涉及的技術(shù)內(nèi)容
前端
- vue：^2.5.2
- vue-router：^3.0.1
- axios：^0.21.1
- element-ui：^2.15.3
后端
- spring-boot：2.1.1.RELEASE
- jdk:1.8
- mybatis-plus:3.1.1
- mysql：5.1.47
- swagger2:2.9.2
先看下效果圖
image.png
后端接口
接口文檔
http://localhost:8089//swagger-ui.html#/
image.png
查詢
- 請求
| URL | http://localhost:8089/sysUser/selectAll |
|---|---|
| hethod | get |
- 入?yún)?/li>
| name | 用戶名 |
|---|---|
| current | 當(dāng)前頁數(shù) |
| size | 當(dāng)前頁數(shù)量 |
- 出參
{
"code": 0,
"data": {
"records": [
{
"id": 35,
"name": "12333",
"nickName": "33333",
"email": "132@qq.com",
"mobile": "15606981928",
"createTime": "2021-08-19 13:29:33"
}
],
"total": 13,
"size": 10,
"current": 1,
"searchCount": true,
"pages": 2
},
"msg": "執(zhí)行成功"
}
新增
- 請求
| URL | http://localhost:8089/sysUser/insert |
|---|---|
| hethod | post |
- 入?yún)?/li>
| name | 用戶名 |
|---|---|
| nickName | 昵稱 |
| mobile | 手機(jī)號(hào)碼 |
| 郵箱 |
- 出參
{
"code": 0,
"data": true,
"msg": "執(zhí)行成功"
}
修改
- 請求
| URL | http://localhost:8089/sysUser/update |
|---|---|
| hethod | post |
- 入?yún)?/li>
| name | 用戶名 |
|---|---|
| nickName | 昵稱 |
| mobile | 手機(jī)號(hào)碼 |
| 郵箱 | |
| id | 主鍵 |
- 出參
{
"code": 0,
"data": true,
"msg": "執(zhí)行成功"
}
刪除
- 請求
| URL | http://localhost:8089/sysUser/delete |
|---|---|
| hethod | post |
- 入?yún)?/li>
| idList | id集合 |
|---|
- 出參
{
"code": 0,
"data": true,
"msg": "執(zhí)行成功"
}
前端部分
下面內(nèi)容分為以下幾個(gè)部分
- 顯示列表
- 查詢
- 分頁
- 新增
- 修改
- 刪除
- 出現(xiàn)的問題以及解決辦法
顯示列表
image-20210819112356820.png
- 頁面代碼
<template>
<el-row>
<el-col :span="24">
<el-card class="box-card">
<el-row :gutter="20" style="margin-bottom: 15px">
<el-col :span="6">
<el-input placeholder="請輸入用戶名" v-model="query.name" clearable>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
</el-row>
<el-table
:data="userList"
border
stripe
ref="userTable"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="用戶名"
align="center"
>
</el-table-column>
<el-table-column
prop="nickName"
label="昵稱"
align="center"
>
</el-table-column>
<el-table-column
prop="email"
label="郵箱"
align="center"
>
</el-table-column>
<el-table-column
prop="mobile"
label="手機(jī)號(hào)"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
label="創(chuàng)建時(shí)間"
align="center"
>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default {
name: "SysUser",
data() {
return {
query: {
current: 1,
size: 10,
name: ''
},
userList: []
}
},
methods:{
async getUserList() {
this.$http.get('/sysUser/selectAll', {
params: this.query
}).then(res => {
if (res.data.data.records.length > 0 ){
this.userList = res.data.data.records;
}
}).catch(err => {
console.log(err);
})
}
},
created() {
this.getUserList()
}
}
</script>
<style scoped>
</style>
查詢
給查詢按鈕綁定事件
<el-input placeholder="請輸入用戶名" v-model="query.name" clearable>
<el-button slot="append" icon="el-icon-search" @click="queryBtn"></el-button>
</el-input>
事件內(nèi)容
queryBtn(){
// 再次調(diào)用加載用戶數(shù)據(jù)方法
this.getUserList();
}
分頁
image-20210819114223855.png
- 新增頁面內(nèi)容
<el-pagination
@size-change="handleSizeChange" //每頁數(shù)量大小改變事件
@current-change="handleCurrentChange" // 頁數(shù)改變事件
:current-page="query.current" // 當(dāng)前頁數(shù)
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="query.size" // 每頁顯示條數(shù)
layout="total, sizes, prev, pager, next, jumper"
:total="total"> // 總條數(shù)
</el-pagination>
- javascript修改
- 新增total屬性氏淑，并在加載數(shù)據(jù)時(shí)進(jìn)行賦值
- 新增handleSizeChange读整、handleCurrentChange
此時(shí)需要修改加載用戶數(shù)據(jù)方法,將查詢出的總頁數(shù)進(jìn)行賦值
// 加載用戶數(shù)據(jù)
async getUserList() {
this.$http.get('/sysUser/selectAll', {
params: this.query
}).then(res => {
if (res.data.data.records.length > 0) {
this.userList = res.data.data.records;
this.total = res.data.data.total
}
}).catch(err => {
console.log(err);
})
},
//當(dāng)前每頁數(shù)量改變事件
handleSizeChange(newSize) {
this.query.size = newSize;
this.getUserList();
},
// 當(dāng)前頁數(shù)改變事件
handleCurrentChange(current) {
this.query.current = current;
this.getUserList();
}
修改頁面數(shù)據(jù)
image-20210819114955161.png
新增
image-20210819115824854.png
-
新增彈窗頁面
<!--新增彈窗--> <el-dialog center //居中 title="新增" //標(biāo)題 :visible.sync="addDialogVisible" // 控制是否顯示 width="30%" // 寬度 > <el-form :model="addUserForm" ref="addRuleForm" label-width="90px"> <el-form-item label="用戶名"> <el-input v-model="addUserForm.name"></el-input> </el-form-item> <el-form-item label="昵稱"> <el-input v-model="addUserForm.nickName"></el-input> </el-form-item> <el-form-item label="手機(jī)號(hào)碼"> <el-input v-model="addUserForm.mobile"></el-input> </el-form-item> <el-form-item label="郵箱"> <el-input v-model="addUserForm.email"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="addDialogVisible = false">取 消</el-button> <el-button type="primary">確 定</el-button> </span> </el-dialog> -
新增按鈕新增點(diǎn)擊事件，點(diǎn)擊按鈕彈出
<el-button type="primary" icon="el-icon-plus"@click="addDialogVisible=true">新增</el-button> -
新增屬性
addDialogVisible: false, addUserForm: { name: '', nickName: '', email: '', mobile: '' }
數(shù)據(jù)校驗(yàn)
image-20210819121104955.png
- <el-form> 新增 :rules="addRules" <el-form-item> 新增prop屬性 罐氨。比如用戶名 prop = "name" prop = "nickName" 等等
配置檢驗(yàn)規(guī)則
---------------------以下為自定義校驗(yàn)規(guī)則臀规，return外面----------------------------
// 手機(jī)校驗(yàn)
let validatorPhone = function (rule, value, callback) {
if (value === '') {
callback(new Error('手機(jī)號(hào)不能為空'))
} else if (!/^1\d{10}$/.test(value)) {
callback(new Error('手機(jī)號(hào)格式錯(cuò)誤'))
} else {
callback()
}
};
let validatorEmail = function (rule, value, callback) {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (value === '') {
callback(new Error('郵箱不能為空'))
} else if (!mailReg.test(value)) {
callback(new Error('郵箱格式錯(cuò)誤'))
} else {
callback()
}
};
---------------------------------以下為return里面-----------------------------
addRules: {
name: [
{required: true, message: '請輸入用戶名', trigger: 'blur'},
{min: 3, max: 12, message: '長度在 3 到 12 個(gè)字符', trigger: 'blur'}
],
nickName: [
{required: true, message: '請輸入昵稱', trigger: 'blur'},
{min: 3, max: 12, message: '長度在 3 到 12 個(gè)字符', trigger: 'blur'}
],
mobile: [
{required: true, message: '請輸入手機(jī)號(hào)碼', trigger: 'blur'},
{validator: validatorPhone, trigger: 'blur'}
],
email: [
{required: true, message: '請輸入郵箱', trigger: 'blur'},
{validator: validatorEmail, trigger: 'blur'}
]
}
-
確 定按鈕綁定事件
<el-button type="primary" @click="insertSubmit">確 定</el-button>// 新增提交 insertSubmit(){ // 判斷是否通過校驗(yàn) this.$refs['addRuleForm'].validate((valid) => { if (valid) { const headers = {"content-type": "application/json;charset=UTF-8"}; this.$http.post('/sysUser/insert', JSON.stringify(this.addUserForm),{headers:headers}).then(res => { if (res.data.code == 0 || res.data.data == true) { this.$message({ type: 'success', message: '保存成功!' }); this.addDialogVisible = false; this.getUserList(); } else { this.$message({ type: 'error', message: '保存失敗!' }); } }).catch(err => { console.log(err); }) } else { return false; } }); }
修改
image-20210819130142801.png
修改的校驗(yàn)采用新增一致即可！
<!--修改彈窗-->
<el-dialog
center
title="修改"
:visible.sync="updateDialogVisible"
width="30%"
>
<el-form :model="updateUserForm" ref="updateRuleForm" :rules="addRules" label-width="90px">
<el-form-item label="用戶名" prop="name">
<el-input v-model="updateUserForm.name"></el-input>
</el-form-item>
<el-form-item label="昵稱" prop="nickName">
<el-input v-model="updateUserForm.nickName"></el-input>
</el-form-item>
<el-form-item label="手機(jī)號(hào)碼" prop="mobile">
<el-input v-model="updateUserForm.mobile"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="updateUserForm.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="updateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="insertSubmit">確 定</el-button>
</span>
</el-dialog>
新增屬性
updateDialogVisible:false,
updateUserForm: {
name: '',
nickName: '',
email: '',
mobile: '',
id:''
}
為修改按鈕綁定事件
<el-button type="warning" icon="el-icon-edit" @click="updateBtn">編輯</el-button>
// 修改
updateBtn(){
// 判斷是否勾選了 栅隐，無勾選不予彈窗塔嬉，并給予提示
// userTable 為table 的ref
const _selectData = this.$refs.userTable.selection;
if (_selectData.length === 0) {
this.$message({
message: '請選擇一行數(shù)據(jù)',
type: 'warning'
});
return false;
} else if (_selectData.length > 1) {
this.$message({
message: '只能選中一行數(shù)據(jù)哦',
type: 'warning'
});
return false;
}
// 顯示彈窗
this.updateDialogVisible = true;
// 將選中的數(shù)據(jù)進(jìn)行賦值
this.updateUserForm = _selectData[0];
}
刪除
image-20210819132318016.png
為刪除按鈕綁定點(diǎn)擊事件
<el-button type="danger" icon="el-icon-delete" @click="deleteBatch">刪除</el-button>
deleteBatch() {
const ids = [];
const _selectData = this.$refs.userTable.selection;
if (_selectData.length === 0) {
this.$message({
message: '請至少選擇一行數(shù)據(jù)',
type: 'warning'
});
return false;
}
for (const i in _selectData) {
ids.push(_selectData[i].id)
}
this.$confirm('是否刪除?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const headers = {"content-type": "application/json;charset=UTF-8"};
this.$http.post('/sysUser/delete', JSON.stringify(ids),{headers:headers}).then(res => {
if (res.data.code == 0 || res.data.data == true) {
this.$message({
type: 'success',
message: '刪除成功!'
});
this.addDialogVisible = false;
this.getUserList();
} else {
this.$message({
type: 'error',
message: '刪除失敗!'
});
}
}).catch(err => {
console.log(err);
})
}).catch(() => {
return false;
});
}
問題及解決辦法
-
新增完成后，再次打開新增按鈕租悄，會(huì)出現(xiàn)上次數(shù)據(jù)谨究！
解決辦法：
為彈窗新增一個(gè)關(guān)閉回調(diào)事件
<el-dialog
center
title="新增"
:visible.sync="addDialogVisible"
width="30%"
@close="addFormClose"
>
</el-dialog>
<!--修改彈窗-->
<el-dialog
center
title="修改"
:visible.sync="updateDialogVisible"
width="30%"
@close="updateFormClose"
>
</el-dialog>
// 新增彈窗關(guān)閉回調(diào)事件
addFormClose(){
this.$refs.addRuleForm.resetFields();
},
// 修改彈窗關(guān)閉回調(diào)事件
updateFormClose(){
this.$refs.updateRuleForm.resetFields();
}
