前言
这差不多应该是这个项目的完结篇啦，加油！！！
完善项目
现在我们已经实现了用户的新增功能，数据库中也有了数据的写入，那么现在我们就要实现从数据库中拿出数据展现在前端了。
怎么拿？同样是在后端服务器中的控制器中写上findPage接口，我们定义的是用户可以通过昵称来查找对应的用户：
//查询用户，用Get命令,且是分页查询
/**
* 分页查询，需要前台传过来三个参数，@RequestParm注解就是解析参数用的，如果不加后面的defaultValue设置
* 默认的话，则请求时必须携带三个参数，不然就会报404错误
* 第一个参数pageNum就是当前页的页码
* 第二个参数pageSize就是每页多少条数据
* 第三个参数search就是查询的关键字
* @param pageNum
* @param pageSize
* @param search
* @return
*/
@GetMapping
public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(defaultValue = "") String search){
//下面这些操作都是Mp提供的，不懂的就需要自己去了解学习了
//分页模糊查询,结果放在Result里面直接返回出去
return Result.success(userMapper.selectPage(new Page<>(pageNum, pageSize),Wrappers.<User>lambdaQuery().like(User::getNickName,search)));
}
测试访问：
查询成功。
现在我们要做的就是把从后端传过来的数据放到前端去经过渲染后呈现出来就行了，所以现在去前端的Home.vue文件进行代码的编写。
可以看见我们前端表单数据的呈现全部放在了一个叫“tableData”的变量里面：
我们只要将我们后端传送过来的值放在这个变量里面就可以完成渲染。
先在methods内部定义一个load方法，即查询方法：
然后让其在页面被加载时就启动，在与methods的同级位置写上created就可以了：
注意前面有个地方需要改动，就是下面这里，原来的total和pageSize得改成对应的变量，然后变量要在下面的组件中进行声明。
改为变量：
声明变量：
这一阶段完整的代码：
<template>
<!--padding设置一点内边距-->
<div style="padding: 10px">
<!--功能区域-->
<div style="margin: 10px 0">
<el-button type="primary" @click="add">新增</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导出</el-button>
</div>
<!--搜索区域-->
<div style="margin: 10px 0">
<el-input v-model="search" placeholder="请输入关键字" style="width: 20%"/>
<el-button type="primary" style="margin-left: 5px">搜索</el-button>
</div>
<!--后面的width可以不写，浏览器会自适应
stripe是斑马纹效果-->
<el-table :data="tableData" border stripe style="width: 100%">
<!--sortable让日期排序-->
<el-table-column prop="id" label="ID" sortable/>
<el-table-column prop="username" label="用户名"/>
<el-table-column prop="nickName" label="昵称" />
<el-table-column prop="age" label="年龄"/>
<el-table-column prop="sex" label="性别"/>
<el-table-column prop="address" label="地址"/>
<el-table-column fixed="right" label="操作">
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
<!--弹出消息确认框-->
<el-popconfirm
confirm-button-text="是的，没错"
cancel-button-text="妈的，我再想想"
icon="el-icon-info"
icon-color="red"
title="确定删除吗？">
<template #reference>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页功能区域-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage4"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
<!--弹窗输入用户信息-->
<el-dialog v-model="dialogVisible" title="提示" width="30%">
<!--定义表单在这个弹出框内以收集新增的用户信息-->
<el-form :model="form" label="用户名">
<el-form-item label="用户名">
<el-input v-model="form.username" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="form.nickName" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.sex" label="男">男</el-radio>
<el-radio v-model="form.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import request from "../utils/request";
export default {
name: 'Home',
components: {
},
data() {
return {
form: {},
dialogVisible: false,
search: '',
//当前页
currentPage4: 1,
pageSize: 10,
total: 0,
tableData: [
],
}
},
//表示在页面被加载的时候，在这个方法里面的方法就全部调用
created() {
this.load()
},
methods: {
//查询方法
load(){
request.get("/api/user",{
pageNum: this.currentPage4,
pageSize: this.pageSize,
search: this.search
}).then(res => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
add(){
this.dialogVisible = true;
//清空表单域
this.form = {};
},
save(){
//这里我们就需要将保存起来的数据传入到后台中，运用Axios
request.post("/api/user",this.form).then(res => {
console.log(res)
})
},
handleEdit(){
},
handleDelete(){
},
handleSizeChange(){
// 改变页码时触发函数
},
handleCurrentChange(){
// 当前页改变时触发代码
}
}
}
</script>
访问可以看到已经查询出来了：
点击查询发现查不出东西，这是因为我们还没有对查询进行单击事件绑定，接下里我们就去做这件事情，给搜索按钮增加单击绑定事件：
让该按钮被单击时自动调用load方法，然后为了让其携带参数，我们还需要在下面的load方法中写上：
访问搜索：
可以看到张三已经被查出来了，这里有一个作用在搜索框中的一键清除内容的小技巧，就是在搜索框内加一句话：
现在点击下图中的叉叉，即可以一键清除：
然后增删改查中还有更新和删除操作，感觉都差不多，我就不详细说了，而且因为中间对前端页面的样式调节过于繁杂，一步一步说太繁琐了，所以直接贴源码了，里面都有写对应的注释，有兴趣的话可以自己钻研一下：
控制层源码：
package com.why.demo.controller;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.why.demo.common.Result;
import com.why.demo.entity.User;
import com.why.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@RestController //返回json格式字符串的注解
@RequestMapping("/user")
public class UserController {
//理论上应该用三层架构，controller调用service，service调用dao的，这里图方便就直接在controller调了
@Resource
UserMapper userMapper;
//新增用户，即访问/user即可
@PostMapping
//@RequestBody就是把前台传过来的json数据转换成Java对象
public Result save(@RequestBody User user){
if(user.getPassword() == null){
user.setPassword("123456");
}
userMapper.insert(user);
return Result.success();
}
//删除用户，根据id删除
@DeleteMapping("/{id}")
//@PathVariable就是把前台通过{id}占位符传过来的数据解析成Long类型的id值
public Result delete(@PathVariable Long id){
userMapper.deleteById(id);
return Result.success();
}
//更新用户，即访问/user即可
@PutMapping
//@RequestBody就是把前台传过来的json数据转换成Java对象
public Result update(@RequestBody User user){
userMapper.updateById(user);
return Result.success();
}
//查询用户，用Get命令,且是分页查询
/**
* 分页查询，需要前台传过来三个参数，@RequestParm注解就是解析参数用的，如果不加后面的defaultValue设置
* 默认的话，则请求时必须携带三个参数，不然就会报404错误
* 第一个参数pageNum就是当前页的页码
* 第二个参数pageSize就是每页多少条数据
* 第三个参数search就是查询的关键字
* @param pageNum
* @param pageSize
* @param search
* @return
*/
@GetMapping
public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(defaultValue = "") String search){
//下面这些操作都是Mp提供的，不懂的就需要自己去了解学习了
//分页模糊查询,结果放在Result里面直接返回出去
return Result.success(userMapper.selectPage(new Page<>(pageNum, pageSize),Wrappers.<User>lambdaQuery().like(User::getNickName,search)));
}
}
Home.vue中的源码：
<template>
<!--padding设置一点内边距-->
<div style="padding: 10px">
<!--功能区域-->
<div style="margin: 10px 0">
<el-button type="primary" @click="add">新增</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导出</el-button>
</div>
<!--搜索区域-->
<div style="margin: 10px 0">
<el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable/>
<el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
</div>
<!--后面的width可以不写，浏览器会自适应
stripe是斑马纹效果-->
<el-table :data="tableData" border stripe style="width: 100%">
<!--sortable让日期排序-->
<el-table-column prop="id" label="ID" sortable/>
<el-table-column prop="username" label="用户名"/>
<el-table-column prop="nickName" label="昵称" />
<el-table-column prop="age" label="年龄"/>
<el-table-column prop="sex" label="性别"/>
<el-table-column prop="address" label="地址"/>
<el-table-column fixed="right" label="操作">
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<!--弹出消息确认框-->
<el-popconfirm
confirm-button-text="是的，没错"
cancel-button-text="妈的，我再想想"
icon="el-icon-info"
icon-color="red"
title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页功能区域-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage4"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
<!--弹窗输入用户信息-->
<el-dialog v-model="dialogVisible" title="提示" width="30%">
<!--定义表单在这个弹出框内以收集新增的用户信息-->
<el-form :model="form" label="用户名">
<el-form-item label="用户名">
<el-input v-model="form.username" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="form.nickName" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="form.sex" label="男">男</el-radio>
<el-radio v-model="form.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="form.address" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import request from "../utils/request";
export default {
name: 'Home',
components: {
},
data() {
return {
form: {},
dialogVisible: false,
search: '',
//当前页
currentPage4: 1,
pageSize: 10,
total: 0,
tableData: [
],
}
},
//表示在页面被加载的时候，在这个方法里面的方法就全部调用
created() {
this.load()
},
methods: {
//查询方法
load(){
request.get("/api/user",{
params: {
pageNum: this.currentPage4,
pageSize: this.pageSize,
search: this.search
}
}).then(res => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
add(){
this.dialogVisible = true;
//清空表单域
this.form = {};
},
save(){
if(this.form.id){ //更新操作
request.put("/api/user",this.form).then(res => {
console.log(res)
if(res.code == '0'){
//element给我们提供了一个可以供显示的结果的东西，如下
this.$messageBox({
type: "success",
message: "更新成功"
})
}else{
//element给我们提供了一个可以供显示的结果的东西，如下
this.$messageBox({
type: "error",
message: res.msg
})
}
})
this.load() //每一次更新后都自动刷新表格
this.dialogVisible = false //关闭弹窗
}else{ //新增操作
request.post("/api/user",this.form).then(res => {
console.log(res)
if (res.code == '0') {
//element给我们提供了一个可以供显示的结果的东西，如下
this.$messageBox({
type: "success",
message: "新增成功"
})
} else {
//element给我们提供了一个可以供显示的结果的东西，如下
this.$messageBox({
type: "error",
message: res.msg
})
}
this.load() //每次新增完都自动刷新表格
this.dialogVisible = false //关闭弹窗
}
)}
},
handleEdit(row){
this.form = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
},
handleDelete(id){
console.log(id)
request.delete("/api/user/"+id).then(res =>{
if (res.code == '0') {
//element给我们提供了一个可以供显示的结果的东西，如下
this.$messageBox({
type: "success",
message: "删除成功"
})
} else {
//element给我们提供了一个可以供显示的结果的东西，如下
this.$messageBox({
type: "error",
message: res.msg
})
}
this.load() //删除之后重新加载表格的数据
})
},
handleSizeChange(pageSize){
// 改变当前每页的数据条数时触发
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum){
// 改变当前页码时触发
this.currentPage4 = pageNum
this.load()
}
}
}
</script>
总结
到这一个简单的后台管理系统的页面就基本全部完成啦，增删改查四个功能全部拥有，好累，不过还是成就感满满！！！还要继续努力，离成为一名合格的开发人员还任重道远呐…干就完事儿了！
扫一扫
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
