Spring Boot Vue Element入门实战（十四）前后台整合增删改查

2019-09-24 14:35:53 阅读：212 来源： 互联网

标签：Vue return name Spring 改查 value updateUserForm CommResult addUserForm

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系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入门实战（十五）注册登录路由拦截
 点击这里返回目录

源代码下载

Github：
https://github.com/Iamoldwang/spring-boot-vue.git
Gitee：
https://gitee.com/Iamoldwang/spring-boot-vue.git

标签：Vue,return,name,Spring,改查,value,updateUserForm,CommResult,addUserForm
来源： https://blog.csdn.net/u013254183/article/details/101062182

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Spring Boot Vue Element入门实战（十四）前后台整合增删改查

（一）添加

（二）修改

（三）删除

（四）查询