版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766
新建学生页面,我们来整合前后台增删改查接口
(一)添加
//点击添加按钮,currentLoginType != 'student是权限拦截
<el-form-item v-if="currentLoginType != 'student'">
<el-button type="primary" @click="handleAdd" icon="el-icon-circle-plus-outline">添加</el-button>
</el-form-item>
//点击添加按钮
let handleAdd = function () {
//清空添加form
this.addUserForm= {}
//弹出添加框
this.formVisibleAdd = true
}
//点击确定提交按钮
<div slot="footer" class="dialog-footer">
<el-button type="info" @click="closeDialogAdd">取 消</el-button>
<el-button
type="success"
@click="handleSubmitAdd"
:loading="formLoading">确 定</el-button>
</div>
//点击添加提交按钮
let handleSubmitAdd = function () {
if (this.formLoading) {
return
}
//验证
this.$refs.addUserForm.validate(valid => {
if (!valid) {
return
}
this.formLoading = true
this.formVisibleAdd = false
//参数
let params = {
birthday: this.addUserForm.birthday,
name: this.addUserForm.name,
code:this.addUserForm.code,
phone:this.addUserForm.phone,
sex:this.addUserForm.sex,
nation:this.addUserForm.nation,
college:this.addUserForm.college,
major:this.addUserForm.major,
nationality:this.addUserForm.nationality,
entranceDate:this.addUserForm.entranceDate,
studentType:this.addUserForm.studentType,
identity:this.addUserForm.identity,
nativePlace:this.addUserForm.nativePlace,
password:this.$md5(this.addUserForm.password)
}
//http请求
this.$api.post(this.GLOBAL.httpRequestUrl + '/student/insert', params, response => {
this.pageLoading = false;
//添加成功后刷新表格
this.initDataTable()
});
//消息提示
this.$message({
message: "添加学生成功",
type: 'success'
});
//日志记录
this.$common.recordLogs("添加学生" + this.addUserForm.name + "的信息")
this.formLoading = false
})
}
/**
* 添加
* @author wangpan
* create date:2019-08-05
*/
@ApiOperation(value="添加", response=CommResult.class)
@PostMapping(value = "insert", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public CommResult insertStudent(HttpServletRequest request, StudentEntity entity){
//md5双加密
entity.setPassword(MD5Util.hash(entity.getPassword()));
boolean flag = studentService.insertStudent(entity);
if(flag){
return CommResult.ok();
}
return CommResult.error("添加失败。");
}
(二)修改
//点击表格中的修改按钮
<el-button
v-if="currentLoginType != 'student'"
size="mini"
class="btn-blue"
@click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
<el-button
//点击修改按钮
let handleUpdate = function (index, row) {
//把row赋值给修改form表单
this.updateUserForm = Object.assign({}, row)
//弹出修改框
this.formVisibleUpdate = true
}
//点击修改提交按钮
<div slot="footer" class="dialog-footer">
<el-button type="info" @click="closeDialogUpdate">取 消</el-button>
<el-button
type="success"
@click="handleSubmitUpdate"
:loading="formLoading">确 定</el-button>
</div>
//点击修改提交按钮
let handleSubmitUpdate = function () {
if (this.formLoading) {
return
}
//表单验证
this.$refs.updateUserForm.validate(valid => {
if (!valid) {
return
}
this.formLoading = true
this.formVisibleUpdate = false
//参数
let params = {
id:this.updateUserForm.id,
birthday: this.updateUserForm.birthday,
name: this.updateUserForm.name,
code:this.updateUserForm.code,
phone:this.updateUserForm.phone,
sex:this.updateUserForm.sex,
nation:this.updateUserForm.nation,
college:this.updateUserForm.college,
major:this.updateUserForm.major,
nationality:this.updateUserForm.nationality,
entranceDate:this.updateUserForm.entranceDate,
studentType:this.updateUserForm.studentType,
identity:this.updateUserForm.identity,
nativePlace:this.updateUserForm.nativePlace
}
//http请求
this.$api.post(this.GLOBAL.httpRequestUrl + '/student/update', params, response => {
this.pageLoading = false;
//修改完后刷新表格
this.initDataTable()
});
//消息提示
this.$message({
message: "修改学生成功",
type: 'success'
});
//日志记录
this.$common.recordLogs("修改学生" + this.updateUserForm.name + "的信息")
this.formLoading = false
})
}
/**
* 修改(由于md5加密,所有不考虑修改密码的情况)
* @author wangpan
* create date:2019-09-05
*/
@ApiOperation(value="修改", response=CommResult.class)
@PostMapping(value = "update", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public CommResult updateStudent(HttpServletRequest request,StudentEntity entity){
boolean flag = studentService.updateStudent(entity);
if(flag){
return CommResult.ok();
}
return CommResult.error("修改失败。");
}
(三)删除
//点击表格后面的删除按钮
<el-button
v-if="currentLoginType != 'student'"
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
//点击删除按钮
let handleDelete = function (index, row) {
if (this.pageLoading)
return
//删除提示
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.pageLoading = true
//参数
let params = {
id:row.id
}
this.$api.post(this.GLOBAL.httpRequestUrl + '/student/delete', params, response => {
this.pageLoading = false;
//删除后刷新表格
this.initDataTable()
});
//消息提示
this.$message({
message: "删除学生成功",
type: 'success'
});
//日志记录
this.$common.recordLogs("删除学生" + row.name + "的信息")
this.pageLoading = false
}).catch(e => {
})
}
/**
* 根据id进行删除
* @author wangpan
* create date:2019-09-05
*/
@ApiOperation(value="根据id进行删除", response=CommResult.class)
@PostMapping(value = "delete", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public CommResult deleteStudent(
@ApiParam(value = "id",required = true)@RequestParam(value = "id")Long id){
if(id == null){
return CommResult.error("id不允许为空。");
}
boolean flag = studentService.deleteStudentById(id);
if(flag){
return CommResult.ok();
}
return CommResult.error("删除失败。");
}
(四)查询
// 可以输入姓名和学号进行查询,点击查询按钮和重置按钮
<el-row>
<el-col>
<el-form :inline="true" ref="filtersForm" :model="filtersForm">
<el-form-item>
<el-input v-model="filtersForm.name" placeholder="姓名" style="width: 200px;" />
</el-form-item>
<el-form-item>
<el-input v-model="filtersForm.code" placeholder="学号" style="width: 200px;" />
</el-form-item>
<el-form-item>
<el-button type="blue" @click="handleQuery" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="success" @click="handleReset" icon="el-icon-refresh">重置</el-button>
</el-form-item>
<el-form-item v-if="currentLoginType != 'student'">
<el-button type="primary" @click="handleAdd" icon="el-icon-circle-plus-outline">添加</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
//点击查询
let handleQuery = function () {
this.page = 1
this.initDataTable()
}
//初始化表格查询
let initDataTable = function () {
if (this.pageLoading){
return;
}
this.pageLoading = true
//分页参数
let params = {
page: this.page,
size: this.size
}
//查询条件
if (this.filtersForm.code != undefined && this.filtersForm.code != null && this.filtersForm.code != '') {
params.code = this.filtersForm.code
}
//查询条件
if (this.filtersForm.name != undefined && this.filtersForm.name != null && this.filtersForm.name != '') {
params.name = this.filtersForm.name
}
//http请求
this.$api.post(this.GLOBAL.httpRequestUrl + '/student/getAllByPage', params, response => {
if (response.status == 200) {
this.total = response.data.iTotalRecords;
this.tableData = response.data.data;
}
this.pageLoading = false;
});
}
/**
* 分页查询所有数据
* @author wangpan
* create date:2019-09-05
*/
@ApiOperation(value="分页查询所有数据", response=CommResult.class)
@ApiResponses({
@ApiResponse(code=200,message="成功,返回content中vo类参数如下", response=StudentVO.class)
})
@PostMapping(value = "getAllByPage", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public HttpResult<StudentVO> getAllByPageStudent(HttpServletRequest request,
@ApiParam(value = "起始页",required = true)@RequestParam(value = "page",defaultValue="1")Integer page,
@ApiParam(value = "每页条数",required = true)@RequestParam(value = "size",defaultValue="10")Integer size,StudentEntity entity){
HttpResult<StudentVO> result = new HttpResult<StudentVO>();
PageInfo<StudentVO> pages = studentService.getPageStudentListByCondition(page,size,entity);
result.setData(pages.getList());
result.setiTotalRecords(pages.getTotal());
return result;
}
上一篇:Spring Boot Vue Element入门实战(十三)Spring Boot+Mybatis+Redis+Swagger
下一篇:Spring Boot Vue Element入门实战(十五)注册登录路由跨域拦截
点击这里返回目录
程序人生,更多分享请关注公众号
源代码下载
关注上面公众号,回复源码即可获取gitbug/gitee下载地址