。

所有的不甘#xff0c;因为还心存梦想#xff0c;所以在你放弃之前#xff0c;好好拼一把#xff0c;只怕心老#xff0c;不怕路长。

后端1.2

三、设计数据库四、后端篇1、环境搭建2、SSM整合(配置文件编写)2.1

spring-dao.xml编写2.4

和水果库存进阶版这两个版本的区别是基础版是使用javaSE的知识进阶版是使用了Spring框架技术特别是合理的理由了IOC(控制反转)进行重构如果有兴趣的小伙伴可以点击对应链接查看详情。

而编写本篇文章目的是为了把页面以网页的形式展现出来。

而该篇文章适合人群是刚学会SSM框架但是不太懂怎么整合的小伙伴也适合不知道前端和后端怎么联调开发流程的小伙伴。

所以本系统会从0到1完整的开发流程进行讲解。

二、系统架构与需求分析

以上就是本系统使用到技术栈如果你已经学习了以上知识但是又不知道怎么运用那么本篇文章会一一进行讲解。

2、需求分析

由上图所示可以知道我们的项目是以maven的形式进行搭建的。

系统架构使用了常见的MVC三层架构进行实现。

本项目不是使用前后端分离的而是使用了模板引擎Thymeleaf进行页面渲染。

然后就是功能分析本系统实现了常见的CRUD功能。

就是查询水果库存包含分页新增水果库存修改水果库存和删除水果库存。

不过在开发功能之前我们要先做一些准备工作首先得有存数据的仓库—

三、设计数据库

本系统的数据库设计比较简单就一个表就可以了我这里把该表名为t_fruit该表设计如下

字段名数据类型非空自增键注释fidintyesyes主键编号fnamevarchar(20)yesno-名称priceintnono-单价fcountintnono-数量remarkvarchar(50)nono-广告词producervarchar(10)nono-产地SQL语句如下所示

CREATE

CHARSETutf8;通过以上的SQL语句就可以创建一个数据库和数据表现在有了数据表那么接下来就要开始从后端到前端的开发了。

我们先从后端开始

四、后端篇

后端的任何功能的开始都必须有一个环境所以我们先来搭建一个SSM环境出来。

本系统IDE使用IDEA进行开发而且是基于maven的具体搭建步骤如下

以上步骤就已经创建了一个基础maven项目。

接下来要配置一下maven

由于我们本系统的页面是网页的形式所以我们还需要在maven上添加web模块具体步骤如下

项目创建完毕之后那么就该导入依赖了和我们以前导入Jar包是一个意思。

之前是我们自己导入每一个Jar包但是有了maven之后那么我们只要导入对应的坐标依赖就行了至于Jar包maven会帮我们下载下来。

依赖导入是在pom.xml文件中进行编写本系统使用到的依赖有如下

dependencies!--

--dependencygroupIdorg.springframework/groupIdartifactIdspring-webmvc/artifactIdversion5.3.20/version/dependencydependencygroupIdorg.springframework/groupIdartifactIdspring-jdbc/artifactIdversion5.3.20/version/dependency!--

aop与事务

--dependencygroupIdorg.springframework/groupIdartifactIdspring-aspects/artifactIdversion5.3.20/version/dependencydependencygroupIdorg.springframework/groupIdartifactIdspring-tx/artifactIdversion5.3.20/version/dependency!--

mysql驱动

--dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.22/version/dependency!--

mybatis

--dependencygroupIdorg.mybatis/groupIdartifactIdmybatis/artifactIdversion3.5.7/version/dependency!--

mybatis与spring整合

--dependencygroupIdorg.mybatis/groupIdartifactIdmybatis-spring/artifactIdversion2.0.6/version/dependency!--

模板引擎Thymeleaf

--dependencygroupIdorg.thymeleaf/groupIdartifactIdthymeleaf-spring5/artifactIdversion3.0.15.RELEASE/version/dependency/dependencies!--

静态资源导出问题

--buildresourcesresourcedirectorysrc/main/java/directoryincludesinclude**/*.properties/includeinclude**/*.xml/include/includesfilteringfalse/filtering/resourceresourcedirectorysrc/main/resources/directoryincludesinclude**/*.properties/includeinclude**/*.xml/include/includesfilteringfalse/filtering/resource/resources/build到此本项目的构建已经初步完成了但是到真正编写功能模块还得配置几个文件才可以项目有些基础的小伙伴已经知道接下来要做的步骤了那就是整合SSM。

2、SSM整合(配置文件编写)

接下来就是SSM整合本质上就是进行一些xml配置文件的配置而我们需要怎么配置呢我们这里可以分成6个文件分别为database.properties(数据库参数文件)、mybatis-config.xml(Mybatis核心配置文件)、spring-dao.xml(Mybatis与Spring整合文件/持久层配置文件)、spring-service.xml(业务层配置文件)、spring-mvc.xml(SpringMVC控制层配置文件)和applicationContext.xml(整合配置文件)。

好了废话不多说直接开干~

2.1

jdbc.drivercom.mysql.cj.jdbc.Driver

serverTimezoneUTC

jdbc.urljdbc:mysql://localhost:3306/fruitdb?useSSLtrueuseUnicodetruecharacterEncodingutf8serverTimezoneUTC

自己本地数据库账号

3.0//ENhttp://mybatis.org/dtd/mybatis-3-config.dtd

configuration!--

valueSTDOUT_LOGGING//settings!--

--!--

xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexmlns:contexthttp://www.springframework.org/schema/contextxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/context

https://www.springframework.org/schema/context/spring-context.xsd!--

1、关联数据库配置文件

locationclasspath:database.properties/!--

2、配置数据源

这里的数据源使用Spring的没有使用第三方池化技术--bean

iddataSource

classorg.springframework.jdbc.datasource.DriverManagerDataSourceproperty

namedriverClassName

classorg.mybatis.spring.SqlSessionFactoryBeanproperty

namedataSource

valueclasspath:mybatis-config.xml//bean!--

4、配置dao接口扫描包动态的实现了DAO接口可以注入到Spring容器中

--bean

classorg.mybatis.spring.mapper.MapperScannerConfigurer!--

注入sqlSessionFactory

xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexmlns:contexthttp://www.springframework.org/schema/contextxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttps://www.springframework.org/schema/context/spring-context.xsd!--

进行注解开发

xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instance

xmlns:mvchttp://www.springframework.org/schema/mvcxmlns:contexthttp://www.springframework.org/schema/contextxsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/mvc

https://www.springframework.org/schema/mvc/spring-mvc.xsd

http://www.springframework.org/schema/context

https://www.springframework.org/schema/context/spring-context.xsd!--

1、注解驱动

location/WEB-INF/pages/css//mvc:resources

mapping/js/**

location/WEB-INF/pages/js//mvc:resources

mapping/images/**

location/WEB-INF/pages/images//!--

3、扫描包controller

classorg.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver!--

--property

value/WEB-INF/pages//property!--

--property

classorg.thymeleaf.spring5.SpringTemplateEngineproperty

nametemplateResolver

reftemplateResolver/property/bean!--

配置模板视图

classorg.thymeleaf.spring5.view.ThymeleafViewResolverproperty

nametemplateEngine

reftemplateEngine/property/bean

/beans2.6

xmlnshttp://www.springframework.org/schema/beansxmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsd!--

导入dao、service、mvc配置

resourceclasspath:spring-dao.xml/import

resourceclasspath:spring-service.xml/import

resourceclasspath:spring-mvc.xml/

/beans本文件配置的目的是为了把三个文件整合起来变成一个文件到后面启动项目的时候利用Tomcat初始化配置把该文件作为接口加载即可。

3、web.xml文件配置(重点)

☆☆☆本文件特别重要如果本文件没有配置那么当访问页面的时候会出现404。

原因是本配置是暴露给浏览器的。

本文件是在WEB-INF目录下具体配置如下所示

?xml

xmlnshttp://xmlns.jcp.org/xml/ns/javaeexmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/javaee

http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsdversion4.0!--

DispatchServlet

--servletservlet-namespringmvc/servlet-nameservlet-classorg.springframework.web.servlet.DispatcherServlet/servlet-classinit-param!--

--param-namecontextConfigLocation/param-nameparam-valueclasspath:applicationContext.xml/param-value/init-param!--

当值为0或者大于0时表示容器在应用启动时就加载这个servlet;反则需要时加载

--load-on-startup1/load-on-startup/servlet!--

映射路径

--servlet-mappingservlet-namespringmvc/servlet-nameurl-pattern//url-pattern/servlet-mapping!--

--filterfilter-nameencodingFilter/filter-namefilter-classorg.springframework.web.filter.CharacterEncodingFilter/filter-classinit-paramparam-nameencoding/param-nameparam-valueutf-8/param-value/init-param/filter!--

--filter-mappingfilter-nameencodingFilter/filter-nameurl-pattern/*/url-pattern/filter-mapping!--

Session

--session-configsession-timeout15/session-timeout/session-config

/web-app到此本系统的所有配置就已经完毕SSM整合也到此完成了接下来就可以开始后端功能的编写了。

4、持久层(Mapper)

我们先来编写持久层也就是操作数据库的功能不过在编写之前我们得先创建一个与数据表对应的实体类

具体代码如下

producer;}//getting、settingpublic

Integer

org.apache.ibatis.annotations.*;

import

org.apache.ibatis.session.RowBounds;

import

数据库实现了id自增策略不用写id;字段名要和数据库一致不用写别名

*/Insert(insert

t_fruit(fname,price,fcount,remark,producer)

values

(#{name},#{price},#{count},#{remark},#{producer}))int

addFruit(Fruit

price#{price},fcount#{count},remark#{remark},producer#{producer}

where

fruit);//根据水果名称查询水果信息Select(select

fid

到了业务层由于本系统的业务还是比较简单的直接调用持久层就可以了

package

org.apache.ibatis.session.RowBounds;

import

org.springframework.stereotype.Service;

import

org.springframework.transaction.annotation.Propagation;

import

org.springframework.transaction.annotation.Transactional;

import

RowBounds((pageNum-1)*5,5);return

fruitMapper.findAll(rowBounds);}/***

获取水果库存总数量*

return*/OverrideTransactional(propagation

rollbackFor

fruitMapper.addFruit(fruit);return

***;}/***

fruit*/OverrideTransactional(propagation

Propagation.REQUIRED,rollbackFor

int

fruitMapper.findByName(fruitName);return

fruit;}

org.springframework.stereotype.Controller;

import

org.springframework.web.bind.annotation.*;

import

return*/RequestMapping(/index)public

String

return*/GetMapping(/all/{pageNum})public

String

fruitService.fruitPages(pageNum);model.addAttribute(fruitList,fruitList);//查询总条数int

count

fruitService.fruitCount();model.addAttribute(count,count);//页数model.addAttribute(pageNum,pageNum);System.out.println(model.getAttribute(fruitList));return

food;

application/json;charsetUTF-8防止响应数据乱码*

return

application/json;charsetUTF-8)ResponseBodypublic

String

添加水果库存成功;//在添加水果库存之前查询一下水果名称是否唯一Fruit

fruit1

fruitService.findByName(fruit.getName());if

(fruit1

fruitService.saveFruit(fruit);if

(***

application/json;charsetUTF-8)ResponseBodypublic

String

null){//在添加水果库存之前查询一下水果名称是否唯一Fruit

dbFruit

fruitService.findByName(fruit.getName());System.out.println(传进来:fruit\n数据库中:dbFruit);//校验水果名称是否已注册但排除本身if

(dbFruit

fruit.getId()){//存在//响应提示语给前端msg

msg;}//校验完毕进行修改操作int

fruitService.updateFruit(fruit);if

(***

水果库存修改成功;}System.out.println(水果fruit);return

msg;}/***

application/json;charsetUTF-8)ResponseBodypublic

String

后端代码已经编写完毕了接下来就是前端页面了我们先把页面结构编写出来而前端的所有代码在本项目中是存放在web\WEB-INF\pages本系统页面一共有2个分别是index首页和food主体页面具体HTML页面代码如下所示~

1.1

charsetUTF-8title水果库存系统/titlestyleh1{padding:

5px

th:href{/fruit/all/1}进入水果库存详情页/a/h2

/body

xmlns:thhttp://www.thymeleaf.org

Thymeleaf的声明有语法提示th开头的都是Thymeleaf语法

html

xmlns:thhttp://www.thymeleaf.orgheadmeta

charsetUTF-8meta

initial-scale1.0title水果库存/title!--

路径前面要加/

th:class|name${item.count}|西瓜/tdtd

th:class|price${item.count}|3/tdtd

th:class|count${item.count}|60/tdtd

th:class|remark${item.count}|描述/tdtd

th:class|producer${item.count}|产地/tdtdimg

src./images/del.jpg

th:if${#lists.isEmpty(fruitList)}td

colspan6对不起暂无数据/td/tr/tbodytfoottrtd

stylecolor:

th:text${pageNum}1/spannbsp;页nbsp;nbsp;nbsp;nbsp;/spana

th:if${pageNum1}

th:href{/fruit/all/{pageNum}(pageNum${pageNum}-1)}上一页/aa

th:if${pageNum1}

th:disabledtrue上一页/aspannbsp;nbsp;|nbsp;nbsp;/spana

th:href{/fruit/all/{pageNum}(pageNum${pageNum}1)}下一页/aspannbsp;nbsp;总条数strong

stylecolor:

th:text${count}/strong/span/td/tr/tfoot/tablehr

colorblack/div

idadd_fruit_tbltrtd名称/tdtdinput

typetext

idcount//td/trtrtd广告词/tdtdinput

typetext

idremark//td/trtrtd产地/tdtdinput

typetext

classaddBtn//th/table/div/div/div

/body

/html【说明】以上都是使用了Thymeleaf模板引擎我们再把CSS样式编写完毕就可以访问一下页面试试效果了。

2、页面样式CSS

0;background:url(../images/bg.jpg)

center

center;line-height:45px;margin-left:

9%;border-radius:

以上就是编码到目前为止的页面效果了数据的展示是我已经在数据库中添加了一些数据然后由于我们使用Thymeleaf遍历后端传来的数据所以有数据显示也由此查询分页功能也就完成了。

3、JavaScript脚本编写

接下来就到最后一步了那就是把剩下的新增、修改和删除功能利用Ajax技术与后端联调就可以了。

不过在联调之前我们在本系统的数据展示模块利用js写点附属功能上去需求是这样的**当鼠标悬浮到对应的的行的时候会更换颜色当鼠标移除的时候会变回原本的颜色。

**具体实现如下所示

//当鼠标悬浮时显示背景颜色

alert(event.srcElement.tagName)//

alert(window.event.srcElement.tagName);//判断是否存在该元素if

(window.event

window.event.srcElement.tagName

TD)

td.parentElement;//设置样式tr.style.backgroundColor

tds

window.event.srcElement.tagName

TD)

td.parentElement;//设置样式tr.style.backgroundColor

rgb(237,

th:src{/js/jquery-3.3.1.min.js}/script然后我们在到html对应的标签中添加鼠标悬浮和移除事件

!--

onmouseover鼠标悬浮显示背景颜色onmouseout鼠标移除清除背景颜色

--tr

addFruit(){$(#addOrUpdateBtn).click(function(){if

false;$.ajax({url:

$(#producer).val()},dataType:text,

//后端是String返回所以为文本形式表示json格式success:function

(data){//响应数据alert(data);//页面刷新location.reload();}});}});

}//在发起请求之前进行数据校验

$(#idid).val();//调用修改水果库存函数updateFruit(id,fid1);break;case

2://获取水果id值let

$(#idid).val();updateFruit(id,fid2);break;case

3://获取水果id值let

$(#idid).val();updateFruit(id,fid3);break;case

4://获取水果id值let

$(#idid).val();updateFruit(id,fid4);break;case

5://获取水果id值let

$(#idid).val();updateFruit(id,fid5);break;}

}//修改水果库存

updateFruit(id,fid){//获取水果库存各属性值$(#name).val($(.nameid).text());$(#price).val($(.priceid).text());$(#count).val($(.countid).text());$(#remark).val($(.remarkid).text());$(#producer).val($(.producerid).text());//把‘添加’按钮值改为‘修改’$(#addOrUpdateBtn).val(修改);//点击修改按钮进行相应操作$(#addOrUpdateBtn).click(function

(){if

$(#producer).val()},dataType:text,

//后端是String返回所以为文本形式表示json格式success:function

(data){//响应数据alert(data);//页面刷新location.reload();}});}return

false;})

showData(this.id)把id值传参这里就可以实现数据显示了

th:id${item.count}

onclickshowData(this.id)/tr我们来看一下功能效果

3.2

(result){//确定执行删除操作$.ajax({url:

get,data:

$(#idnum).val(),},dataType:text,

//后端是String返回所以为文本形式表示json格式success:function

(data){//响应数据alert(data);//页面刷新location.reload();}});}else

{//

οnclickdelFruit(this.id)传入的参数是id值

--img

至此本系统的功能实现完毕了。

本系统是使用了后端SSM框架模板引擎Thymeleaf前端使用了HTMLCSSJQuery技术。

另外本人技术有限可能在本篇内容中有不足之地各方道友可私聊畅谈一二~~

最后关于本系统使用到的静态资源可以可以使用自己的也可以从源码中获取。

本系统的源码已上传到码云。

链接为https://gitee.com/originnan/fruit