第3章 预约管理-检查组管理
1. 需求分析
检查组其实就是多个检查项的集合，例如有一个检查组为“一般检查”，这个检查组可以包括多个检查项：身高、体重、收缩压、舒张压等。所以在添加检查组时需要选择这个检查组包括的检查项。
检查组对应的实体类为CheckGroup，对应的数据表为t_checkgroup。检查组和检查项为多对多关系，所以需要中间表t_checkgroup_checkitem进行关联。
2. 新增检查组
原始页面
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<style>
.datatable {
position: relative;
box-sizing: border-box;
-webkit-box-flex: 1;
width: 100%;
max-width: 100%;
font-size: 14px;
color: rgb(96, 98, 102);
overflow: hidden;
flex: 1 1 0%;
}
.datatable td, .datatable th {
padding: 12px 0;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>预约管理<small>检查组管理</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>预约管理</el-breadcrumb-item>
<el-breadcrumb-item>检查组管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-input placeholder="编码/名称/助记码" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
<el-button @click="findPage()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="code" label="检查组编码" align="center"></el-table-column>
<el-table-column prop="name" label="检查组名称" align="center"></el-table-column>
<el-table-column label="适用性别" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
</template>
</el-table-column>
<el-table-column prop="helpCode" label="助记码" align="center"></el-table-column>
<el-table-column prop="remark" label="说明" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增检查组" :visible.sync="dialogFormVisible">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.code"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="适用性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="助记码">
<el-input v-model="formData.helpCode"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="注意事项">
<el-input v-model="formData.attention" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="检查项信息" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>项目编码</th>
<th>项目名称</th>
<th>项目说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.code}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.remark}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查组" :visible.sync="dialogFormVisible4Edit">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.code"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="适用性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="助记码">
<el-input v-model="formData.helpCode"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="注意事项">
<el-input v-model="formData.attention" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="检查项信息" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>项目编码</th>
<th>项目名称</th>
<th>项目说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.code}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.remark}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data:{
activeName:'first',//添加/编辑窗口Tab标签名称
pagination: {//分页相关属性
currentPage: 1,
pageSize:10,
total:100,
queryString:null,
},
dataList: [],//列表数据
formData: {},//表单数据
tableData:[],//新增和编辑表单中对应的检查项列表数据
checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
dialogFormVisible: false,//控制添加窗口显示/隐藏
dialogFormVisible4Edit:false//控制编辑窗口显示/隐藏
},
created() {
this.findPage();
},
methods: {
//编辑
handleEdit() {
},
//添加
handleAdd () {
},
//分页查询
findPage() {
},
// 重置表单
resetForm() {
},
// 弹出添加窗口
handleCreate() {
},
// 弹出编辑窗口
handleUpdate(row) {
},
//切换页码
handleCurrentChange(currentPage) {
},
// 删除
handleDelete(row) {
}
}
})
</script>
</html>
2.1 完善页面
检查组管理页面对应的是checkgroup.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。
2.1.1 弹出新增窗口
页面中已经提供了新增窗口，只是出于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true即可显示出新增窗口。点击新建按钮时绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。
由于新增检查组时还需要选择此检查组包含的检查项，所以新增检查组窗口分为两部分信息：基本信息和检查项信息，如下图：
新建按钮绑定单击事件，对应的处理函数为handleCreate
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
// 重置表单
resetForm() {
this.formData = {};
},
// 弹出添加窗口
handleCreate() {
this.resetForm();
this.dialogFormVisible = true;
}
2.1.2 动态展示检查项列表
现在虽然已经完成了新增窗口的弹出，但是在检查项信息标签页中需要动态展示所有的检查项信息列表数据，并且可以进行勾选。具体操作步骤如下：
（1）定义模型数据
tableData:[],//新增和编辑表单中对应的检查项列表数据
checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
（2）动态展示检查项列表数据，数据来源于上面定义的tableData模型数据
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>项目编码</th>
<th>项目名称</th>
<th>项目说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.code}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.remark}}</label></td>
</tr>
</tbody>
</table>
（3）完善handleCreate方法，发送ajax请求查询所有检查项数据并将结果赋值给tableData模型数据用于页面表格展示
// 弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
//默认切换到第一个标签页（基本信息）
this.activeName='first';
//重置
this.checkitemIds = [];
//发送ajax请求查询所有检查项信息
axios.get("/checkitem/findAll.do").then((res)=> {
if(res.data.flag){
//将检查项列表数据赋值给模型数据用于页面表格展示
this.tableData = res.data.data;
}else{
this.$message.error(res.data.message);
}
});
}
（4）分别在CheckItemController、CheckItemService、CheckItemServiceImpl、CheckItemDao、CheckItemDao.xml中扩展方法查询所有检查项数据
CheckItemController：
//查询所有
@RequestMapping("/findAll")
public Result findAll(){
List<CheckItem> checkItemList = checkItemService.findAll();
if(checkItemList != null && checkItemList.size() > 0){
Result result = new Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS);
result.setData(checkItemList);
return result;
}
return new Result(false,MessageConstant.QUERY_CHECKITEM_FAIL);
}
CheckItemService：
public List<CheckItem> findAll();
CheckItemServiceImpl：
public List<CheckItem> findAll() {
return checkItemDao.findAll();
}
CheckItemDao：
public List<CheckItem> findAll();
CheckItemDao.xml：
<select id="findAll" resultType="com.itheima.pojo.CheckItem">
select * from t_checkitem
</select>
2.1.3 提交请求
当用户点击新增窗口中的确定按钮时发送ajax请求将数据提交到后台进行数据库操作。提交到后台的数据分为两部分：检查组基本信息（对应的模型数据为formData）和检查项id数组（对应的模型数据为checkitemIds）。
为确定按钮绑定单击事件，对应的处理函数为handleAdd
<el-button type="primary" @click="handleAdd()">确定</el-button>
完善handleAdd方法
//添加
handleAdd () {
//发送ajax请求将模型数据提交到后台处理
axios.post(
"/checkgroup/add.do?checkitemIds=" + this.checkitemIds,
this.formData
)
.then((response)=> {
//关闭新增窗口
this.dialogFormVisible = false;
if(response.data.flag){
//新增成功，弹出成功提示
this.$message({
message: response.data.message,
type: 'success'
});
}else{
//新增失败，弹出错误提示
this.$message.error(response.data.message);
}
}).finally(()=> {
this.findPage();
});
}
2.2 后台代码
2.2.1 Controller
在health_web工程中创建CheckGroupController
package com.itheima.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.constant.MessageConstant;
import com.itheima.entity.PageResult;
import com.itheima.entity.QueryPageBean;
import com.itheima.entity.Result;
import com.itheima.pojo.CheckGroup;
import com.itheima.pojo.CheckItem;
import com.itheima.service.CheckGroupService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* 检查组管理
*/
@RestController
@RequestMapping("/checkgroup")
public class CheckGroupController {
@Reference
private CheckGroupService checkGroupService;
//新增
@RequestMapping("/add")
public Result add(@RequestBody CheckGroup checkGroup,Integer[] checkitemIds){
try {
checkGroupService.add(checkGroup,checkitemIds);
}catch (Exception e){
//新增失败
return new Result(false, MessageConstant.ADD_CHECKGROUP_FAIL);
}
//新增成功
return new Result(true,MessageConstant.ADD_CHECKGROUP_SUCCESS);
}
}
2.2.2 服务接口
在health_interface工程中创建CheckGroupService接口
package com.itheima.service;
import com.itheima.entity.PageResult;
import com.itheima.pojo.CheckGroup;
import java.util.List;
/**
* 检查组服务接口
*/
public interface CheckGroupService {
void add(CheckGroup checkGroup,Integer[] checkitemIds);
}
2.2.3 服务实现类
在health_service工程中创建CheckGroupServiceImpl实现类
package com.itheima.service;
import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.itheima.dao.CheckGroupDao;
import com.itheima.entity.PageResult;
import com.itheima.pojo.CheckGroup;
import com.itheima.pojo.CheckItem;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 检查组服务
*/
@Service(interfaceClass = CheckGroupService.class)
@Transactional
public class CheckGroupServiceImpl implements CheckGroupService {
@Autowired
private CheckGroupDao checkGroupDao;
//添加检查组合，同时需要设置检查组合和检查项的关联关系
public void add(CheckGroup checkGroup, Integer[] checkitemIds) {
checkGroupDao.add(checkGroup);
setCheckGroupAndCheckItem(checkGroup.getId(),checkitemIds);
}
//设置检查组合和检查项的关联关系
public void setCheckGroupAndCheckItem(Integer checkGroupId,Integer[] checkitemIds){
if(checkitemIds != null && checkitemIds.length > 0){
for (Integer checkitemId : checkitemIds) {
Map<String,Integer> map = new HashMap<>();
map.put("checkgroup_id",checkGroupId);
map.put("checkitem_id",checkitemId);
checkGroupDao.setCheckGroupAndCheckItem(map);
}
}
}
}
面试:上面这段代码性能上有没有什么问题，如何改进？
问题：for循环里面不断的连接数据库，影响系统性能。
2.2.4 Dao接口
在health_dao工程中创建CheckGroupDao接口
package com.itheima.dao;
import com.github.pagehelper.Page;
import com.itheima.pojo.CheckGroup;
import java.util.List;
import java.util.Map;
/**
* 持久层Dao接口
*/
public interface CheckGroupDao {
void add(CheckGroup checkGroup);
void setCheckGroupAndCheckItem(Map map);
}
2.2.5 Mapper映射文件
在health_dao工程中创建CheckGroupDao.xml映射文件，需要和CheckGroupDao接口在同一目录下
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.itheima.dao.CheckGroupDao">
<!--新增-->
<insert id="add" parameterType="com.itheima.pojo.CheckGroup">
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
SELECT LAST_INSERT_ID()
</selectKey>
insert into t_checkgroup(code,name,sex,helpCode,remark,attention)
values
(#{code},#{name},#{sex},#{helpCode},#{remark},#{attention})
</insert>
<!--设置检查组和检查项的关联关系-->
<insert id="setCheckGroupAndCheckItem" parameterType="hashmap">
insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
values
(#{checkgroup_id},#{checkitem_id})
</insert>
</mapper>
老崔有话说：
企业级项目里面，mybtis插入后返回主键的常用且推荐写法如下：
insert into TStudent(name, age) values(#{name}, #{age})
3. 检查组分页
3.1 完善页面
3.1.1 定义分页相关模型数据
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
3.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在checkgroup.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法
//钩子函数，VUE对象初始化完成后自动执行
created() {
this.findPage();
}
//分页查询
findPage() {
//分页参数
var param = {
currentPage:this.pagination.currentPage,//页码
pageSize:this.pagination.pageSize,//每页显示的记录数
queryString:this.pagination.queryString//查询条件
};
//请求后台
axios.post("/checkgroup/findPage.do",param).then((response)=> {
//为模型数据赋值，基于VUE的双向绑定展示到页面
this.dataList = response.data.rows;
this.pagination.total = response.data.total;
});
}
3.1.3 完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件，调用findPage方法
<el-button @click="findPage()" class="dalfBut">查询</el-button>
为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
定义handleCurrentChange方法
//切换页码
handleCurrentChange(currentPage) {
//currentPage为切换后的页码
this.pagination.currentPage = currentPage;
this.findPage();
}
3.2 后台代码
3.2.1 Controller
在CheckGroupController中增加分页查询方法
//分页查询
@RequestMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
PageResult pageResult = checkGroupService.pageQuery(
queryPageBean.getCurrentPage(),
queryPageBean.getPageSize(),
queryPageBean.getQueryString()
);
return pageResult;
}
3.2.2 服务接口
在CheckGroupService服务接口中扩展分页查询方法
public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString);
3.2.3 服务实现类
在CheckGroupServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页
public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {
PageHelper.startPage(currentPage,pageSize);
Page<CheckItem> page = checkGroupDao.selectByCondition(queryString);
return new PageResult(page.getTotal(),page.getResult());
}
3.2.4 Dao接口
在CheckGroupDao接口中扩展分页查询方法
public Page<CheckGroup> selectByCondition(String queryString);
3.2.5 Mapper映射文件
在CheckGroupDao.xml文件中增加SQL定义
<select id="selectByCondition" parameterType="string" resultType="com.itheima.pojo.CheckGroup">
select * from t_checkgroup
<if test="value != null and value.length > 0">
where code = #{value} or name = #{value} or helpCode = #{value}
</if>
</select>
可以边输入，边查询，dao用模糊查询，这样输出会好些
4. 编辑检查组
4.1 完善页面
用户点击编辑按钮时，需要弹出编辑窗口并且将当前记录的数据进行回显，用户修改完成后点击确定按钮将修改后的数据提交到后台进行数据库操作。此处进行数据回显的时候，除了需要检查组基本信息的回显之外，还需要回显当前检查组包含的检查项（以复选框勾选的形式回显）。
4.1.1 绑定单击事件
需要为编辑按钮绑定单击事件，并且将当前行数据作为参数传递给处理函数
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
handleUpdate(row) {
alert(row);
}
4.1.2 弹出编辑窗口回显数据
当前页面的编辑窗口已经提供好了，默认处于隐藏状态。在handleUpdate方法中需要将编辑窗口展示出来，并且需要发送多个ajax请求分别查询当前检查组数据、所有检查项数据、当前检查组包含的检查项id用于基本数据回显
handleUpdate(row) {
//发送ajax请求根据id查询检查组信息，用于基本信息回显
axios.get("/checkgroup/findById.do?id=" + row.id).then((res)=>{
if(res.data.flag){
//弹出编辑窗口
this.dialogFormVisible4Edit = true;
//默认选中第一个标签页
this.activeName='first';
//为模型数据赋值，通过VUE数据双向绑定进行信息的回显
this.formData = res.data.data;
//发送ajax请求查询所有的检查项信息，用于检查项表格展示
axios.get("/checkitem/findAll.do").then((res)=> {
if(res.data.flag){
//为模型数据赋值，通过VUE数据双向绑定进行信息的回显
this.tableData = res.data.data;
//查询当前检查组包含的所有检查项id，用于页面回显
axios.get("/checkgroup/findCheckItemIdsByCheckGroupId.do?id=" + row.id).then((res)=> {
//为模型数据赋值，通过VUE数据双向绑定进行信息的回显
this.checkitemIds = res.data;
});
}else{
this.$message.error(res.data.message);
}
});
}else{
this.$message.error("获取数据失败，请刷新当前页面");
}
});
}
4.1.3 发送请求
在编辑窗口中修改完成后，点击确定按钮需要提交请求，所以需要为确定按钮绑定事件并提供处理函数handleEdit
<el-button type="primary" @click="handleEdit()">确定</el-button>
//编辑
handleEdit() {
//发送ajax请求，提交模型数据
axios.post("/checkgroup/edit.do?checkitemIds="+this.checkitemIds,this.formData).
then((response)=> {
//隐藏编辑窗口
this.dialogFormVisible4Edit = false;
if(response.data.flag){
this.$message({
message: response.data.message,
type: 'success'
});
}else{
this.$message.error(response.data.message);
}
}).finally(()=> {
this.findPage();
});
}
4.2 后台代码
4.2.1 Controller
在CheckGroupController中增加方法
//根据id查询
@RequestMapping("/findById")
public Result findById(Integer id){
CheckGroup checkGroup = checkGroupService.findById(id);
if(checkGroup != null){
Result result = new Result(true, MessageConstant.QUERY_CHECKGROUP_SUCCESS);
result.setData(checkGroup);
return result;
}
return new Result(false,MessageConstant.QUERY_CHECKGROUP_FAIL);
}
//根据检查组合id查询对应的所有检查项id
@RequestMapping("/findCheckItemIdsByCheckGroupId")
public List<Integer> findCheckItemIdsByCheckGroupId(Integer id){
List<Integer> list = checkGroupService.findCheckItemIdsByCheckGroupId(id);
return list;
}
//编辑
@RequestMapping("/edit")
public Result edit(@RequestBody CheckGroup checkGroup,Integer[] checkitemIds){
try {
checkGroupService.edit(checkGroup,checkitemIds);
}catch (Exception e){
return new Result(false,MessageConstant.EDIT_CHECKGROUP_FAIL);
}
return new Result(true,MessageConstant.EDIT_CHECKGROUP_SUCCESS);
}
4.2.2 服务接口
在CheckGroupService服务接口中扩展方法
CheckGroup findById(Integer id);
List<Integer> findCheckItemIdsByCheckGroupId(Integer id);
public void edit(CheckGroup checkGroup,Integer[] checkitemIds);
4.2.3 服务实现类
在CheckGroupServiceImpl实现类中实现编辑方法
public CheckGroup findById(Integer id) {
return checkGroupDao.findById(id);
}
public List<Integer> findCheckItemIdsByCheckGroupId(Integer id) {
return checkGroupDao.findCheckItemIdsByCheckGroupId(id);
}
//编辑检查组，同时需要更新和检查项的关联关系
public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
//根据检查组id删除中间表数据（清理原有关联关系）
checkGroupDao.deleteAssociation(checkGroup.getId());
//向中间表(t_checkgroup_checkitem)插入数据（建立检查组和检查项关联关系）
setCheckGroupAndCheckItem(checkGroup.getId(),checkitemIds);
//更新检查组基本信息
checkGroupDao.edit(checkGroup);
}
//向中间表(t_checkgroup_checkitem)插入数据（建立检查组和检查项关联关系）
public void setCheckGroupAndCheckItem(Integer checkGroupId,Integer[] checkitemIds){
if(checkitemIds != null && checkitemIds.length > 0){
for (Integer checkitemId : checkitemIds) {
Map<String,Integer> map = new HashMap<>();
map.put("checkgroup_id",checkGroupId);
map.put("checkitem_id",checkitemId);
checkGroupDao.setCheckGroupAndCheckItem(map);
}
}
}
4.2.4 Dao接口
在CheckGroupDao接口中扩展方法
CheckGroup findById(Integer id);
List<Integer> findCheckItemIdsByCheckGroupId(Integer id);
void setCheckGroupAndCheckItem(Map map);
void deleteAssociation(Integer id);
void edit(CheckGroup checkGroup);
4.2.5 Mapper映射文件
在CheckGroupDao.xml中扩展SQL语句
<select id="findById" parameterType="int" resultType="com.itheima.pojo.CheckGroup">
select * from t_checkgroup where id = #{id}
</select>
<select id="findCheckItemIdsByCheckGroupId" parameterType="int" resultType="int">
select checkitem_id from t_checkgroup_checkitem where checkgroup_id = #{id}
</select>
<!--向中间表插入数据（建立检查组和检查项关联关系）-->
<insert id="setCheckGroupAndCheckItem" parameterType="hashmap">
insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
values
(#{checkgroup_id},#{checkitem_id})
</insert>
<!--根据检查组id删除中间表数据（清理原有关联关系）-->
<delete id="deleteAssociation" parameterType="int">
delete from t_checkgroup_checkitem where checkgroup_id = #{id}
</delete>
<!--编辑-->
<update id="edit" parameterType="com.itheima.pojo.CheckGroup">
update t_checkgroup
<set>
<if test="name != null">
name = #{name},
</if>
<if test="sex != null">
sex = #{sex},
</if>
<if test="code != null">
code = #{code},
</if>
<if test="helpCode != null">
helpCode = #{helpCode},
</if>
<if test="attention != null">
attention = #{attention},
</if>
<if test="remark != null">
remark = #{remark},
</if>
</set>
where id = #{id}
</update>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mt2tONV7-1598196748551)(%E4%BC%A0%E6%99%BA%E5%81%A5%E5%BA%B7%E9%A1%B9%E7%9B%AE%E8%AE%B2%E4%B9%89%EF%BC%88%E7%AC%AC3%E7%AB%A0%EF%BC%89.assets/1598167236804.png)]](https://i-blog.csdnimg.cn/blog_migrate/41e6b1e5e2eb36344396f815e1000483.png#pic_center)
可以尝试多表联查，来让前端发起异步请求少一些
4.3完成后的页面
html
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<style>
.datatable {
position: relative;
box-sizing: border-box;
-webkit-box-flex: 1;
width: 100%;
max-width: 100%;
font-size: 14px;
color: rgb(96, 98, 102);
overflow: hidden;
flex: 1 1 0%;
}
.datatable td, .datatable th {
padding: 12px 0;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>预约管理<small>检查组管理</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>预约管理</el-breadcrumb-item>
<el-breadcrumb-item>检查组管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-input placeholder="编码/名称/助记码" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" ></el-input>
<el-button @click="findPage()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="code" label="检查组编码" align="center"></el-table-column>
<el-table-column prop="name" label="检查组名称" align="center"></el-table-column>
<el-table-column label="适用性别" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
</template>
</el-table-column>
<el-table-column prop="helpCode" label="助记码" align="center"></el-table-column>
<el-table-column prop="remark" label="说明" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增检查组" :visible.sync="dialogFormVisible">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.code"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="适用性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="助记码">
<el-input v-model="formData.helpCode"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="注意事项">
<el-input v-model="formData.attention" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="检查项信息" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>项目编码</th>
<th>项目名称</th>
<th>项目说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.code}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.remark}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查组" :visible.sync="dialogFormVisible4Edit">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.code"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="适用性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="助记码">
<el-input v-model="formData.helpCode"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="注意事项">
<el-input v-model="formData.attention" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="检查项信息" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>项目编码</th>
<th>项目名称</th>
<th>项目说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.code}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.remark}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data:{
activeName:'first',//添加/编辑窗口Tab标签名称
pagination: {//分页相关属性
currentPage: 1,
pageSize:10,
total:100,
queryString:null,
},
dataList: [],//列表数据
formData: {},//表单数据
tableData:[],//新增和编辑表单中对应的检查项列表数据
checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
dialogFormVisible: false,//控制添加窗口显示/隐藏
dialogFormVisible4Edit:false//控制编辑窗口显示/隐藏
},
created() {
this.findPage();
//默认选中第一个复选框，检查项信息置空
this.activeName='first';
this.checkIds=[];
//发送请求，查询所有的检查项信息，转为json，赋值给tabledata
axios.get("/checkitem/findAll.do").then((resp)=>{
if (resp.data.flag){
//查询成功
this.tableData=resp.data.data
}else {
//查询失败
this.$message.error(res.data.message);
}
})
},
methods: {
//编辑
handleEdit() {
axios.post("/checkgroup/edit.do?checkitemIds="+this.checkitemIds,this.formData).then((resp)=>{
this.dialogFormVisible4Edit=false;
if (resp.data.flag){
this.$message().success(resp.data.message)
}else {
this.$message().error(resp.data.message)
}
}).finally(()=>{
this.findPage();
})
},
//添加
handleAdd () {
axios.post("/checkgroup/add.do?checkitemIds="+this.checkitemIds,this.formData).then(resp=>{
this.dialogFormVisible=false;
if (resp.data.flag){
//操作成功
this.$message({
message:resp.data.message,
type:'success'
})
}else {
this.$message.error(resp.data.message)
}
}).finally(()=>{
//重新进行分页查询
this.findPage();
})
},
//分页查询
findPage() {
if (this.pagination.queryString!=null&&this.pagination.queryString!==""){
let param={
currentPage: 1,//页码
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
};
axios.post("/checkgroup/findPage.do",param).then((response)=>{
this.dataList=response.data.rows;
this.pagination.total=response.data.total;
});
}else {
let param = {
currentPage: this.pagination.currentPage,//页码
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
};
axios.post("/checkgroup/findPage.do",param).then((response)=>{
this.dataList=response.data.rows;
this.pagination.total=response.data.total;
});
}
},
// 重置表单
resetForm() {
this.formData={};
},
// 弹出添加窗口
handleCreate() {
this.resetForm();
this.dialogFormVisible=true;
},
// 弹出编辑窗口
handleUpdate(row) {
this.dialogFormVisible4Edit = true;
this.activeNames = 'first';
axios.get("/checkgroup/findById.do?id="+row.id).then((resp)=>{
if (resp.data.flag){
this.formData=resp.data.data;
//发送ajax请求，查询所有的检查项数据，用于展示检查项列表
axios.get("/checkitem/findAll.do").then((resp) => {
if (resp.data.flag) {
this.tableData = resp.data.data;
//查询成功后，需要根据查组的ID查询中间表，用于页面复选框中
axios.get("/checkgroup/findCheckItemIdsByCheckGroupId.do?id=" + row.id).then((resp) => {
this.checkitemIds = resp.data.data;
})
}
})
}else {
this.$message.error(resp.data.message)
}
})
},
//切换页码
handleCurrentChange(currentPage) {
this.pagination.currentPage=currentPage;
this.findPage();
},
// 删除
handleDelete(row) {
this.$confirm("你确定要删除当前数据吗？","提示",{
type:'warning'
}).then(()=>{
axios.get("/checkgroup/deleteById.do?id="+row.id).then((resp)=>{
if (resp.data.flag){
this.$message({
type:'success',
message:res.data.message
});
}else {
this.$message.error(resp.data.message);
}
})
}).catch(()=>{
this.$message({
type:'info',
message:"操作取消"
})
}).finally(()=>{
this.findPage();
})
}
}
})
</script>
</html>
dao
package com.ybb.dao;
import com.github.pagehelper.Page;
import com.ybb.pojo.CheckGroup;
import java.util.List;
import java.util.Map;
/**
* Created by Administrator
* Date :2020/8/23
* Description :
* Version :1.0
*/
public interface CheckGroupDao {
public void add(CheckGroup checkGroup);
void setCheckgroupIdAndCheckitemId(Map map);
public Page<CheckGroup>findByCondition(String queryString);
public CheckGroup findById(Integer id);
List<Integer> findCheckItemIdsByCheckGroupId(Integer id);
public void edit(CheckGroup checkGroup);
void setRelationShip(Integer id);
void deleteById(Integer id);
}
dao.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.ybb.dao.CheckGroupDao">
<!--新增,获取（自增）产生的最后一个id,封装到id属性中-->
<insert id="add" parameterType="com.ybb.pojo.CheckGroup">
<selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
select LAST_INSERT_ID()
</selectKey>
insert into t_checkgroup(code,name,sex,helpCode,remark,attention)
values
(#{code},#{name},#{sex},#{helpCode},#{remark},#{attention})
</insert>
<!--需要改成foreach添加-->
<insert id="setCheckgroupIdAndCheckitemId" parameterType="map">
insert into t_checkgroup_checkitem(checkgroup_id,checkitem_id)
values
<foreach collection="checkitemId" separator="," item="itemId">
(#{checkgroupId},#{itemId})
</foreach>
</insert>
<select id="findByCondition" parameterType="string" resultType="com.ybb.pojo.CheckGroup">
select * from t_checkgroup
<if test="value !=null and value !='' and value.length >0">
where code=#{value} or name=#{value} or helpCode=#{value}
</if>
</select>
<!--<resultMap id="" type="" >
<id property="id" column="id"/>
<collection property="checitemIds" column="id" select="com.ybb.pojo.CheckGroup"/>
</resultMap>-->
<select id="findById" resultType="com.ybb.pojo.CheckGroup">
select * from t_checkgroup where id=#{id}
</select>
<select id="findCheckItemIdsByCheckGroupId" parameterType="int" resultType="int">
select checkitem_id from t_checkgroup_checkitem where checkgroup_id =#{id}
</select>
<!--根据id来动态修改检查组相关字段-->
<update id="edit" parameterType="com.ybb.pojo.CheckGroup">
update t_checkgroup
<set>
<if test="name != null">
name = #{name},
</if>
<if test="sex != null">
sex = #{sex},
</if>
<if test="code != null">
code = #{code},
</if>
<if test="helpCode != null">
helpCode = #{helpCode},
</if>
<if test="attention != null">
attention = #{attention},
</if>
<if test="remark != null">
remark = #{remark},
</if>
</set>
where id = #{id}
</update>
<delete id="setRelationShip" parameterType="int">
delete from t_checkgroup_checkitem where checkgroup_id=#{id}
</delete>
<delete id="deleteById" parameterType="int">
delete from t_checkgroup where id=#{id}
</delete>
</mapper>
service
package com.ybb.service;
import com.ybb.entity.PageResult;
import com.ybb.entity.QueryPageBean;
import com.ybb.entity.Result;
import com.ybb.pojo.CheckGroup;
import org.omg.CORBA.PUBLIC_MEMBER;
import java.util.List;
/**
* Created by Administrator
* Date :2020/8/23
* Description :
* Version :1.0
*/
public interface CheckGroupService {
public void add(CheckGroup checkGroup, Integer[]checkitemIds);
public PageResult pageQuery(QueryPageBean queryPageBean);
public CheckGroup findById(Integer id);
List<Integer> findCheckItemIdsByCheckGroupId(Integer id);
void edit(CheckGroup checkGroup, Integer[] checkitemIds);
void deleteById(Integer id);
List<CheckGroup>findAll();
}
serviceImpl
package com.ybb.service.Impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.ybb.dao.CheckGroupDao;
import com.ybb.entity.PageResult;
import com.ybb.entity.QueryPageBean;
import com.ybb.pojo.CheckGroup;
import com.ybb.service.CheckGroupService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* Created by Administrator
* Date :2020/8/23
* Description :
* Version :1.0
*/
@Service(interfaceClass = CheckGroupService.class)
@Transactional
public class CheckGroupServiceImpl implements CheckGroupService {
@Autowired
private CheckGroupDao checkGroupDao;
@Override
public void add(CheckGroup checkGroup, Integer[] checkitemIds) {
//新增检查组，操作t_checkgroup表
checkGroupDao.add(checkGroup);
//设置检查组和检查项的多对多的关联关系，操作t_checkgroup_checkitem表
Integer id = checkGroup.getId();
if (checkitemIds != null && checkitemIds.length > 0) {
Map<String, Object> map = new HashMap<>();
map.put("checkgroupId", id);
map.put("checkitemId", checkitemIds);
checkGroupDao.setCheckgroupIdAndCheckitemId(map);
}
}
@Override
public PageResult pageQuery(QueryPageBean queryPageBean) {
Integer currentPage = queryPageBean.getCurrentPage();//第几页
Integer pageSize = queryPageBean.getPageSize();
String queryString = queryPageBean.getQueryString();
PageHelper.startPage(currentPage, pageSize);//自动在dao中加入limit
Page<CheckGroup> page = checkGroupDao.findByCondition(queryString);
return new PageResult(page.getTotal(), page.getResult());
}
@Override
public CheckGroup findById(Integer id) {
if (id < 0) {
return null;
} else {
return checkGroupDao.findById(id);
}
}
@Override
public List<Integer> findCheckItemIdsByCheckGroupId(Integer id) {
return checkGroupDao.findCheckItemIdsByCheckGroupId(id);
}
@Override
public void edit(CheckGroup checkGroup, Integer[] checkitemIds) {
//操作检查组基本信息，操作检查组t_checkgroup表
checkGroupDao.edit(checkGroup);
//中间表关系清除
checkGroupDao.setRelationShip(checkGroup.getId());
//重新建立关系
Integer id = checkGroup.getId();
if (checkitemIds != null && checkitemIds.length > 0) {
Map<String, Object> map = new HashMap<>();
map.put("checkgroupId", id);
map.put("checkitemId", checkitemIds);
checkGroupDao.setCheckgroupIdAndCheckitemId(map);
}
}
@Override
public void deleteById(Integer id) {
//先清理关系，再删除
checkGroupDao.setRelationShip(id);
checkGroupDao.deleteById(id);
}
@Override
public List<CheckGroup>findAll() {
return checkGroupDao.findAll();
}
}
controller
package com.ybb.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.ybb.constant.MessageConstant;
import com.ybb.entity.PageResult;
import com.ybb.entity.QueryPageBean;
import com.ybb.entity.Result;
import com.ybb.pojo.CheckGroup;
import com.ybb.service.CheckGroupService;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* Created by Administrator
* Date :2020/8/23
* Description :
* Version :1.0
*/
@RestController
@RequestMapping("/checkgroup")
public class CheckGroupController {
@Reference
private CheckGroupService checkGroupService;
@RequestMapping("add")
public Result add(@RequestBody CheckGroup checkGroup,Integer[]checkitemIds){
try {
checkGroupService.add(checkGroup,checkitemIds);
}catch (Exception e){
e.printStackTrace();
return new Result(false, MessageConstant.ADD_CHECKGROUP_FAIL);
}
return new Result(true, MessageConstant.ADD_CHECKGROUP_SUCCESS);
}
@RequestMapping("findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean) {
return checkGroupService.pageQuery(queryPageBean);
}
@RequestMapping("findById")
public Result findById(Integer id) {
try {
CheckGroup checkGroup= checkGroupService.findById(id);
return new Result(true,MessageConstant.QUERY_CHECKGROUP_SUCCESS,checkGroup);
}catch (Exception e){
e.printStackTrace();
return new Result(false,MessageConstant.QUERY_CHECKGROUP_FAIL);
}
}
@RequestMapping("findCheckItemIdsByCheckGroupId")
public Result findCheckItemIdsByCheckGroupId(Integer id) {
try {
List<Integer> checkitemIds= checkGroupService.findCheckItemIdsByCheckGroupId(id);
return new Result(false,MessageConstant.QUERY_CHECKITEM_SUCCESS,checkitemIds);
}catch (Exception e){
e.printStackTrace();
return new Result(false,MessageConstant.QUERY_CHECKITEM_FAIL);
}
}
@RequestMapping("edit")
public Result edit(@RequestBody CheckGroup checkGroup,Integer[]checkitemIds){
try {
checkGroupService.edit(checkGroup,checkitemIds);
}catch (Exception e){
e.printStackTrace();
return new Result(false, MessageConstant.EDIT_CHECKGROUP_FAIL);
}
return new Result(true, MessageConstant.EDIT_CHECKGROUP_SUCCESS);
}
@RequestMapping("deleteById")
public Result deleteById(Integer id){
try {
checkGroupService.deleteById(id);
}catch (Exception e){
e.printStackTrace();
return new Result(false, MessageConstant.DELETE_CHECKGROUP_FAIL);
}
return new Result(true, MessageConstant.EDIT_CHECKGROUP_SUCCESS);
}
@RequestMapping("findAll")
public Result findAll(){
try {
List<CheckGroup>list=checkGroupService.findAll();
return new Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS,list);
}catch (Exception e){
e.printStackTrace();
return new Result(false, MessageConstant.QUERY_CHECKITEM_FAIL);
}
}
}
总结
总的思路：CRUD的时候要从dao出发，每一层写完后写单元测试，dao调用数据库，Service层是核心！对数据做校验的，测试业务逻辑是否完整，各种判断是必要的，Controller层是固定的，接收参数 调用Service再给前端做出相应 可以用类似于Postman的工具调用Controller
Dubbo+spring声明事务有两个点
1.注解需要加入proxy-target-class=“true”
2.实现类需指定实现的而接口
第一天
的环境搭建，主要是继承和聚合，用一个公共父类去把版本声明写好，其他类用依赖的时候就不用导包了。各个类各司其职，commcon提供具体工具类，interface提供接口，service_provide提供数据库的操作和实现类，backdend用controller具体调用服务提供者，同时页面也在那一块
第二天
前端Vue：
1.检查项的增删改查：前端页面findPage记得放入钩子函数（created）中，增删改后记得调用一下findPage，不过分页查询中有个Bug，在第二页中查询具体某个数据会找不到，虽然dao能查到值，但因为分页插件会返回第二页的值，导致页面没有显示，所以findPage这要先判断一下queryString有没有值，是否为空，如果有值需要先切换到第一页，然后进行操作（百度就是这么做的）
2.表单记得重置数据，编辑的时候把具体id传过去让后台回写给表单，切换页码这个方法记得绑定currentPage，然后再调用分页查询，删除的时候记得给个友好提示是否要删除，不然直接一点就删了，有点猝不及防。.。
后端 ：
dao->service->controller的三层，service通过远程注入调用
dao编辑的时候因为传入的值不确定，需要用到动态sql来拼接，查找具体值的时候因为可以分局code查也可能根据name查，所以用or关联，也是动态sql，如果有就动态生成，没有就正常的查询。
service这一块是@AUtowired注入dao对象调用，是对于后端人员来说最重要的一块，因为要涉及到数据合法性的校验，这一块没做好，我这里少了很多数据的校验，有时间把正则，判空，判断合法性都需要加上（id<0也需要），防止一些非法数据传入
controller @Reference远程注入实现类对象，然后做前后端交互了，根据前端传来的数据去传参，如果在请求体中，加入@RequestBody,如果在url上记得参数名一致，实在不一致用@Param统一一下格式，拿到参数后调用service的方法，并且把结果返回给前端，统一一下返回的格式用Result，Result中封装了三个参数false(成功还是失败),message（统一的信息），data（如果有返回结果，写入这）这样前端就知道请求是true还是false便于后面的操作
第三天
前提:
checkgroup和checkitem是一对多的关系,一个检查组合包含多个检查项
前端：
很多和前面类似，也有些不同
在添加的时候需要加载chekitem所有的信息，回写给tableData里，可以放在created里，这样一初始化就加载，可以减少写回写的时间，添加和编辑的时候都需要传检查组和检查项的信息，这里把检查项拼接在url中，检查组的信息放在请求体中，在取值的时候可别拿错了
编辑是重点：（要发多次请求）先根据当前id拿到检查组的所有信息，再根据检查组的id去中间表中查询检查项的信息，进行勾选，这样回写的时候才会显示具体检查组的信息和被勾选后的检查项信息。
后端：
基础的一样，难点有几个
1.新增检查组的时候因为也有检查项的信息加入，需要拿到新增的检查组信息，并且把检查项的信息加入到中间表中，要执行两个dao的方法，加入到中间表我是用map存入，一个id，一个数组，然后遍历添加即可。
2.编辑的时候检查组和之前一样，但是检查项就不好操作，因为会涉及到新增，删除或者不变，这里用一种较为简单的思路实现：先去中间表把这个编辑组的id对应的关联关系都删除，然后重新添加下即可。
3.删除也是类似，不过要看需求，是有外键关系的情况不能删除，还是可以强制删除，这里采用强制删除的策略，先根据检查组的id删除中间表的关系，再删除检查自己。
其他代码两层调用和实现的时候注意数据校验，返回类型统一
遇到问题多耐心调试，学会看报错，加油！
扫一扫
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
