一、添加 UI引入
<template>
<div>
<el-card class="box-card" style="height: 620px">
<el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>
 
 
 
<el-button type="primary" @click="getUserList">查询</el-button>
 
<el-button type="primary" @click="handleCreate">新增</el-button>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="phone"
label="手机号">
</el-table-column>
<el-table-column
prop="avatar"
label="头像">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="this.query.page"
:page-sizes="[5, 10, 20, 30]"
:page-size="this.query.size"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total">
</el-pagination>
</el-card>
<el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center>
<el-form :model="form" :rules="rules" ref="foreName">
<el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
<el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
<el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
<el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
query: {
page: 1,
size: 5,
name: '',
},
total:0,
currentPage4: 4,
dialogFormVisible: false,
formLabelWidth:'80px',
form:{
name:'',
sex:'',
phone:'',
avatar:''
},
rules: {
name: [
{ required: true, message: '请输入用户姓名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
//手机号格式校验规则
{ required: true, message: '请填写手机号', trigger: 'blur' },
{ pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
, message: '手机号格式不正确', trigger: 'blur' }
],
avatar: [
{ required: true, message: '请上传头像', trigger: 'change' }
]
},
tableData: [],
}
},
methods: {
submitForm(){
this.$refs.foreName.validate((valid)=>{
if(valid){
//校验成功,提交给后端,并关闭输入表单
console.log('校验成功',this.form);
this.dialogFormVisible = false;
}
})
},
handleCreate(){
this.dialogFormVisible = true;
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.query.size = val;
this.getUserList()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.query.page = val;
this.getUserList()
},
getUserList(){
this.axios.get("http://localhost:3333/user/getList",{
params:{
name:this.query.name, //参数让其等于输入框输入的name
page:this.query.page,
size:this.query.size
}
}).then((resp)=>{
console.log(resp,'resp');
this.tableData = resp.data.content.list;
this.total = resp.data.content.total;
});
}
},
created() {//Vue生命周期函数,此处的目的是页面打开,就调用函数,将数据库中的数据显示出来
this.getUserList();
}
}
</script>
二、编辑 UI引入
<template>
<div>
<el-card class="box-card" style="height: 620px">
<el-input v-model="query.name" style="width:200px" placeholder="请输入用户姓名" clearable></el-input>
 
 
 
<el-button type="primary" @click="getUserList">查询</el-button>
 
<el-button type="primary" @click="handleCreate">新增</el-button>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="phone"
label="手机号">
</el-table-column>
<el-table-column
prop="avatar"
label="头像">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="this.query.page"
:page-sizes="[5, 10, 20, 30]"
:page-size="this.query.size"
layout="total, sizes, prev, pager, next, jumper"
:total="this.total">
</el-pagination>
</el-card>
<el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="40%" center>
<el-form :model="form" :rules="rules" ref="foreName">
<el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
<el-input style="width: 90%" v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
<el-input style="width: 90%" v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-select style="width: 90%" v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<el-form-item label="头像" :label-width="formLabelWidth" prop="avatar">
<el-input style="width: 90%" v-model="form.avatar" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
query: {
page: 1,
size: 5,
name: '',
},
total:0,
currentPage4: 4,
dialogFormVisible: false,
formLabelWidth:'80px',
form:{
name:'',
sex:'',
phone:'',
avatar:''
},
rules: {
name: [
{ required: true, message: '请输入用户姓名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
//手机号格式校验规则
{ required: true, message: '请填写手机号', trigger: 'blur' },
{ pattern:/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
, message: '手机号格式不正确', trigger: 'blur' }
],
avatar: [
{ required: true, message: '请上传头像', trigger: 'change' }
]
},
tableData: [],
}
},
methods: {
submitForm(){
this.$refs.foreName.validate((valid)=>{
if(valid){
//校验成功,提交给后端,并关闭输入表单,新增和修改都是重新用新数据去覆盖旧数据,都是post请求
console.log('校验成功',this.form);
this.dialogFormVisible = false;
}
})
},
handleCreate(){
this.form = {};
this.dialogFormVisible = true;
},
handleEdit(row) {
console.log(row);
//点击编辑我们发现,row里面是数据,那我们就可以直接把row值赋给form
//这样就可以达到点击编辑,就会显示出数据的效果
this.form = row;
this.dialogFormVisible = true
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.query.size = val;
this.getUserList()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.query.page = val;
this.getUserList()
},
getUserList(){
this.axios.get("http://localhost:3333/user/getList",{
params:{
name:this.query.name, //参数让其等于输入框输入的name
page:this.query.page,
size:this.query.size
}
}).then((resp)=>{
console.log(resp,'resp');
this.tableData = resp.data.content.list;
this.total = resp.data.content.total;
});
}
},
created() {//Vue生命周期函数,此处的目的是页面打开,就调用函数,将数据库中的数据显示出来
this.getUserList();
}
}
</script>
三、submitForm方法
submitForm(){
this.$refs.foreName.validate((valid)=>{
if(valid){
console.log('校验成功',this.form);
//校验成功,提交给后端,并关闭输入表单,新增和修改都是重新用新数据去覆盖旧数据,都是post请求
this.axios.post('http://localhost:3333/user/saveUser',this.form).then((resp)=>{
let data = resp.data;//接受后端返回的数据 commonDto里的
console.log(resp,'resp')
if(data.success){
//如果后端返回数据成功,关闭对话框,表单数据清空
this.dialogFormVisible = false;
this.dialogFormVisible1 = false;
this.form = {};
//重置表单校验状态
this.$refs.foreName.resetFields();
//调用初始化查询方法,因为新增或者修改了,后端会同步数据库,这时候需要重新调用getUserList方法
//这样前端就直接显示出我们新增或者修改的用户数据了
this.getUserList();
//调用UI的message消息提示组件方法,提示操作成功
this.$message({
message: '恭喜你操作成功',
type: 'success'
});
}
})
console.log('校验成功',this.form);
this.dialogFormVisible = false;
}
})
}
四、删除
1.后端代码
@DeleteMapping("/delete/{id}")
public CommonDto deleteUser(@PathVariable Long id){
CommonDto<User> commonDto = new CommonDto<>();
userService.removeById(id);
commonDto.setMessage("删除成功");
return commonDto;
}
2.前端
handleDelete(row) {
console.log(row);
let id = row.id;
this.axios.delete('http://localhost:3333/user/delete/'+ id).then((resp)=>{
let data = resp.data;//接受后端返回的数据 commonDto里的
console.log(resp,'resp')
if(data.success){
this.getUserList();
//调用UI的message消息提示组件方法,提示操作成功
this.$message({
message: data.message,
type: 'success'
});
}
})
},