JavaEE企业级应用开发项目教程(SSM)PPT完整全套教学课件_第1页
JavaEE企业级应用开发项目教程(SSM)PPT完整全套教学课件_第2页
JavaEE企业级应用开发项目教程(SSM)PPT完整全套教学课件_第3页
JavaEE企业级应用开发项目教程(SSM)PPT完整全套教学课件_第4页
JavaEE企业级应用开发项目教程(SSM)PPT完整全套教学课件_第5页
已阅读5页,还剩774页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

模块一项目开发准备《JavaEE企业级应用开发项目教程(SSM)》模块1?项目概述.pptx模块2?管理端-检查项管理.pptx模块3?管理端-检查组管理.pptx模块4?管理端-套餐管理.pptx模块5?管理端-预约设置.pptx模块6?管理端-权限控制.pptx模块7?用户端-用户登录.pptx模块8?用户端-体检预约.pptx模块9?管理端-统计分析.pptx模块10?管理端-运营数据报表导出.pptx全套PPT课件知识目标/Target了解架构,能够说出常用的架构及其优缺点

熟悉项目的技术栈,能够说出每个技术栈的用途了解项目的功能结构,能够说出传智健康项目的功能组成技能目标/Target

掌握传智健康项目的环境搭建,能够根据系统模块的划分搭建传智健康项目中的父工程和子模块章节概述/

Summary随着生活水平的提高,关注自身健康的人群越来越多,很多健康管理机构通过引入健康管理系统提高健康服务水平,提升体检用户满意度。本书讲解的传智健康管理系统(后续简称传智健康)是一款应用于健康管理机构的业务系统,该系统基于Spring+SpringMVC+MyBatis框架(后续简称SSM框架)开发完成。本模块将针对传智健康的项目背景、项目功能、项目架构、数据库设计及项目环境搭建等内容进行详细讲解。目录/Contents01020304初识项目项目架构设计数据库设计项目环境搭建初识项目1-1任务描述随着国民对健康重视程度的逐步提高,预防胜于治疗的健康观念也在逐步加深。健康管理机构迫切需要高质量信息化系统的支持。传智健康是一款应用于健康管理机构的业务系统,一方面用于实现健康管理机构工作内容可视化、会员管理专业化,从而提高健康管理师的工作效率,增强管理者对健康管理机构运营情况的了解;另一方面用于实现体检用户的体检预约、健康咨询等服务。任务分析管理端供系统管理员、健康管理师等健康管理机构的内部人员使用。用户端供给体检用户使用。功能结构描述传智健康的功能结构

管理端检查项是用户在体检过程中具体要检查的项目,例如身高、体重、收缩压等。检查项管理包括检查项的新增、查询、编辑、删除功能。预约管理模块-检查项管理任务分析

管理端由于检查项数量较多,为了方便、快速地筛选出相同类别的检查项,通常会将相同类别的检查项放到一个组别进行管理。检查组管理包括检查组的新增、查询、编辑、删除功能。预约管理模块-检查组管理任务分析

管理端套餐是健康管理机构根据用户群体需求专门定制的一套体检流程,实质是检查组的集合。套餐管理包括套餐的新增、查询、编辑、删除功能。预约管理模块-套餐管理任务分析

管理端预约设置是指健康管理机构对每天体检预约人数的设置。实现预约设置有两种方式,一种是批量导入预约设置信息,另一种是基于日历实现预约设置。预约管理模块-预约设置任务分析

管理端会员数据量统计用于统计最近一年每个月的会员数量,并通过折线图的方式展示出每个月会员数量的变化趋势。统计分析模块-会员数据量统计任务分析

管理端套餐预约占比统计是指对健康管理机构各个套餐预约占比情况的统计,统计结果使用饼图展示。统计分析模块-套餐预约占比统计任务分析

管理端运营数据统计是指对会员数据、预约到诊数据、热门套餐等运营相关数据的统计。统计结果默认展示在页面中,运营数据可以选择使用Excel或PDF格式导出。统计分析模块-运营数据统计任务分析

用户端用户登录是指体检用户使用手机号和验证码登录。传智健康的用户端,其中验证码通过发送手机短信的方式进行获取。在线预约模块-用户登录任务分析

用户端套餐列表页面用于展示系统所有的套餐,套餐列表中每个套餐展示的信息包括图片、套餐名称、套餐介绍、适用性别和适用年龄。在线预约模块-套餐列表展示任务分析

用户端套餐详情页面用于展示某一个套餐的具体信息,包括图片、套餐名称、套餐介绍、适用性别、适用年龄、套餐中的检查组信息和检查组中的检查项信息等。在线预约模块-套餐详情展示任务分析

用户端在体检预约页面中录入体检人信息并进行体检预约。体检人信息包括姓名、性别、手机号、身份证号、预约体检的日期等。为了保证用户输入的手机号是正确的,需要通过短信验证码进行验证。在线预约模块-体检预约任务分析项目架构设计1-2架构,又名软件架构,是有关软件整体结构与组件的抽象描述,用于指导大型软件系统各个方面的设计。Java企业级的应用根据业务的复杂程度,通常使用的系统架构有单体应用架构、垂直应用架构、面向服务的架构(Service-OrientedArchitecture,SOA)、微服务架构等。项目架构的选择在项目准备过程中占据着重要的位置,除此之外技术架构的选择也是项目准备过程中必不可少的一个环节,接下来将针对项目架构和技术架构的选择进行详细讲解。任务描述任务分析项目架构SOA垂直应用架构微服务架构单体应用架构单体应用架构是把所有业务场景的表示层、业务逻辑层和数据访问层放在一个工程中,经过编译打包,部署在一台服务器上。垂直应用架构将单体应用拆分成若干个独立的小应用,每个小应用独立的部署到不同的服务器上,以提升效率。SOA是面向服务的架构,它将应用程序的不同功能单元(简称服务)进行拆分,并通过这些服务之间定义的接口和协议将其联系起来。微服务架构是SOA架构的升级,每一个服务就是一个独立的部署单元,服务之间的耦合性很低。优点:项目架构简单,技术结构单一,前期用人成本低,适合小型系统的开发。缺点:随着业务复杂度的增加,功能越来越多,代码量越来越大,会导致代码可读性、可维护性和可扩展性下降。由于系统过大且关联较多,任何一个

Bug都有可能导致整个系统宕机。单体应用架构开发的进销存系统项目架构任务分析优点:通过垂直拆分实现流量分担,减轻服务器压力;可以针对不同的应用进行优化,方便水平扩展,容错率提高。缺点:当垂直应用越多,应用之间可能发生相互调用,不同应用之间可能

出现数据、代码、功能冗余。项目架构垂直应用架构开发的进销存系统任务分析优点:将公共的功能抽取为服务,提高开发效率;各个服务之间耦合度低,可读性和可维护性比较好。缺点:抽取服务的粒度较大,服务提供方与调用方接口耦合度较高。任务分析项目架构SOA开发的进销存系统优点:开发模式更加灵活;微服务的独立打包、部署和升级,使小团队的交付周期将缩短,运维成本下降。缺点:对技术要求较高;微服务过多会造成服务管理成本提高,不利于系统维护,服务拆分粒度过细也会导致

系统变得凌乱和笨重。任务分析项目架构微服务架构开发的进销存系统任务分析技术架构在开发时通常会根据不同的需求将项目拆分为多个层次处理,而不同的需求由其相对应的技术栈提供解决方案。传智健康的技术架构数据库设计1-3在实际开发应用程序时,会根据应用程序的需求及其实现功能来进行数据库设计,数据库设计的合理性将直接影响应用程序的性能和可扩展性。本任务对传智健康数据库设计中的数据表结构设计和数据表关系设计进行详细讲解。任务描述任务分析数据表结构设计在开发过程中,通常使用实体对象来操作数据,而存储数据时,需要把实体对象中的数据存放到数据表,也就是说实体对象中的每个属性对应数据表中的一个字段。因此可以根据实体对象来设计数据表结构。传智健康的实体对象包括检查项实体、检查组实体、套餐实体、用户实体、预约设置实体、菜单实体、权限实体、角色实体、会员实体和体检预约信息实体。任务分析数据表结构设计字段名数据类型是否主键描述idint(11)是主键,自动增长codevarchar(16)否检查项编码namevarchar(32)否检查项名称sexchar(1)否适用性别,0表示不限,1表示男,2表示女agevarchar(32)否适用年龄(范围),例如:23~35pricefloat否价格typechar(1)否检查项类型,1表示检查,2表示检验attentionvarchar(128)否注意事项remarkvarchar(128)否检查项说明按照检查项实体中的属性设计检查项表的表结构,检查项表用于保存体检检查项信息。检查项表(t_checkitem)任务分析数据表结构设计按照检查组实体中的属性设计检查组表的表结构。检查组表用于保存与检查组相关的信息。检查组表(t_checkgroup)字段名数据类型是否主键描述idint(11)是主键,自动增长codevarchar(32)否检查组编码namevarchar(32)否检查组名称helpCodevarchar(32)否助记码sexchar(1)否适用性别,0表示不限,1表示男,2表示女remarkvarchar(128)否检查组说明attentionvarchar(128)否注意事项任务分析数据表结构设计按照套餐实体中的属性设计套餐表的表结构。套餐表用于保存与体检套餐相关的信息。套餐表(t_setmeal)字段名数据类型是否主键描述idint(11)是主键,自动增长namevarchar(128)否套餐名称codevarchar(8)否套餐编码helpCodevarchar(16)否助记码sexchar(1)否适用性别,0表示不限,1表示男,2表示女agevarchar(32)否适用年龄范围,例如23~35pricefloat否价格remarkvarchar(128)否套餐说明attentionvarchar(128)否注意事项imgvarchar(128)否套餐对应的图片存储路径任务分析数据表结构设计按照预约设置实体中的属性设计预约设置表的表结构。预约设置表用于保存每天的预约人数信息。预约设置表(t_ordersetting)字段名数据类型是否主键描述idint(11)是主键,自动增长orderDatedate否约预日期numberint(11)否可预约人数reservationsint(11)否已预约人数任务分析数据表结构设计按照用户实体中的属性设计用户表的表结构。用户表用于保存管理端的用户信息。用户表(t_user)字段名数据类型是否主键描述idint(11)是主键,自动增长birthdaydate否生日gendervarchar(1)否性别,1表示男,2表示女usernamevarchar(32)否用户名passwordvarchar(256)否密码remarkvarchar(32)否用户说明stationvarchar(1)否状态telephonevarchar(11)否联系电话任务分析数据表结构设计按照菜单实体中的属性设计菜单表的表结构。菜单表保存系统的菜单信息,菜单在页面导航栏中使用。菜单表(t_menu)字段名数据类型是否主键描述idint(11)是主键,自动增长namevarchar(128)否菜单名称linkUrlvarchar(128)否访问路径pathvarchar(128)否菜单项所对应的路由路径priorityint(11)否优先级,用于排序iconvarchar(64)否菜单的图标样式descriptionvarchar(128)否菜单描述parentMenuIdint(11)否父菜单idlevelint(11)否菜单级别任务分析数据表结构设计按照权限实体中的属性设计权限表的表结构。权限表用于保存权限控制信息,为系统的所有功能设置访问权限。权限表(t_permission)字段名数据类型是否主键描述idint(11)是主键,自动增长namevarchar(32)否权限名称keywordvarchar(64)否权限关键字,用于权限控制descriptionvarchar(128)否权限描述任务分析数据表结构设计按照角色实体中的属性设计角色表的表结构。角色表用于保存用户角色信息。角色表(t_role)字段名数据类型是否主键描述idint(11)是主键,自动增长namevarchar(32)否角色名称keywordvarchar(64)否角色关键字,用于权限控制descriptionvarchar(128)否角色描述任务分析数据表结构设计按照会员实体中的属性设计会员表的表结构,会员表用于保存注册会员信息。会员表(t_member)字段名数据类型是否主键描述idint(11)是主键,自动增长fileNumbervarchar(32)否会员档案号namevarchar(32)否姓名sexvarchar(8)否性别,1表示男,2表示女idCardvarchar(18)否身份证号phoneNumbervarchar(11)否手机号regTimedate否注册时间passwordvarchar(32)否登录密码emailvarchar(32)否邮箱birthdaydate否出生日期remarkvarchar(128)否会员信息说明任务分析数据表结构设计按照体检预约实体中的属性设计体检预约信息表的表结构。体检预约信息表用于保存会员进行体检预约时的预约信息。体检预约信息表(t_order)字段名数据类型是否主键描述idint(11)是主键,自动增长member_idint(11)否会员idorderDatedate否预约日期orderTypevarchar(8)否约预类型,如电话预约、客户端预约orderStatusvarchar(8)否预约状态(是否到诊)setmeal_idint(11)否套餐id任务分析数据表关系设计检查组表和检查项表的关联关系任务分析数据表关系设计套餐表和检查组表的关联关系任务分析数据表关系设计用户表和角色表的关联关系任务分析数据表关系设计角色表和权限表的关联关系任务分析数据表关系设计角色表和菜单表的关联关系项目环境搭建1-4任务描述现实生活中,建造房屋的第一步是打地基,只有地基夯实,才能建造出稳固的房屋。同样,项目开发前需先将项目环境搭建完善,才能保证后续开发工作顺利展开。本任务将从开发环境介绍、项目结构设计、搭建Maven工程和导入准备资源这几方面讲解项目环境的搭建工作。任务实现项目开发环境介绍数据库MySQL8.0浏览器Chrome开发工具IDEA2019.3.3操作系统Windows7及以上Java开发包JDK1.8Web服务器Tomcat8.5项目结构设计任务实现传智健康模块划分health_parent:父工程,统一管理依赖的版本,同时聚合其他子模块便于统一执行Maven命令,打包方式为POM。health_common:用于存放通用组件,例如工具类、实体类、返回结果实体类和常量类等,打包方式为JAR。health_interface:用于存放服务接口,为了便于管理打包方式为JAR。health_service_provider:Dubbo服务提供方,打包方式需要为WAR。health_backend:传智健康管理端,Dubbo服务消费方,打包方式为WAR。health_mobile:传智健康用户端,Dubbo服务消费方,打包方式为WAR。任务实现项目结构设计步骤1创建health_parent父工程步骤2步骤3步骤4步骤5步骤6在IDEA中创建一个名称为health_parent的Maven工程,打包方式为POM,并在工程的pom.xml中引入项目所需的依赖。任务实现搭建Maven工程步骤1创建health_common子模块步骤2步骤3步骤4步骤5步骤6创建名称为health_common的子模块,打包方式为JAR。com.itheima.constant包:存放消息类。com.itheima.entity包:存放查询条件与返回结果实体类。com.itheima.pojo包:存放实体类。com.itheima.utils包:存放工具类。任务实现搭建Maven工程步骤1创建health_interface子模块步骤2步骤3步骤4步骤5步骤6创建名称为health_interface的子模块,打包方式为JAR。com.itheima.service:存放项目服务接口文件。任务实现搭建Maven工程步骤1创建health_service_provider子模块步骤2步骤3步骤4步骤5步骤6创建名称为health_service_provider的子模块,打包方式为WAR。com.itheima.dao包:存放Dao接口,操作数据库。com.itheima.service.impl包:存放管理端和用户端服务接口的实现类。perties:配置日志输出的信息。SqlMapConfig.xml:MyBatis的核心配置文件。spring-tx.xml:配置与事务管理相关的信息。spring-service.xml:配置与Spring相关

的信息。任务实现搭建Maven工程步骤1创建health_backend子模块步骤2步骤3步骤4步骤5步骤6创建名称为health_backend的子模块,打包方式为WAR。com.itheima.controller包:存放管理端控制器类。com.itheima.security包:存放实现权限的类。perties:配置日志输出的信息。springmvc.xml:配置fastjson转换器、指定应用名称、指定服务注册中心地址、设置包扫描等。任务实现搭建Maven工程步骤1创建health_mobile子模块步骤2步骤3步骤4步骤5步骤6创建名称为health_mobile的子模块,打包方式为WAR。com.itheima.controller:存放用户端控制器类。perties:配置日志输出的信息。springmvc.xml:配置FastJson转换器、Dubbo、包扫描等。任务实现搭建Maven工程导入准备资源任务实现health_backend子模块的静态资源目录导入静态资源导入准备资源任务实现health_mobile子模块的静态资源目录导入静态资源导入准备资源任务实现导入公共资源MessageConstant类:封装消息常量。PageResult类:封装分页结果。QueryPageBean类:封装查询条件。Result类:封装返回结果。导入准备资源任务实现创建数据库#创建数据库healthCREATEDATABASEhealth;#使用health数据库USEhealth;#导入数据库文件,这里假设该文件在C盘的根目录下sourceC:\health_db.sql;模块小结本模块主要介绍了传智健康项目的基本概况。首先介绍了项目背景和项目功能;其次介绍了项目架构设计,包括项目架构选择、架构技术介绍;再次介绍了数据表结构设计与数据表关系设计;最后带领读者进行项目环境搭建,包括开发环境介绍、项目结构设计、搭建Maven工程、导入准备资源。希望通过学习本模块的内容,能够对项目框架有一个基础认知,能够独立搭建Maven工程,为后面的学习做好准备。模块小结模块二管理端-检查项管理《JavaEE企业级应用开发项目教程(SSM)》知识目标/Target熟悉Zookeeper的基本操作,能够独立完成Zookeeper的下载、安装、启动熟悉Axios技术的使用,能够灵活使用Axios技术发送页面请求熟悉MyBatis分页插件PageHelper,能够使用PageHelper实现分页技能目标/Target掌握查询检查项功能的实现方法掌握编辑检查项功能的实现方法掌握删除检查项功能的实现方法掌握新增检查项功能的实现方法章节概述/

Summary人体是一个具有多层次结构的复杂体系,如果有器官或者组织存在问题,则会打破器官系统之间的协调和平衡。如果想要知道身体是否健康,可以对人体内部器官或组织进行检查。为了给体检用户提供丰富、完善的体检服务,健康管理机构会根据不同的体检需求,推出对应的检查项以提高体检用户的满意度,提升自身竞争力。为了满足体检用户的各项检查需求,传智健康管理端提供检查项管理功能,包括检查项的新增、查询、编辑和删除。接下来,本模块将针对管理端的检查项管理进行详细讲解。目录/Contents01020304新增检查项查询检查项编辑检查项删除检查项新增检查项2-1任务描述任务描述检查项指的是用户体检时要检查的项目,本任务要实现的是新增检查项功能。访问health_backend子模块中的检查项管理页面checkitem.html。任务描述单击检查项管理页面中的“新增”按钮,弹出新增检查项对话框。输入检查项的信息后,单击“确定”按钮完成新增检查项。任务分析弹出新增检查项对话框在checkitem.html页面中,为“新增”按钮绑定单击事件,单击事件触发后弹出新增检查项对话框。为对话框中的“确定”按钮绑定单击事件,在单击事件触发后,将新增检查项对话框中的数据提交到后台。由控制器类CheckItemController中的add()方法接收和处理新增检查项的请求。由CheckItemController类中的add()方法将新增检查项的结果响应回checkitem.html页面。CheckItemServiceImpl类中调用CheckItemDao接口中的add()方法新增检查项。提交新增检查项数据接收和处理新增检查项的请求提示新增检查项的结果保存新增检查项数据任务分析新增检查项的实现过程知识进阶传智健康服务消费方和服务提供方所在的子模块是不同的,不同子模块之间的远程调用,可以通过Dubbo实现,Dubbo在使用时需要引入注册中心,并将服务发布到注册中心中。目前Dubbo支持的注册中心有5个,分别是是Nacos、Multicast、ZooKeeper、Redis和Simple,其中,

Zookeeper是官方推荐的注册中心,而且Zookeeper数据模型简单、支持网络集群、事件监听、高可用、高性能,所以传智健康选择Zookeeper作为Dubbo的注册中心。Zookeeper知识进阶Zookeeper属于ApacheHadoop的一个子项目,是一个开放源代码的分布式应用程序协调服务,分布式应用程序可以基于它实现同步服务、配置维护和命名服务等功能。Zookeeper知识进阶访问ApacheZookeeper的官方网站首页,在页面中单击“Download”超链接,会跳转Zookeeper的版本列表页面。Zookeeper下载Zookeeper知识进阶ApacheZooKeeper3.6.3是当前最新的稳定版,,在此选择下载ApacheZooKeeper3.6.3。单击页面中的“ApacheZooKeeper3.6.3(asc,sha512)”超链接会进入ApacheZooKeeper3.6.3下载页面。Zookeeper下载Zookeeper知识进阶单击“https://dlcdn./zookeeper/zookeeper-3.6.3/apache-zookeeper-3.6.3-bin.tar.gz”超链接会下载一个名称为apache-zookeeper-3.6.3-bin.tar.gz的Zookeeper安装包。Zookeeper下载Zookeeper知识进阶bin目录:存放Zookeeper的命令。conf目录:存放配置文件。lib目录:存放Java客户端开发时需要依赖的JAR包。Zookeeper安装Zookeeper将apache-zookeeper-3.6.3-bin.tar.gz解压后文件夹下的目录结构如下图。知识进阶打开conf文件夹,复制zoo_sample.cfg文件并将其重命名为zoo.cfg。使用文本编辑工具打开zoo.cfg文件,配置存储数据、日志的目录地址。#thedirectorywherethesnapshotisstored.dataDir=D:\\zookeeper\\apache-zookeeper-3.6.3-bin\\datasdataLogDir=D:\\zookeeper\\apache-zookeeper-3.6.3-bin\\logs#theportatwhichtheclientswillconnectclientPort=2181Zookeeper启动Zookeeper服务指定存储数据的目录地址指定存储日志的目录地址知识进阶zkServer.cmd用于启动Zookeeper服务。zkCli.cmd用于连接Zookeeper。Zookeeper启动Zookeeper服务知识进阶Zookeeper启动Zookeeper服务双击“zkServer.cmd”,启动ZooKeeper服务。知识进阶Zookeeper启动Zookeeper服务双击“zkCli.cmd”查看ZooKeeper服务的启动情况知识进阶小提示:启动Zookeeper服务时闪退的处理方式双击zkServer.cmd或者zkCli.cmd时可能会出现闪退,如果发生此种情况,可以通过修改该脚本文件中命令行的内容进行解决。以zkServer.cmd脚本文件为例,通过文本编辑器打开zkServer.cmd。查找命令行语句call%JAVA%"-Dzookeeper.log.dir=%ZOO_LOG_DIR%",将语句中%JAVA%段落两边的%去掉,保存文本后再次启动服务。知识进阶Axios是一个基于对象来传递异步操作信息的HTTP库,可以用在浏览器中。Axios通过对Ajax的封装实现页面和服务端的交互。Axios技术知识进阶post和get表示请求方式,URL表示请求地址,data表示请求参数。then()函数用于处理请求结果,参数response是控制器响应的结果。catch()函数用于用于捕获执行then()函数时发生的异常。finally()函数用于执行一段无论是请求成功还是失败都会被执行的代码。axios.post/get(URL,data)

.then((response)=>{

}).catch(()=>{

}).finally(()=>{});Axios技术任务实现<el-buttontype="primary"class="butT">新增</el-button><!--新增标签弹层--><divclass="add-form"><el-dialogtitle="新增检查项":visible.sync="dialogFormVisible">

</el-dialog></div><script>varvue=newVue({el:'#app',data:{formData:{},//表单数据dialogFormVisible:false,//新增表单弹层是否可见

},

})</script>(1)弹出新增检查项对话框通过设置dialogFormVisible的值,进而改变:visible的属性值,进而控制对话框在页面中显示或隐藏。查看checkitem.html页面中与“新增”按钮和新增检查项对话框相关的源代码。任务实现由于新增检查项对话框在页面初始化时已经存在,只是处于隐藏状态,故需要将属性dialogFormVisible的值修改为true;为了保证每次弹出的对话框内均没有数据,在每次显示对话框之前调用resetForm()方法将对话框中的数据清空。//清空对话框resetForm(){

this.formData={};},//弹出新增检查项对话框handleCreate(){

this.resetForm();//调用重置表单的方法

this.dialogFormVisible=true;//修改显示弹窗的属性为true}(1)弹出新增检查项对话框任务实现为checkitem.html页面的“新增”按钮绑定单击事件,并在单击时调用定义好的handleCreate()方法,弹出新增检查项对话框。<el-buttontype="primary"class="butT"

@click="handleCreate()">新增</el-button>(1)弹出新增检查项对话框任务实现为新增检查项对话框中的“取消”和“确定”按钮绑定单击事件,并设置单击时要执行的操作。<divslot="footer"class="dialog-footer"><el-button@click="dialogFormVisible=false">取消</el-button><el-buttontype="primary"@click="handleAdd()">确定</el-button></div>(2)提交新增检查项请求任务实现在checkitem.html页面中定义handleAdd()方法,用于提交新增检查项数据的请求。handleAdd(){

this.$refs['dataAddForm'].validate((valid)=>{

if(valid){axios.post("/checkitem/add.do",this.formData).then((res)=>{

if(res.data.flag){//请求处理成功 this.$message({type:'success',message:res.data.message });

this.dialogFormVisible=false;

//隐藏对话框

}else{//请求处理失败 this.$message.error(res.data.message);

}

});

}else{

this.$message.error("表单数据校验失败,请检查输入"+"是否正确!");

}

});}(2)提交新增检查项数据任务实现在health_common模块创建检查项类CheckItem,在类中声明检查项的属性,定义各个属性的getter/setter方法。(3)创建检查项类任务实现在health_backend子模块创建控制器类CheckItemController,在类中定义add()方法,用于处理新增检查项的请求。publicclassCheckItemController{@Reference//查找服务privateCheckItemServicecheckItemService;@RequestMapping("/add")publicResultadd(@RequestBodyCheckItemcheckItem){try{checkItemService.add(checkItem);//调用接口方法

returnnewResult(true,MessageConstant.ADD_CHECKITEM_SUCCESS);//成功}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.ADD_CHECKITEM_FAIL);//失败}}}(4)实现新增检查项控制器任务实现在health_interface子模块创建接口CheckItemService,在接口中定义新增检查项的add()方法。publicinterfaceCheckItemService{publicvoidadd(CheckItemcheckItem);//新增检查项}(5)创建检查项服务接口任务实现在health_service_provider子模块创建CheckItemService接口实现类CheckItemServiceImpl,并重写接口的add()方法,用于新增检查项。@Service(interfaceClass=CheckItemService.class)@TransactionalpublicclassCheckItemServiceImplimplementsCheckItemService{@AutowiredprivateCheckItemDaocheckItemDao;//新增检查项

@Overridepublicvoidadd(CheckItemcheckItem){checkItemDao.add(checkItem);//调用持久层接口add()}}(6)实现新增检查项服务任务实现在health_service_provider子模块创建持久层接口CheckItemDao。在类中定义add()方法,用于新增检查项。publicinterfaceCheckItemDao{publicvoidadd(CheckItemcheckItem);//新增检查项}(7)实现持久层新增检查项任务实现在health_service_provider子模块创建与CheckItemDao接口同名的映射文件CheckItemDao.xml,在文件中使用<insert>标签映射新增语句,将新增的检查项数据保存到数据库中。<mappernamespace="com.itheima.dao.CheckItemDao"><!--新增检查项--><insertid="add"parameterType="com.itheima.pojo.CheckItem">iINSERTINTOt_checkitem(code,name,sex,age,price,type,remark,attention)VALUES

(#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})</insert></mapper>(7)实现持久层新增检查项任务实现启动ZooKeeper服务,在IDEA中依次启动health_service_provider和health_backend。使用浏览器访问http://localhost:82/pages/checkitem.html。(8)测试新增检查项任务实现在检查项管理页面单击“新增”按钮,弹出新增检查项对话框。(8)测试新增检查项任务实现在新增检查项对话框按照要求填写检查项的各项信息。(8)测试新增检查项任务实现新增成功后,页面提示“新增检查项成功”。由于查询检查项的功能暂未开发完成,数据库中新增的检查项不会展示在检查项管理页面中。(8)测试新增检查项任务实现通过查询数据表t_checkitem的方式验证检查项数据是否新增成功。(8)测试新增检查项查询检查项2-2任务描述任务描述本任务需要实现既可以根据指定需求查询检查项,又可以查询所有检查项。考虑到页面可视化效果,本任务通过分页形式展示查询出的检查项。任务分析(1)提交分页查询检查项的请求。(2)接收和处理分页查询检查项的请求。(3)分页查询检查项。(4)展示分页查询结果。分页展示检查项在checkitem.html页面中,为分页条绑定单击事件,在单击事件触发后根据要跳转的页码进行分页查询。页码切换在checkitem.html页面中,为“查询”按钮绑定单击事件,在单击事件触发后执行按条件的分页查询。按条件查询检查项查询检查项任务分析分页展示检查项的实现过程知识进阶PageHelper是MyBatis提供的第三方开源分页插件,支持任何复杂的单表分页、多表分页以及12种常见数据库的使用,例如Oracle、Mysql、MariaDB、SQLite、Hsqldb和PostgreSQL等。MyBatis分页插件PageHelper知识进阶在health_parent父工程的POM文件中添加PageHelper依赖。<properties>

<pagehelper.version>4.1.4</pagehelper.version></properties><dependencyManagement>

<dependencies>

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

<version>${pagehelper.version}</version>

</dependency>

</dependencies></dependencyManagement>MyBatis分页插件PageHelper(1)引入PageHelper依赖知识进阶由于在<dependencyManagement>标签只是定义依赖的声明,并不实际引入JAR包,因此子模块health_common继承父工程health_parent时,需要在POM文件的<dependencies>标签中显式声明PageHelper的依赖。

<dependencies>

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

</dependency>

</dependencies>MyBatis分页插件PageHelper(1)引入PageHelper依赖知识进阶在health_service_provider子模块的resources目录下的SqlMapConfig.xml文件中添加PageHelper的相关配置。<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUBLIC"-////DTDConfig3.0//EN""/dtd/mybatis-3-config.dtd"><configuration><plugins><plugininterceptor="com.github.pagehelper.PageHelper"><propertyname="dialect"value="mysql"/></plugin></plugins></configuration>MyBatis分页插件PageHelper(2)配置PageHelper任务实现<el-tablesize="small"current-row-key="id":data="dataList"stripe>

</el-table><divclass="pagination-container"><el-paginationclass="pagiantion"></el-pagination></div><script>varvue=newVue({el:'#app',data:{pagination:{//分页属性 currentPage:1,//当前页码 pageSize:10,//每页显示的记录数 total:0,//总记录数 queryString:null//查询条件},dataList:[],//当前页要展示的分页列表数据

},created(){},

})</script>STEP01(1)提交分页查询检查项的请求:data="dataList"通过数据双向绑定的方式展示数据。el-pagination分页组件,用于实现数据分页。分页属性pagination,包括当前页码、每页显示的记录数、总记录数和查询条件。dataList表示当前页要展示的数据。created()函数在Vue对象初始化完成后自动执行。查看checkitem.html页面中用于展示检查项的源代码。STEP011.分页展示检查项任务实现本任务的查询操作分为按条件查询和查询所有。如果指定查询条件,则按照条件查询;如果没有查询条件,则查询所有。在checkitem.html页面中定义findPage()方法,用于实现分页查询检查项。findPage(){varparam={currentPage:this.pagination.currentPage,//当前页pageSize:this.pagination.pageSize,//每页显示记录数queryString:this.pagination.queryString//查询条件};axios.post("/checkitem/findPage.do",param).then((res)=>{this.pagination.total=res.data.total;//获取总记录数this.dataList=res.data.rows;//获取数据列表});}STEP01(1)提交分页查询检查项的请求STEP011.分页展示检查项任务实现在钩子函数created()中调用findPage()方法,created()函数在Vue对象初始化完成后自动执行,访问checkitem.html页面后即可实现查询检查项并分页显示。STEP01created(){

this.findPage();//调用分页查询方法完成分页查询}(1)提交分页查询检查项的请求STEP011.分页展示检查项任务实现在health_backend子模块的CheckItemController类中定义findPage()方法,用于处理分页查询检查项的请求。@RequestMapping("/findPage")publicPageResultfindPage(@RequestBodyQueryPageBeanqueryPageBean){//调用服务接口findPage(),返回分页结果封装对象returncheckItemService.findPage(queryPageBean);}STEP01(2)实现查询检查项控制器STEP011.分页展示检查项任务实现在health_interface子模块的CheckItemService接口中定义findPage()方法,用于分页查询检查项。//分页查询检查项接口publicPageResultfindPage(QueryPageBeanqueryPageBean);STEP01(3)创建查询检查项服务STEP011.分页展示检查项任务实现在health_service_provider子模块的CheckItemServiceImpl类重写接口的findPage()方法,用于分页查询检查项。@OverridepublicPageResultfindPage(QueryPageBeanqueryPageBean){IntegercurrentPage=queryPageBean.getCurrentPage();//获取当前页面IntegerpageSize=queryPageBean.getPageSize();//获取每页显示的记录数StringqueryString=queryPageBean.getQueryString();//获取查询条件//分页插件,会在执行sql之前将分页关键字追加到SQL后面

PageHelper.startPage(currentPage,pageSize);//调用持久层接口方法Page<CheckItem>page=checkItemDao.findByCondition(queryString);//返回分页结果对象returnnewPageResult(page.getTotal(),page.getResult());}注意:为了避免在SQL语句中添加分页关键字失败,必须在执行SQL语句前调用PageHelper的startPage()方法。STEP01(4)实现查询检查项服务STEP011.分页展示检查项任务实现在health_service_provider子模块的CheckItemDao接口中定义findByCondition()方法,用于分页查询检查项。//分页查询检查项publicPage<CheckItem>findByCondition(StringqueryString);STEP01(5)实现持久层查询检查项STEP011.分页展示检查项任务实现在health_service_provider子模块的CheckItemDao.xml映射文件中通过<select>标签映射查询语句,进行检查项的条件查询、分页查询。<!--根据条件查询、分页查询检查项--><selectid="findByCondition"parameterType="string" resultType="com.itheima.pojo.CheckItem">SELECT*FROMt_checkitem<iftest="value!=nullandvalue.length>0">WHERE

code=#{value}OR

name=#{value}</if></select>通过<if>标签判断是否进行条件查询如果参数value的值是null,表示没有查询条件,此时查询的是数据表t_checkitem中的所有数据。STEP01(5)实现持久层查询检查项STEP011.分页展示检查项任务实现依次启动ZooKeeper服务、health_service_provider和health_backend。使用浏览器访问http://localhost:82/pages/checkitem.html。STEP01(6)测试分页展示检查项STEP011.分页展示检查项任务实现STEP011.分页展示检查项(7)完善checkitem.html页面的handleAdd()方法优化handleAdd()方法,在新增检查项成功后调用findPage()方法。//添加检查项handleAdd(){

axios.post("/checkitem/add.do",this.formData).then((res)=>{//处理成功if(res.data.flag){

this.findPage();//分页查询检查项}

});

}任务实现在checkitem.html页面中定义handleCurrentChange()方法,该方法用于实现页码切换。//切换页码handleCurrentChange(currentPage){this.pagination.currentPage=currentPage;//指定最新的页码this.findPage();//调用分页方法}STEP012.页码切换(1)定义页码切换的方法任务实现checkitem.html页面中提供了分页组件el-pagination。接下来,为el-pagination组件设置与页码相关的属性值。<el-pagination

class="pagiantion"

@current-change="handleCurrentChange"

:current="pagination.currentPage"

:size="pagination.pageSize"

:total="pagination.total"

layout="total,prev,pager,next,jumper"></el-pagination>表示在页码发生改变时触发的方法表示当前页表示每页显示条数表示总条数STEP01(2)设置分页组件el-pagination2.页码切换任务实现导入测试数据。依次启动Zookeeper服务、health_service_provider和health_backend。访问检查项管理页面。在检查项管理页面单击“>”按钮跳转到下一页。STEP01(3)测试页码切换2.页码切换任务实现每次按条件查询时,都需要根据输入的关键字重新查询检查项信息。在此指定调用handleCurrentChange()方法的传递参数currentPage的值为1,这是为了每次按条件查询时都指定当前页的页码为1。<el-buttonclass="dalfBut"@click="handleCurrentChange(1)">查询</el-button>STEP013.按条件查询检查项(1)定义按条件查询方法任务实现STEP01(2)测试按条件查询检查项依次启动Zookeeper服务、health_service_provider和health_backend。在浏览器中访问http://localhost:82/pages/checkitem.html。在查询条件输入框中输入查询条件,单击“查询”按钮进行条件查询。3.按条件查询检查项编辑检查项2-3任务描述每个检查项右侧都有一个“编辑”按钮,单击“编辑”按钮弹出编辑检查项对话框。在编辑检查项对话框中修改检查项的信息后,单击“确定”按钮即可完成检查项的编辑操作。在检查项管理过程中,如果检查项的信息填写错误或者不完善时,可以通过编辑检查项的方式对检查项的内容进行变更或补充。编辑检查项可以分解成2个功能,分别是弹出带有检查项数据的编辑检查项对话框和完成检查项的编辑。任务分析任务分析(1)弹出编辑检查项对话框为checkitem.html页面的“编辑”按钮绑定单击事件,在单击事件触发后弹出编辑检查项对话框,然后提交查询检查项的请求。(2)接收和处理检查项查询请求客户端发起查询检查项的请求后,由CheckItemController类的findById()方法接收页面提交的请求,并调用CheckItemService接口的findById()方法查询检查项。(3)查询检查项数据在CheckItemServiceImpl类重写CheckItemService接口的findById()方法,并在方法中调用CheckItemDao接口的findById()方法从数据库中查询检查项数据。(4)展示查询检查项的结果由CheckItemController类中的findById()方法将查询检查项的结果响应回checkitem.html页面,checkitem.html页面根据响应结果在编辑检查项对话框中展示检查项信息。1.弹出带有检查项数据的编辑检查项对话框任务分析弹出带有检查项数据的对话框的实现过程1.弹出带有检查项数据的编辑检查项对话框任务分析(1)提交编辑检查项请求为checkitem.html页面编辑检查项对话框的“确定”按钮绑定单击事件,在单击事件触发后提交对话框中的数据。(2)接收和处理检查项编辑请求客户端发起编辑检查项的请求后,由CheckItemController类的edit()方法接收页面提交的请求,并调用CheckItemService接口的edit()方法编辑检查项。(3)编辑检查项数据在CheckItemServiceImpl类中重写CheckItemService接口的edit()方法,并在方法中调用CheckItemDao接口的edit()方法修改数据库中的检查项数据。(4)提示编辑检查项的结果由CheckItemController类中的edit()方法将编辑检查项的结果响应回checkitem.html页面,checkitem.html页面根据响应结果提示编辑成功或失败的信息。2.完成检查项的编辑任务分析2.完成检查项的编辑完成检查项编辑的实现过程任务实现<el-table-columnlabel="操作"align="center"><templateslot-scope="scope"><el-buttontype="primary"size="mini">编辑</el-button>

</template></el-table-column><!--编辑标签弹层--><divclass="edit-form"><el-dialogtitle="编辑检查项":visible.sync="dialogFormVisible4Edit">

</el-dialog></div><script>varvue=newVue({el:'#app',data:{

dialogFormVisible4Edit:false,//编辑表单是否可见},

})</script>STEP011.弹出带有检查项数据的编辑检查项对话框(1)弹出编辑检查项对话框

设置dialogFormVisible4Edit的值,进而改变:visible的属性值,进而控制对话框在页面中显示或隐藏查看checkitem.html页面中与“编辑”按钮和编辑检查项对话框相关的源代码。任务实现在checkitem.html页面中定义handleUpdate()方法,用于弹出带有检查项数据的编辑检查项对话框后回显数据。handleUpdate(row){this.dialogFormVisible4Edit=true;//显示编辑对话框//发送Ajax请求,根据id查询数据并回显数据axios.get("/checkitem/findById.do?id="+row.id).then((res)=>{if(res.data.flag){//为模型数据赋值,基于Vue数据绑定进行回显

this.formData=res.data.data;}else{//回显失败,返回错误提示信息this.$message.error(res.data.message);}});}STEP011.弹出带有检查项数据的编辑检查项对话框(1)弹出编辑检查项对话框任务实现为checkitem.html页面的“编辑”按钮绑定单击事件,并在单击时调用定义好的handleUpdate()方法,弹出编辑检查项对话框。<el-buttontype="primary"class="mini"@click="handleUpdate(scope.row)">编辑</el-button>STEP011.弹出带有检查项数据的编辑检查项对话框(1)弹出编辑检查项对话框任务实现在health_backend子模块的CheckItemController类中定义findById()方法,用于处理根据检查项id查询检查项的请求。@RequestMapping("/findById")publicResultfindById(Integerid){try{//调用服务接口findById(),返回检查项实体对象CheckItemcheckItem=checkItemService.findById(id);//调用服务接口成功,返回成功结果信息returnnewResult(true,MessageConstant.QUERY_CHECKITEM_SUCCESS,checkItem);}catch(Exceptione){e.printStackTrace();//调用服务接口失败,返回失败结果信息returnnewResult(false,MessageConstant.QUERY_CHECKITEM_FAIL);}}STEP01(2)实现查询检查项控制器1.弹出带有检查项数据的编辑检查项对话框任务实现在health_interface子模块的CheckItemService接口中定义findById()方法,用于根据检查项id查询检查项。//根据检查项id查询检查项publicCheckItemfindById(Integerid);STEP01(3)创建查询检查项服务1.弹出带有检查项数据的编辑检查项对话框任务实现在health_service_provider子模块的CheckItemServiceImpl类

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论