1.1
导入预约管理模块实体类
将资料中提供的
POJO
实体类复制到
health_common
工程中。
1.2入项目所需公共资源
项目开发过程中一般会提供一些公共资源,供多个模块或者系统来使用。
本章节我们导入的公共资源有:
(
1
)返回消息常量类
MessageConstant
,放到
health_common
工程中
(
2
)返回结果
Result
和
PageResult
类,放到
health_common
工程中
(
3
)封装查询条件的
QueryPageBean
类,放到
health_common
工程中
(
4
)
html
、
js
、
css
、图片等静态资源,放到
health_backend
工程中
注意:后续随着项目开发还会陆续导入其他一些公共资源。
install 项目:
运行项目: -------- debug方式运行,方便调试
访问url:
http://localhost:82/pages/main.html ,页面显示如下:
至此,搭建项目已告一段落。
2 新增检查项 完善页面
检查项管理页面对应的是
checkitem.html
页面,根据产品设计的原型已经完成了页面基本结构的编写, 现在需要完善页面动态效果。
使用mybatisX自动生成 mapper和mapper.xml文件(注意其中可能会存在一些错误,手动修正)
2.1 后台代码
Controller
在
health_backend
工程中创建
CheckItemController
@RestController
@RequestMapping("/checkitem")
public class CheckItemController {
@Reference//查找服务
private CheckItemService checkItemService;
//新增检查项
@RequestMapping("/add")
public Result add(@RequestBody CheckItem checkItem){
try{
checkItemService.add(checkItem);
}catch (Exception e){
e.printStackTrace();
//服务调用失败
return new Result(false, MessageConstant.ADD_CHECKITEM_FAIL);
}
return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS);
}
}
service实现类 -- health_service_provider
@Service(interfaceClass = CheckItemService.class)
@Transactional
public class CheckItemServiceImpl implements CheckItemService {
//注入DAO对象
@Autowired
private CheckItemDao checkItemDao;
public void add(CheckItem checkItem) {
checkItemDao.add(checkItem);
}
}
dao 层
public interface TCheckItemMapper {
public void add( CheckItem checkItem);
}
================================================
<?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.TCheckItemMapper">
<insert id="add" parameterType="com.itheima.pojo.CheckItem">
insert into t_checkitem(code,name,sex,age,price,type,remark,attention)
values
(#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})
</insert>
</mapper>
运行项目 ,测试代码
install parent
debugger 运行 health_backend ===(dubbo中的消费者)
运行health_service_provider == dubbo中的提供者
访问url:http://localhost:82/pages/main.html ,点击新建 按钮, 并测试功能。
至此,测试新增检查项目的功能已实现
=========================================================================
1、在启动项目之前需要先启动zookeeper,
2、可以搭建一个dubbo管控台,方便查看生产者和消费者
=========================================================================
4、检查项分页
本项目所有分页功能都是基于
ajax
的异步请求来完成的,请求参数和后台响应数据格式都使用
json
数据 格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的
json
格式为:
{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的
json
格式为:
{total:1000,rows:[]}
定义分页相关模型数据
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
4.1.2
定义分页方法
在页面中提供了
findPage
方法用于分页查询,为了能够在
checkitem.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("/checkitem/findPage.do",param).then((response)=> {
//为模型数据赋值,基于VUE的双向绑定展示到页面
this.dataList = response.data.data.rows;
this.pagination.total = response.data.data.total;
});
}
4.1.3
完善分页方法执行时机
除了在
created
钩子函数中调用
fifindPage
方法查询分页数据之外,当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage
方法重新发起查询请求。
<el-button @click="findPage()" class="dalfBut">查询</el-button>
为查询按钮绑定单击事件,调用findPage方法 为分页条组件绑定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) {
//设置最新的页码
this.pagination.currentPage = currentPage;
//重新调用findPage方法进行分页查询
this.findPage();
},
4.2
后台代码
4.2.1 Controller
在
CheckItemController
中增加分页查询方法
@PostMapping("findPage")
public Result findPage(QueryPageBean queryPageBean){
PageResult pageResult = checkItemService.findPage(queryPageBean);
return new Result(true, MessageConstant.QUERY_CHECKITEM_SUCCESS, pageResult);
}
4.2.2
服务接口
在
CheckItemService
服务接口中扩展分页查询方法
@Override
public PageResult findPage(QueryPageBean queryPageBean) {
PageHelper.startPage(queryPageBean.getCurrentPage(),queryPageBean.getPageSize());
Page<CheckItem> page = checkItemDao.selectByCondition(queryPageBean.getQueryString());
long total = page.getTotal();
List<CheckItem> rows = page.getResult();
return new PageResult(total,rows);
}
页面效果: