如何使用ssm实现布卡维纳红酒网页的实现

@TOC

ssm414布卡维纳红酒网页的实现+jsp

第一章 绪论

1.1 研究背景

时代总是在进步的，自从进入了信息时代，面对大量的不同种类的数据，仅仅依靠有限的人力去处理，显然是不行的，毕竟人工处理大量的数据会耗费较长时间，而且数据的错误率也会提升，另外，在对数据进行检索时，也是一件既耗费体力，又耗费时间的事情。因此，引进当前的信息技术开发的系统去解决传统管理模式带来的各种困扰成为一种趋势。本次打算开发布卡维纳红酒网页，让布卡维纳红酒展示信息的管理完全依赖于计算机，包括录入信息，维护信息等都在计算机上操作，简单方便，在优化信息管理流程的基础上，进一步实现信息管理的规范化和系统化。也让布卡维纳红酒展示信息的管理人员从之前的繁琐工作中解脱出来，让他们提升自身素质，提高自身管理能力，把布卡维纳红酒网页的作用发挥到最大，从而产生更大的效益。

1.2 研究意义

布卡维纳红酒网页的出现，可以解决传统模式带来的问题，比如传统模式不能批量处理数据，处理效率低，耗时长，浪费大量人力和物力，数据易出错等问题。布卡维纳红酒网页是基于计算机进行数据的处理，则可以短时间内批量完成数据的管理，就连基本的数据录入，更改错误的数据，统计数据等操作要求都可以轻松完成，这样的系统的运用可以减少很多繁琐的工作量，让数据的管理人员提升效率，节省数据处理投入的资金和时间。同时，布卡维纳红酒网页本身就有配套的数据库，用于保存系统的后台数据，对于数据保存的容量则是传统模式不能相比的，在数据安全性上，也有相应的加密技术提供保护，所以数据泄露和被人窃取都不是易事。另外，布卡维纳红酒网页对操作人员录入的数据进行实时检验，可以及时反馈错误信息，使录入数据的准确率得到提高，也充分保证了系统数据的可靠性。总之，布卡维纳红酒网页值得信赖，可以完成数据的高效率处理工作。

1.3 研究内容

本文对布卡维纳红酒网页的描述，将按照如下章节进行。

第一章：根据前期的调研，和对参考资料的分析总结，明确系统研究背景意义；

第二章：通过对当前开发技术的分析，选定开发本系统的开发语言和工具；

第三章：在用户需求的基础上，结合相似系统的功能，分析并确定本系统的功能，分析本系统开发可行性问题；

第四章：在第三章的基础上，进一步细分系统功能，要设计出系统各个模块的功能，同时，对配套数据库进行设计；

第五章：在第四章基础上，要运用编程技术，全面实现布卡维纳红酒网页的功能；

第六章：检测制作的布卡维纳红酒网页功能是否运行正常，性能是否达标；

第二章 开发环境与技术

布卡维纳红酒网页作为一款应用软件，其开发是需要搭建的一定的编程环境，对使用的工具和技术都有相应要求，接下来就介绍本系统中运用到的工具和技术。

2.1 JSP技术

JSP技术是有一定的规则的，首先JSP里可以用Java语言写在标记内，可以混合HTML语言以及XHTML语言代码进行混合编辑，并且进行书写Java语句或者用其他标签，用标签的话都需要用特殊的符号进行描述，编写Java语言的代码需要用特殊符号标记起来，用<%作为开始，中间书写Java语句，以%>作为结束标签，必须是有开头和结尾的，不然会编译出错的，必须是成对出现也必须有闭合的。JSP可以处理表单数据，因为JSP也算是一种Servlet，也可以把数据提交给Servlet处理也是可以的。其实对用户来讲，实现动态数据的网页就可以了，但是后台也是需要对数据进行一些加工的，JSP技术正好也是可以做到数据加工的。JSP可以直接通过JDBC来操作数据库，对数据进行页面展示，也可以记录用户的访问的信息和选择信息等，并且可以使用JavaBean组件，还可以通过Session在不同的网页上传递信息和共享相关的信息。动态网页有很多规范和标准，比如CGI规范或者ISAPI规范这些。标准是固定的，但是JSP技术是比CGI规范更加强壮。比如JSP性能对比上超过CGI，更优秀，原因是因为可以在一个JSP文件里嵌入很多元素，如果元素一样多的话，用CGI就变成了需要很多文件，而受制于硬盘读写效率的影响，用时少就是优秀，能耗少就是强劲。JSP是完整的应用平台Java EE 中不可缺少的一部分。

2.2 MySQL数据库

自从学习了关系型数据库的语法之后，也逐渐的了解了一些属于关系型数据库范畴的几个常见的数据库。比如Oracle数据库和MySQL数据库，以及Microsoft SQL Server数据库和DB2数据库这几种。在这几个关系型数据库之中，对MySQL数据库印象最好。首先MySQL数据库有各种平台的服务器版本，这样就能实现跨平台运行以及移植。其次，MySQL数据库可以进行网络连接，这样可以对本地账户和应用程序账户进行有效的区分，这样在数据库的安全性上面也有很好的保证。再次，MySQL数据库在中小数据量的运行效率上面比其他数据库占用服务器资源最少，所以很多企业都选择了MySQL数据库作为首选。在开发上面，各种图形界面管理工具也是层出不穷，并且还比较好用，从各个方面综合考虑对比的情况下，选择了MySQL数据库作为应用程序所选的数据库软件。

2.3 Java语言

Java语言发展有25年多了，在互联网行业经过这么多年的发展，还依然在市场的占有率上有半壁江山，依然受到很多程序员的喜爱，好多从业人员进行学习，随着互联网从业人员的增加，并没有降低Java语言的江湖地位，算是一个常青藤。Java语言学习很简单，当然这是针对于前辈C++来讲的，C++语言相当的强悍。Java取消了很多C++特征，比如go to这些语句，还有取消了主文件，让所有的文件都是类，类里都是数组和各种对象，还让Java自己处理各种对象的引用和回收，让开发人员只需要创建对象，使用对象，编辑代码逻辑，不需要关注性能方面，让数据的各种存储交给Java自己处理，可以花更多的时间研究应用程序之间的关系，让开发变得更专注，就像赛车的驾驶员一样，只需要了解各种车辆的性能，并且进行操作，不需要研究轱辘如何制造，这样让程序开发更加的细化。

2.4 SSM框架

SSM框架是三个框架的合称，分别是Spring框架和SpringMVC框架以及MyBatis框架。三个框架随着时间的发展，越来越变成了当今Java语言的开发主流，帮助程序开发人员专注于业务逻辑以及配置相关操作，能自动生成的都支持自动生成，避免了很多耦合性出错，通过控制反转和依赖注入，让程序开发变成配置文件开发，简单明了，让创建的Java对象都能通过自身来进行创建。面向切面的操作让程序开发也变成了部门协同，公共事务都交给了SpringAOP来操作，让程序开发变得更加专注。MyBatis越来越智能，可以用配置文件和SQL语句混合开发，可以像操作Java语言一样操作数据库。

第三章 系统分析

通常，对于系统的开发并不是一朝一夕就可以完成的，它需要经历很多的步骤，其中系统分析就是其中的一个，接下来还会有系统的设计和实现，最后一个步骤是系统测试。

3.1可行性分析

一个系统能不能完成开发，以及该系统是否可以带来收益等，都是需要提前分析的。而可行性研究就是分析这些问题，并得出结论，这个环节对项目是否开展起着重要作用。

3.1.1运行可行性分析

首先本系统的运行环境都是当前使用率比较高的软件，通过网络可以下载安装，其次本系统对于运行设备的要求比较低，满足4个G的内存的电脑都可以使用。而当下硬件设备的升级，几乎大部分电脑都是内存8个G，所以运行设备也符合要求。最后，本系统不用于处理繁多的类似商业软件的信息内容，占用的空间比较小。一般的电脑都可以运行。

3.1.2经济可行性分析

任何一个项目在开发前，其在经济上的可行性问题是值得研究的，本项目布卡维纳红酒网页，其在数据的处理上要求比较简单，并且其管理的数据量比较小，因此，该项目的开发周期并不会耽误很长时间，项目的开发需要支出的费用也不高。加上该项目需要管理的数据量较少，对于性能条件一般的计算机都可以满足项目的运行要求，从后期管理成本上来看，需要投入该项目的管理费用也不高。但是该项目一旦投入使用，会给使用者带来一定的收益，也能节省信息管理成本，如此，这样一个低成本投入，但能够带来大量收益的项目布卡维纳红酒网页在经济上是可行的。

3.1.3技术可行性分析

互联网的发展非常迅速，跟互联网挂钩的程序也逐渐被广泛关注，尤其是当下被大众熟知的B/S结构的程序，加上SSM技术的发展与成熟，如今可以很快速的使用模块化的代码开发一个基于B/S结构的项目程序。

通过系统运行，经济和技术上的可行性分析，对布卡维纳红酒网页的开发确实具有必要性，让管理的信息都计算机化，可以缩短在数据处理上消耗的时间，提高工作效率。

3.2系统流程分析

本系统在完成数据的处理时，其内部都设置了相应的处理流程，比如注册时，数据的最终去向以及对每项数据的判断等，这些都是提前进行了分析的，然后在编码时，把这种判断逻辑写入了系统中。让系统在面对同样的事务处理需求时，执行对应的逻辑处理规则。

目前很多的系统除了管理员的登录信息是编码时提前写入的信息，其他的用户的资料大多都是通过注册把资料写入系统中，让数据库中保存已注册用户的资料。注册功能其对应的流程如下。只有每项必填数据都符合要求，用户的资料才会被数据库保存。

图3.1用户注册流程图

在本系统的数据库中，所有用户的资料都会单独保存在一张数据表里面，也就意味着这张用户数据表里面的用户名和密码都是可以进行本系统的登录功能的，其登录流程如下。用户提交的登录信息都是必填项，不能漏掉，数据格式和内容都要准确才可以进入功能操作区。

图3.2 用户登录流程图

本系统中保存的数据都是具有参考价值的，所以在录入数据时，要确保数据的准确性，其录入数据的流程见下图。这些数据都是经过检验合格之后才会被数据库保存。

图3.3 信息添加流程图

3.3 系统性能分析

在进行系统分析期间，有一个很重要的环节，就是需要对系统的性能进行分析。可以说系统的性能跟系统的质量是成正比关系，也就是说系统性能也好，系统质量越可靠，系统性能不好，就代表着系统的质量不行，也就意味着系统在实际中的使用中，会出现中途崩溃，或者系统的数据容易泄露等风险。所以，提前进行系统性能的分析，就可以在系统设计实现中，避免出现上述风险问题。

描述系统性能的特征有可扩展性，易维护性，安全性等。

3.3.1系统安全性

一个系统是否安全，直接影响用户的使用。系统安全体现在数据上的保密性。通常，很多系统都设置了登录功能，或针对游客设置的注册功能等，无论是登录中需要使用的账号密码，还是用户注册产生的私密数据等都是系统中的宝贵资源，一旦数据泄露，一些非法人员就会从中谋取利益，或通过用户注册留下的电话骚扰用户，给用户带来身心上的伤害。所以一般针对此类关键数据，通常会直接进行加密保存。让数据始终保持安全状态。

3.3.2系统可扩展性

面对当前用户的使用需求设计的系统并不一定适用于未来。所以需要使用前瞻性的眼光来看待系统，提前预留好空间，方便在今后对系统进行升级，或者扩充系统功能。因此，系统需要具备可扩展性的特性。

3.3.3系统易维护性

系统在保持长时间使用中，难免会出现一些问题。所以在处理这些问题时，可能会对系统进行部分改动。而系统改动的难易程度就体现出系统是否具备易维护性，通常一个易于维护的系统，在面对系统改动时，将会很容易，而且也会节省时间和资金。

3.4系统功能分析

本系统的功能不会像市场上的商业程序一样具备复杂的功能，其提供的功能只能满足目标用户的一般的系统内容浏览和简单的信息处理功能。

本系统确定设置管理员权限和用户权限。

设置的管理员功能可以见下图用例图。管理员管理产品，管理产品类型，管理公告和用户。

图3.4 管理员用例图

设置的用户功能可以见下图用例图。用户查看产品，收藏产品，对产品发布留言信息，查看公告。

图3.5 用户用例图

第四章 系统设计

设计时，通常把用户需求作为对系统功能和数据库的设计重点，殊不知，系统设计时，注重用户体验也是比较关键的设计内容。比如一个系统已经实现了用户需要的功能，但是其界面布局比较混乱，同时界面中各个元素的搭配也不合理，这样一旦访问者访问系统，在短时间内无法找到需要的信息，就容易产生视觉疲劳，直接影响用户对系统的使用。所以，系统设计时，也需要关注用户的使用体验。由于用户之间的差别，比如教育程度，职业，地区等因素的不同，用户产生的行为也会存在差异，所以设计人员既要考虑用户之间的行为差异，也要考虑他们之间的共性。在尊重用户习惯的基础上，进行页面设计布局。达到用户可以多次访问系统的目的。

4.1布局设计原则

进行页面的布局，就要划分系统的各个模块，然后根据这些模块的重要程度进行布局，也需要关注用户比较在意的关键信息，利用合理的布局方式，传达出系统想要表达的信息内容，也让用户快速高效地获取需要的信息。布局虽然是页面设计的核心，但是也要讲究页面内容的协调性，统一性和均衡性。

布局设计也要考虑基本原则，接下来的内容就对此进行阐述。

第一点：参考系统需求，把系统的内容进行划分，按照重要程度的不同进行布局，并把相似或相近的信息内容集中展示在同一个区域，让访问者可以更流畅的阅读信息；

第二点：页面中比较重要的区域是靠上靠左的位置，所以这部分区域应该放置系统中比较重要的模块，毕竟这部分区域可以吸引用户眼球，让用户进入页面中，就可以发现需要的信息。对于一些次要的模块，则可以放置在页面中靠下和靠右的位置。如此设计安排，才可以发挥出页面设计实用性的特点；

第三点：根据用户习惯设计页面，虽然大部分用户具有操作上的共性特征，但他们之间还是存在区别，常见的影响用户操作习惯的因素有：年龄，学历，职业，性别等。所以设计时在考虑用户的共性特征时，也需要尽量尊重用户的不同习惯。

4.2功能模块设计

下图为管理员的功能设计，管理员管理产品，管理产品类型，管理公告和用户。

图4.1 管理员功能结构图

下图为用户的功能设计，用户查看产品，收藏产品，对产品发布留言信息，查看公告。

图4.2 用户功能结构图

4.3数据库设计

布卡维纳红酒网页选用关系数据库作为程序的后台支持，之所以选择关系数据库主要还是因为它易于使用，而且也方便进行数据维护，尤其是提供强大的SQL查询语言。还有就是关系数据库采用的二维表模型，跟现实生活中的逻辑非常贴近，与网状模型，层次模型相比较，可以发现还是关系模型更容易被接受。

4.3.1数据库E-R图

这部分内容需要根据用户需求当中的数据信息，进行拆分，并仔细分析，要从这些数据中标识出E-R模型需要使用的数据，其中有实体，有实体具备的属性，有基于实体间的关系。在获取了这些数据之后，就可以使用认可度比较高的Visio工具来完成E-R模型的建模。建模期间，只要注意Visio工具中，绘制E-R模型的各个符号代表的含义，并能够正确把实体，属性还有关系等数据完整表示就可以了。使用这样的方法可以节省数据库设计的时间，而且还可以直观表达设计的内容，以及它们之间存在的联系。

（1）设计的用户实体，其具备的属性如下图。

图4.4 用户实体属性图

（2）设计的产品实体，其具备的属性如下图。

图4.5 产品实体属性图

（3）设计的公告实体，其具备的属性如下图。

图4.6 公告实体属性图

4. 设计的管理员实体，其具备的属性如下图。

图4.7 管理员实体属性图

（5）设计的实体间关系如下图。

图4.8 实体间关系E-R图

4.3.2 数据库表结构

程序编码基本都是参照设计的方案进行的，包括设计的数据库也是对后面的编码有着一定的影响。通常来说，数据库就是保存数据，不管其设计得好坏，都不会丧失它本身的数据保存功能。设计数据库的好坏，其区别在于，对数据存取的效率。设计比较好的数据库，在数据查询，存储以及更新上，可以快速做出响应。设计不好的数据库，很多时候不仅会延长数据的处理时间，还会容易出错。因此，设计数据库也是程序开发中很关键的环节。

针对本系统设计的数据库，按照数据库设计的原则，即设计数据库的三大范式进行。各个数据表的结构都是根据E-R模型进行的物理转化，对于一些细节问题，包括表的命名，字段的命名，字段类型和长度的设计等都比较规范化，这样做的目的也是方便后期系统编程。

表4.1 产品信息表

字段	类型	空	默认	注释
id (主键)	int(11)	否		主键
chanpin_name	varchar(200)	是	NULL	产品名称
chanpin_types	int(200)	是	NULL	产品类型
chanpin_jinghanlinag	int(200)	是	NULL	单瓶净含量
chanpin_baozhiqi	varchar(200)	是	NULL	保质期
chanpin_peiliao	varchar(200)	是	NULL	配料表
chanpin_changhe	varchar(200)	是	NULL	饮酒场合
chanpin_photo	varchar(200)	是	NULL	产品缩略图
chanpin_new_money	decimal(10,2)	是	NULL	产品单价
chanpin_content	text	是	NULL	产品简介
create_time	timestamp	是	NULL	创建时间

表4.2 产品收藏信息表

字段	类型	空	默认	注释
id (主键)	int(11)	否		主键
chanpin_id	int(11)	是	NULL	产品id
yonghu_id	int(11)	是	NULL	用户id
insert_time	timestamp	是	NULL	收藏时间
create_time	timestamp	是	NULL	创建时间

表4.3 产品留言信息表

字段	类型	空	默认	注释
id (主键)	int(11)	否		主键
chanpin_id	int(11)	是	NULL	产品id
yonghu_id	int(11)	是	NULL	用户id
chanpin_liuyan_content	text	是	NULL	留言内容
reply_content	text	是	NULL	回复内容
insert_time	timestamp	是	NULL	留言时间
create_time	timestamp	是	NULL	创建时间

表4.4 公告信息表

字段	类型	空	默认	注释
id (主键)	int(11)	否		主键
news_name	varchar(200)	是	NULL	公告名称
news_photo	varchar(200)	是	NULL	公告图片
news_content	text	是	NULL	公告详情
create_time	timestamp	是	NULL	创建时间

表4.5 管理员信息表

字段	类型	空	默认	注释
id (主键)	bigint(20)	否		主键
username	varchar(100)	否		用户名
password	varchar(100)	否		密码
role	varchar(100)	是	管理员	角色
addtime	timestamp	否	CURRENT_TIMESTAMP	新增时间

表4.6 用户信息表

字段	类型	空	默认	注释
id (主键)	int(11)	否		主键
username	varchar(200)	是	NULL	账户
password	varchar(200)	是	NULL	密码
yonghu_name	varchar(200)	是	NULL	用户姓名
sex_types	int(11)	是	NULL	性别
yonghu_id_number	varchar(200)	是	NULL	身份证号
yonghu_phone	varchar(200)	是	NULL	手机号
yonghu_email	varchar(200)	是	NULL	邮箱
yonghu_photo	varchar(200)	是	NULL	照片
create_time	timestamp	是	NULL	创建时间

第五章 系统实现

这部分工作主要由程序编制人员完成。通常在面对一个大型的系统时，这些程序编制人员就会明确分工，每个人都完成不同的功能模块，在用代码实现功能的基础上，提前预留好接口，最后才将他们已完成的功能模块通过接口进行组合。

5.1 管理员功能实现

5.1.1 产品信息管理

管理产品信息是管理员的功能。其运行效果图如下。管理员添加产品信息，查询产品信息，修改产品信息等操作都是在本页面完成。

图5.1 产品信息管理页面

5.1.2 用户管理

管理用户信息是管理员的功能。其运行效果图如下。管理员可以为忘记密码的用户重置密码，可以修改用户信息，包括修改用户照片，修改用户手机号等信息。

图5.2 用户管理页面

5.1.3 公告信息管理

管理公告信息是管理员的功能。其运行效果图如下。管理员具有发布公告信息的权限，可以对之前发布的公告的标题与内容进行更改，可以删除指定的公告信息。

图5.3 公告信息管理页面

5.2 用户功能实现

5.2.1 产品信息

查看产品信息是用户的功能。其运行效果图如下。用户可以在当前页面对产品进行收藏，可以在页面底端对本页面显示的产品进行留言。

图5.4 产品信息页面

5.2.2 公告信息

查看公告信息是用户的功能。其运行效果图如下。用户查看公告信息，可以根据公告名称查询公告，可以点击公告的标题进行其对应内容的查看操作。

图5.5 公告信息页面

5.2.3 修改个人信息

用户在当前模块能够修改个人信息，其运行效果图如下。用户检查个人资料是否在注册时登记错误，并对登记错误的数据，比如手机号，邮箱等数据进行更正。

图5.6 修改个人信息页面

ChanpinServiceImpl.java

package com.service.impl;

import com.utils.StringUtil;
import org.springframework.stereotype.Service;
import java.lang.reflect.Field;
import java.util.*;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import org.springframework.transaction.annotation.Transactional;
import com.utils.PageUtils;
import com.utils.Query;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;

import com.dao.ChanpinDao;
import com.entity.ChanpinEntity;
import com.service.ChanpinService;
import com.entity.view.ChanpinView;

/**
 * 产品信息 服务实现类
 */
@Service("chanpinService")
@Transactional
public class ChanpinServiceImpl extends ServiceImpl<ChanpinDao, ChanpinEntity> implements ChanpinService {

    @Override
    public PageUtils queryPage(Map<String,Object> params) {
        if(params != null && (params.get("limit") == null || params.get("page") == null)){
            params.put("page","1");
            params.put("limit","10");
        }
        Page<ChanpinView> page =new Query<ChanpinView>(params).getPage();
        page.setRecords(baseMapper.selectListView(page,params));
        return new PageUtils(page);
    }


}

CommonUtil.java

package com.utils;

import java.util.Random;

public class CommonUtil {
	/**
     * 获取随机字符串
     *
     * @param num
     * @return
     */
    public static String getRandomString(Integer num) {
        String base = "abcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < num; i++) {
            int number = random.nextInt(base.length());
            sb.append(base.charAt(number));
        }
        return sb.toString();
    }
}

YonghuController.java

package com.controller;


import java.text.SimpleDateFormat;
import com.alibaba.fastjson.JSONObject;
import java.util.*;
import org.springframework.beans.BeanUtils;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.context.ContextLoader;
import javax.servlet.ServletContext;
import com.service.TokenService;
import com.utils.StringUtil;
import java.lang.reflect.InvocationTargetException;

import com.service.DictionaryService;
import org.apache.commons.lang3.StringUtils;
import com.annotation.IgnoreAuth;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;

import com.entity.YonghuEntity;

import com.service.YonghuService;
import com.entity.view.YonghuView;
import com.utils.PageUtils;
import com.utils.R;

/**
 * 用户
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/yonghu")
public class YonghuController {
    private static final Logger logger = LoggerFactory.getLogger(YonghuController.class);

    @Autowired
    private YonghuService yonghuService;


    @Autowired
    private TokenService tokenService;
    @Autowired
    private DictionaryService dictionaryService;



    //级联表service


    /**
    * 后端列表
    */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isEmpty(role)){
            return R.error(511,"权限为空");
        }
        else if("用户".equals(role)){
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        }
        params.put("orderBy","id");
        PageUtils page = yonghuService.queryPage(params);

        //字典表数据转换
        List<YonghuView> list =(List<YonghuView>)page.getList();
        for(YonghuView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c);
        }
        return R.ok().put("data", page);
    }

    /**
    * 后端详情
    */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        YonghuEntity yonghu = yonghuService.selectById(id);
        if(yonghu !=null){
            //entity转view
            YonghuView view = new YonghuView();
            BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中

            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

    /**
    * 后端保存
    */
    @RequestMapping("/save")
    public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        logger.debug("save方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isEmpty(role)){
            return R.error(511,"权限为空");
        }
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity==null){
            yonghu.setCreateTime(new Date());
            yonghu.setPassword("123456");
            yonghuService.insert(yonghu);
            return R.ok();
        }else {
            return R.error(511,"账户或者身份证号或者手机号已经被使用");
        }
    }

    /**
    * 后端修改
    */
    @RequestMapping("/update")
    public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        logger.debug("update方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isEmpty(role)){
            return R.error(511,"权限为空");
        }
        //根据字段查询是否有相同数据
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .notIn("id",yonghu.getId())
            .andNew()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber())
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if("".equals(yonghu.getYonghuPhoto()) || "null".equals(yonghu.getYonghuPhoto())){
                yonghu.setYonghuPhoto(null);
        }
        if(yonghuEntity==null){
            //  String role = String.valueOf(request.getSession().getAttribute("role"));
            //  if("".equals(role)){
            //      yonghu.set
            //  }
            yonghuService.updateById(yonghu);//根据id更新
            return R.ok();
        }else {
            return R.error(511,"账户或者身份证号或者手机号已经被使用");
        }
    }



    /**
    * 删除
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Integer[] ids){
        logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
        yonghuService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }

    /**
    * 登录
    */
    @IgnoreAuth
    @RequestMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
        if(yonghu==null || !yonghu.getPassword().equals(password)) {
            return R.error("账号或密码不正确");
        }
        //  // 获取监听器中的字典表
        // ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();
        // Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");
        // Map<Integer, String> role_types = dictionaryMap.get("role_types");
        // role_types.get(yonghu.getRoleTypes());
        String token = tokenService.generateToken(yonghu.getId(),username, "yonghu", "用户");
        R r = R.ok();
        r.put("token", token);
        r.put("role","用户");
        r.put("username",yonghu.getYonghuName());
        r.put("tableName","yonghu");
        r.put("userId",yonghu.getId());
        return r;
    }

    /**
    * 注册
    */
    @IgnoreAuth
    @PostMapping(value = "/register")
    public R register(@RequestBody YonghuEntity yonghu){
    //    	ValidatorUtils.validateEntity(user);
        if(yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", yonghu.getUsername()).orNew().eq("yonghu_phone",yonghu.getYonghuPhone()).orNew().eq("yonghu_id_number",yonghu.getYonghuIdNumber())) !=null) {
            return R.error("账户已存在或手机号或身份证号已经被使用");
        }
        yonghu.setCreateTime(new Date());
        yonghuService.insert(yonghu);
        return R.ok();
    }

    /**
     * 重置密码
     */
    @GetMapping(value = "/resetPassword")
    public R resetPassword(Integer  id){
        YonghuEntity yonghu = new YonghuEntity();
        yonghu.setPassword("123456");
        yonghu.setId(id);
        yonghuService.updateById(yonghu);
        return R.ok();
    }

    /**
    * 获取用户的session用户信息
    */
    @RequestMapping("/session")
    public R getCurrYonghu(HttpServletRequest request){
        Integer id = (Integer)request.getSession().getAttribute("userId");
        YonghuEntity yonghu = yonghuService.selectById(id);
        return R.ok().put("data", yonghu);
    }


    /**
    * 退出
    */
    @GetMapping(value = "logout")
    public R logout(HttpServletRequest request) {
        request.getSession().invalidate();
        return R.ok("退出成功");
    }



    /**
    * 前端列表
    */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
        logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(StringUtil.isEmpty(role)){
            return R.error(511,"权限为空");
        }
        else if("用户".equals(role)){
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        }
        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = yonghuService.queryPage(params);

        //字典表数据转换
        List<YonghuView> list =(List<YonghuView>)page.getList();
        for(YonghuView c:list){
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(c);
        }
        return R.ok().put("data", page);
    }

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        YonghuEntity yonghu = yonghuService.selectById(id);
            if(yonghu !=null){
                //entity转view
                YonghuView view = new YonghuView();
                BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中

                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());
        Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
            .eq("username", yonghu.getUsername())
            .or()
            .eq("yonghu_phone", yonghu.getYonghuPhone())
            .or()
            .eq("yonghu_id_number", yonghu.getYonghuIdNumber());
            ;
        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
        if(yonghuEntity==null){
            yonghu.setCreateTime(new Date());
        yonghu.setPassword("123456");
        //  String role = String.valueOf(request.getSession().getAttribute("role"));
        //  if("".equals(role)){
        //      yonghu.set
        //  }
        yonghuService.insert(yonghu);
            return R.ok();
        }else {
            return R.error(511,"账户或者身份证号或者手机号已经被使用");
        }
    }





}

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">


<head>
    <%@ include file="../../static/head.jsp" %>
    <!-- font-awesome -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">

    <!-- layui -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
</head>
<style>

</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul id="navUl" class="navbar-nav mr-auto">
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">产品类型管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item">产品类型管理</li>
                        <li class="breadcrumb-item active">产品类型列表</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container">

            <div class="row">
                <!-- Widget Item -->
                <div class="col-md-12">
                    <div class="widget-area-2 lochana-box-shadow">
                        <h3 class="widget-title">产品类型列表</h3>
                        <div class="table-responsive mb-3">
                            <div class="col-sm-12">
                                <div class="layui-inline" style="margin-bottom: 10px;">
                                    产品类型名称
                                    <div class="layui-input-inline">
                                        <input type="text" id="indexNameSearch" style="width: 140px;" class="form-control form-control-sm"
                                               placeholder="编码名字" aria-controls="tableId">
                                    </div>
                                </div>

                                <div class="layui-inline" style="margin-left: 30px;margin-bottom: 10px;">
                                    <button onclick="search()" type="button" class="btn btn-primary">查询</button>
                                    <button onclick="add()" type="button" class="btn btn-success 新增">添加</button>
                                    <button onclick="deleteMore()" type="button" class="btn btn-danger 删除">批量删除</button>
                                </div>
                            </div>
                            <table id="tableId" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="no-sort" style="min-width: 35px;">
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" id="select-all"
                                                   onclick="chooseAll()">
                                            <label class="custom-control-label" for="select-all"></label>
                                        </div>
                                    </th>

                                    <th >产品类型编码</th>
                                    <th >产品类型名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="thisTbody">
                                </tbody>
                            </table>
                            <div class="col-md-6 col-sm-3">
                                <div class="dataTables_length" id="tableId_length">

                                    <select name="tableId_length" aria-controls="tableId" id="selectPageSize"
                                            onchange="changePageSize()">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    条 每页

                                </div>
                            </div>
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end">
                                    <li class="page-item" id="tableId_previous" onclick="pageNumChange('pre')">
                                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                                    </li>

                                    <li class="page-item" id="tableId_next" onclick="pageNumChange('next')">
                                        <a class="page-link" href="#">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
                <!-- /Widget Item -->
            </div>
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /Page Content -->
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>
<script language="javascript" type="text/javascript"
        src="${pageContext.request.contextPath}/resources/My97DatePicker/WdatePicker.js"></script>

<script>
    <%@ include file="../../utils/menu.jsp"%>
            <%@ include file="../../static/setMenu.js"%>
            <%@ include file="../../utils/baseUrl.jsp"%>
            <%@ include file="../../static/getRoleButtons.js"%>
            <%@ include file="../../static/crossBtnControl.js"%>
    var tableName = "dictionaryChanpin";
    var pageType = "list";
    var searchForm = {key: ""};
    var pageIndex = 1;
    var pageSize = 10;
    var totalPage = 0;
    var dataList = [];
    var sortColumn = '';
    var sortOrder = '';
    var ids = [];
    var checkAll = false;



    function init() {
        // 满足条件渲染提醒接口
    }

    // 改变每页记录条数
    function changePageSize() {
        var selection = document.getElementById('selectPageSize');
        var index = selection.selectedIndex;
        pageSize = selection.options[index].value;
        getDataList();
    }



    // 查询
    function search() {
        searchForm = {key: ""};

                     
        //编码名字
        var indexNameSearchInput = $('#indexNameSearch');
        if( indexNameSearchInput != null){
            if (indexNameSearchInput.val() != null && indexNameSearchInput.val() != '') {
                searchForm.indexName = $('#indexNameSearch').val();
            }
        }
                getDataList();
    }

    // 获取数据列表
    function getDataList() {
        http("dictionary/page", "GET", {
            page: pageIndex,
            limit: pageSize,
            sort: sortColumn,
            order: sortOrder,
            //本表的
            dicCode: "chanpin_types",//编码名字
            dicName: "产品类型名称",//汉字名字
            indexName:searchForm.indexName,
            //级联表的

        }, (res) => {
            if(res.code == 0) {
                clear();
                $("#thisTbody").html("");
                dataList = res.data.list;
                totalPage = res.data.totalPage;
                for (var i = 0; i < dataList.length; i++) { //遍历一下表格数据  
                    var trow = setDataRow(dataList[i], i); //定义一个方法,返回tr数据 
                    $('#thisTbody').append(trow);
                }
                pagination(); //渲染翻页组件
                getRoleButtons();// 权限按钮控制
            }
        });
    }

    // 渲染表格数据
    function setDataRow(item, number) {
        //创建行 
        var row = document.createElement('tr');
        row.setAttribute('class', 'useOnce');
        //创建勾选框
        var checkbox = document.createElement('td');
        var checkboxDiv = document.createElement('div');
        checkboxDiv.setAttribute("class", "custom-control custom-checkbox");
        var checkboxInput = document.createElement('input');
        checkboxInput.setAttribute("class", "custom-control-input");
        checkboxInput.setAttribute("type", "checkbox");
        checkboxInput.setAttribute('name', 'chk');
        checkboxInput.setAttribute('value', item.id);
        checkboxInput.setAttribute("id", number);
        checkboxDiv.appendChild(checkboxInput);
        var checkboxLabel = document.createElement('label');
        checkboxLabel.setAttribute("class", "custom-control-label");
        checkboxLabel.setAttribute("for", number);
        checkboxDiv.appendChild(checkboxLabel);
        checkbox.appendChild(checkboxDiv);
        row.appendChild(checkbox)


        //编码
        var codeIndexCell = document.createElement('td');
        codeIndexCell.innerHTML = item.codeIndex;
        row.appendChild(codeIndexCell);

        //类型
        var indexNameCell = document.createElement('td');
        indexNameCell.innerHTML = item.indexName;
        row.appendChild(indexNameCell);



        //每行按钮
        var btnGroup = document.createElement('td');

        //详情按钮
        var detailBtn = document.createElement('button');
        var detailAttr = "detail(" + item.id + ')';
        detailBtn.setAttribute("type", "button");
        detailBtn.setAttribute("class", "btn btn-info btn-sm 查看");
        detailBtn.setAttribute("onclick", detailAttr);
        detailBtn.innerHTML = "查看"
        btnGroup.appendChild(detailBtn)
        //修改按钮
        var editBtn = document.createElement('button');
        var editAttr = 'edit(' + item.id + ')';
        editBtn.setAttribute("type", "button");
        editBtn.setAttribute("class", "btn btn-warning btn-sm 修改");
        editBtn.setAttribute("onclick", editAttr);
        editBtn.innerHTML = "修改"
        btnGroup.appendChild(editBtn)
        //删除按钮
        var deleteBtn = document.createElement('button');
        var deleteAttr = 'remove(' + item.id + ')';
        deleteBtn.setAttribute("type", "button");
        deleteBtn.setAttribute("class", "btn btn-danger btn-sm 删除");
        deleteBtn.setAttribute("onclick", deleteAttr);
        deleteBtn.innerHTML = "删除"
        btnGroup.appendChild(deleteBtn)

        row.appendChild(btnGroup)
        return row;
    }


    // 翻页
    function pageNumChange(val) {
        if (val == 'pre') {
            pageIndex--;
        } else if (val == 'next') {
            pageIndex++;
        } else {
            pageIndex = val;
        }
        getDataList();
    }

    // 下载
    function download(url) {
        window.open(url);
    }

    // 渲染翻页组件
    function pagination() {
        var beginIndex = pageIndex;
        var endIndex = pageIndex;
        var point = 4;
        //计算页码
        for (var i = 0; i < 3; i++) {
            if (endIndex == totalPage) {
                break;
            }
            endIndex++;
            point--;
        }
        for (var i = 0; i < 3; i++) {
            if (beginIndex == 1) {
                break;
            }
            beginIndex--;
            point--;
        }
        if (point > 0) {
            while (point > 0) {
                if (endIndex == totalPage) {
                    break;
                }
                endIndex++;
                point--;
            }
            while (point > 0) {
                if (beginIndex == 1) {
                    break;
                }
                beginIndex--;
                point--
            }
        }
        // 是否显示 前一页 按钮
        if (pageIndex > 1) {
            $('#tableId_previous').show();
        } else {
            $('#tableId_previous').hide();
        }
        // 渲染页码按钮
        for (var i = beginIndex; i <= endIndex; i++) {
            var pageNum = document.createElement('li');
            pageNum.setAttribute('onclick', "pageNumChange(" + i + ")");
            if (pageIndex == i) {
                pageNum.setAttribute('class', 'paginate_button page-item active useOnce');
            } else {
                pageNum.setAttribute('class', 'paginate_button page-item useOnce');
            }
            var pageHref = document.createElement('a');
            pageHref.setAttribute('class', 'page-link');
            pageHref.setAttribute('href', '#');
            pageHref.setAttribute('aria-controls', 'tableId');
            pageHref.setAttribute('data-dt-idx', i);
            pageHref.setAttribute('tabindex', 0);
            pageHref.innerHTML = i;
            pageNum.appendChild(pageHref);
            $('#tableId_next').before(pageNum);
        }
        // 是否显示 下一页 按钮
        if (pageIndex < totalPage) {
            $('#tableId_next').show();
            $('#tableId_next a').attr('data-dt-idx', endIndex + 1);
        } else {
            $('#tableId_next').hide();
        }
        var pageNumInfo = "当前第 " + pageIndex + " 页，共 " + totalPage + " 页";
        $('#tableId_info').html(pageNumInfo);
    }

    // 跳转到指定页
    function toThatPage() {
        //var index = document.getElementById('pageIndexInput').value;
        if (index < 0 || index > totalPage) {
            alert('请输入正确的页码');
        } else {
            pageNumChange(index);
        }
    }

    // 全选/全不选
    function chooseAll() {
        checkAll = !checkAll;
        var boxs = document.getElementsByName("chk");
        for (var i = 0; i < boxs.length; i++) {
            boxs[i].checked = checkAll;
        }
    }

    // 批量删除
    function deleteMore() {
        ids = []
        var boxs = document.getElementsByName("chk");
        for (var i = 0; i < boxs.length; i++) {
            if (boxs[i].checked) {
                ids.push(boxs[i].value)
            }
        }
        if (ids.length == 0) {
            alert('请勾选要删除的记录');
        } else {
            remove(ids);
        }
    }

    // 删除
    function remove(id) {
        var mymessage = confirm("真的要删除吗？");
        if (mymessage == true) {
            var paramArray = [];
            if (id == ids) {
                paramArray = id;
            } else {
                paramArray.push(id);
            }
            httpJson("dictionary/delete", "POST", paramArray, (res) => {
                if(res.code == 0){
                    getDataList();
                    alert('删除成功');
                }
            });
        } else {
            alert("已取消操作");
        }
    }

    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

    //修改
    function edit(id) {
        window.sessionStorage.setItem('updateId', id)
        window.location.href = "add-or-update.jsp"
    }

    //清除会重复渲染的节点
    function clear() {
        var elements = document.getElementsByClassName('useOnce');
        for (var i = elements.length - 1; i >= 0; i--) {
            elements[i].parentNode.removeChild(elements[i]);
        }
    }

    //添加
    function add() {
        window.sessionStorage.setItem("adddictionary", "adddictionary");
        window.location.href = "add-or-update.jsp"
    }

    //报表
    function graph() {
        window.location.href = "graph.jsp"
    }

    // 查看详情
    function detail(id) {
        window.sessionStorage.setItem("updateId", id);
        window.location.href = "info.jsp";
    }


    $(document).ready(function () {
        //激活翻页按钮
        $('#tableId_previous').attr('class', 'paginate_button page-item previous')
        $('#tableId_next').attr('class', 'paginate_button page-item next')
        //隐藏原生搜索框
        $('#tableId_filter').hide()
        //设置右上角用户名
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username'))
        //设置项目名
        $('.sidebar-header h3 a').html(projectName)
        setMenu();
        init();

        getDataList();
                                                             
                        
    <%@ include file="../../static/myInfo.js"%>
    });
</script>
</body>

</html>

声明

本博客适用于广泛的学术和教育用途，包括但不限于个人学习、开发设计，产品设计。仅供学习参考，旨在为读者提供深入理解和学术研究的材料。