糖心vlogTXAPP.TV：基于HTML的中国传统面食介绍网站的搭建+vue

发布日期： 2024-10-12 阅读量： 作者： yebuyugz9B

当前的网络技术，软件技术等都具备成熟的理论基础，市场上也出现各种技术开发的软件，这些软件都被用于各个领域，包括生活和工作的领域。随着电脑和笔记本的广泛运用，以及各种计算机硬件的完善和升级，市面上的电脑和笔记本的性能都得到提升，可以支持的软件也逐渐增多，因此，在计算机上安装软件来发挥其高效地信息处理的作用，则很受人们的青睐。对于中国传统面食介绍网站信息来讲，通过手工形式处理，在面对庞大的信息数量时，就显得不适宜了，首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，为了解决上述问题，有必要建立中国传统面食介绍网站，来规范中国传统面食介绍网站信息管理流程，让管理工作可以系统化和程序化，同时，中国传统面食介绍网站的有效运用可以帮助管理人员准确快速地处理信息。 ## 1.2目的和意义中国传统面食介绍网站可以对中国传统面食介绍网站信息进行集中管理，可以真正避免传统管理的缺陷。中国传统面食介绍网站是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，中国传统面食介绍网站都可以轻松应对。所以，中国传统面食介绍网站的运用是让中国传统面食介绍网站信息管理升级的最好方式。它可以实现信息处理的便利化要求，还可以规范信息处理的流程，让事务处理成为管理人员手中的一件简单事，而不是之前手工处理时的困难事。尽管中国传统面食介绍网站具备较完善的功能，但是也需要管理人员利用闲暇时间提升自身素质以及个人能力，在操作中国传统面食介绍网站时可以最大化运用中国传统面食介绍网站提供的功能，让系统在满足高效率处理数据的同时，也能始终稳定运行，还可以确保数据的可靠性与数据处理的质量。 ## 1.3论文结构安排本文总共分为6个章节，每个章节都对本系统描述了不同的内容。接下来就对本文的研究内容进行阐述。

第1章：这个章节是论文的绪论部分。从选题的背景和意义的角度阐述即将开发的系统。

第2章：这个章节是技术介绍部分。从本系统需要运用的技术知识的角度阐述系统。

第3章：这个章节是系统分析部分。从分析系统可行性，分析系统功能和性能等角度阐述系统。

第4章：这个章节是系统设计部分。从系统功能结构的角度和数据库设计的角度阐述系统。

第5章：这个章节是系统实现部分。从系统功能模块运行效果的角度阐述系统。

第6章：这个章节是系统测试部分。从测试系统功能，系统测试方法的角度阐述系统。

开发中国传统面食介绍网站需要搭建编程的环境，也需要通过调查，对各个相关技术进行分析，选取适合本系统开发的技术与工具。 ## 2.1 MYSQL数据库题目确定了是一个应用程序之后，就开始按部就班的进行设计与分析。本课题是需要数据库作为数据管理工具以及数据载体，从程序功能分析到数据分析，选择合适的关系型数据库是当下所选择的重要环节。关系型数据库可选择余地不多，本身甲骨文公司的两个，微软的两个，IBM的一个，也就是这五个了，功能和差异都不影响数据库的选择，因为这些数据库都能实现应用程序功能所需的，那么只能从其他的方面来综合考虑哪种数据库更合适。作为开发使用的电脑硬件上来讲，还是大一的时候买的，当初并没有太多的钱买好一点的电脑，只是作为学习用的，所以经过这么几年的使用，电脑老化了，性能下降也比较厉害，还有好多需要用的学习资料，本身面临毕业，选择学校机房也不是一个长久的打算，选择一个数据库适合自己的老旧笔记本电脑作为学习开发当前的应用，是最重要的。综合考虑的结果就是选用MySQL数据库作为应用数据库，因为MySQL数据库体积小，占用内存小，不影响电脑上其他用的软件运行，并且不需要因为安装维护MySQL数据库而重装系统，最终选择的数据库就是MySQL数据库。 ## 2.2 Tomcat 介绍刚开始学习Java语言的时候，是不知道还有Tomcat这些东西的，各种语法各种输出在控制台进行输出结果，当Java网站开发的时候就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器，可以说是vue引擎或者一个容器，这些都是学术上或者原理上都比较贴切的，但是实际工作中Tomcat就是作为一个web服务器来用的，因为可以实现网站的发布和运行。因为工作原理的原因，Tomcat一般作为中小型企业和并发量并不突出的一种轻量级的服务器存在的，比如某些行业的应用系统，本身客户端就不多，需要的连接也不多，一般都用Tomcat的。Tomcat里面可以配置多个网站，配置文件后缀是config的文档，类似于XML的结构，比较清晰明了。每当Java发布新的版本的时候，Tomcat也会为了匹配Java的版本进行升级，目前Tomcat版本已经到版本10了。Tomcat标识是一只有点发黄的小猫咪，当Tomcat配置成功一般测试的时候能看到这个小猫咪就算是成功的，才能进行下一步的配置。Tomcat服务器在Java网站开发中还是挺合适的。 ## 2.3 vue技术 vue技术可以让初学者尽快上手进行编写动态网站，不需要变成高级的Java编程人员才可以书写代码，从学习的效率还有编写的效率上都有很大的提升。让着重于网页开发者与着重于后台逻辑开发进行分离合作开发变成了一种可能，降低了学习成本，不需要考虑程序运行解释编译阶段的话，vue网页本身就可以理解成一个普通的Servlet。vue结构上面，主要分为两个方面，一个是专属的vue引擎，通俗的讲就是可以实现vue编译后运行解释的一个东西，另一个就是web服务器。vue运行编译需要vue引擎和web服务器进行配合以及相互协作，当然他们的分工也是很明确的，这样才可以真正的运行起来。vue容器和引擎有Tomcat，这个Tomcat其实也还有Apache静态解释代码的部分，虽然看起来运行效果差不多，但是其实是两个截然不同的工具，在文件系统里目录也是不一样的，当然如果有特殊需求也是可以进行特殊的配置的，配置上面还是比较灵活的。虽然Tomcat部署了网站之后就可以运行网页让客户访问，但是Tomcat也只是vue引擎而非web服务器。比如JRUN和Resin都算是vue引擎，而web服务器的职责比较单一，就是处理客户端请求还有返回给客户显示请求处理后的数据而已。vue引擎则可以运行纯HTML编写的网站，也可以运行vue编写的动态网站，在效率上也只是比单纯的web服务器而已，但是从纯web服务器无法运行动态网站上来讲，vue引擎在功能上还是强大了很多，提升一点点效率反而算不了什么，对于必须实现的功能这些要素上，选择了vue技术。 ## 2.4 SSM框架 SSM框架不是一个框架的名称，而是三个框架的首字母缩写，分别是Spring框架、SpringMVC框架、MyBatis框架。是目前Java开发者中学习的首选框架。

Spring框架继承了JavaEE和EJB框架的优点，在依赖注入方面去掉了臃肿的配置，在面向切面方面也简化了代码数量，提高了代码品质。依赖注解进行配置，让所有的依赖都可以通过程序的自动配置和寻找，减少了代码写作数量，提高了代码阅读性。

SpringMVC框架与Spring只是一个公司的，在底层代码结构上可以复用，但是最主要的功能是对数据提交请求进行过滤，并且对数据的返回进行过滤，不限于页面是vue技术，也可以是其他的技术，更容易大型开发的集合技术。

MyBatis框架摒弃了Hibernate框架的配置臃肿方面，有时候Hibernate框架业务比较复杂的时候，代码量反而增加，性能下降，无法对底层的数据库语句优化，而MyBatis框架则有效的解决了这个方面，可以通过Java语句，对数据库操作语句进行优化，代码更简洁，执行效率更高，并且可以生产一些模块化代码，解决了开发过程中容易出现的实体映射方面的操作。

用户的需求以及与本系统相似的在市场上存在的其它系统可以作为系统分析中参考的资料，分析人员可以根据这些信息确定出本系统具备的功能，分析出本系统具备的性能等内容。 ## 3.1可行性分析尽管系统是根据用户的要求进行制作，但是在确定制作前，有必要分析其可行性。 ### 3.1.1操作可行性分析开发本系统需要用到的工具，本人都比较熟悉，因此可以使用这些工具，完整开发中国传统面食介绍网站。此外，中国传统面食介绍网站在功能上，基本都是完成信息的处理，涵盖了添加，修改，删除等，而且操作者面对的都是各个功能操作界面，并不是编码后台，所以一般的使用者都可以通过操作界面轻松完成信息的加工处理。因此，本系统操作可行。 ### 3.1.2经济可行性分析开发本系统，并没有投入资金购买开发工具。因为使用的开发工具都是事先在百度上下载安装在本人电脑上的，随着软件开发技术的成熟，系统功能实现的编码也都模块化，很容易通过各大软件开发类网站获取，并通过小部分代码改动，运用到本系统中，这些都不需要资金投入，同时，本系统开发的结构选用B/S，成本可以忽略不计。 ### 3.1.3技术可行性分析本系统需要的软件包括Eclipse，Tomcat，Mysql等，这些工具都接触并使用过，至于JAVA，B/S，vue，Html等技术，图书馆都有对应的书籍可以参考学习，加上平时课堂上学习的编程小项目对这些技术都有讲解，另外，本人也从课程设计作业中锻炼了编程能力。所以在技术上，可以完成中国传统面食介绍网站的编程开发。

通过上面的分析，已经确定了本系统在经济上的可行，本系统在技术上的可行，本系统在操作上的可行。由此，可以得出在目前的条件下，对于中国传统面食介绍网站的设计与实现是可以进行下去的。 ## 3.2系统流程分析本系统在处理数据时，其内部的操作逻辑也需要使用相应的工具进行展示。

在本系统的数据录入页面，对于操作者提供的每条数据都有相应的检验规则，比如数据信息不能有非法字符，或者本来应该是汉字的数据，不能用字母代替，还有对数据内容的长度等进行规范，这样的可以确保数据准确性的检验规则，在编码时，就提前编写好了。数据添加的流程见下图。如果数据已经保存进入数据库，则说明操作者提供的数据内容和格式都是符合要求的。

图3.1 添加信息流程图

很多时候，面对系统中的大量数据，难免会发现一些错误，因此需要及时纠正错误，本系统也提供数据后期的修改功能，其流程见下图。但是更新的数据也需要通过数据有效性检验。能够最终写入数据库则说明修改的数据是符合要求的。

图3.2 修改信息流程图

面对数据库里面大量数据，在系统的前台，要想快速获取需要的信息，就需要使用查询功能。其流程见下图。该功能需要操作者提前输入关键词，当系统的后台数据库保存了与关键词匹配的数据时，就会及时显示出来，整个过程耗时很短。

图3.3 查询信息流程图 ## 3.3系统性能分析分析中国传统面食介绍网站对于性能的需求主要还是从下面的5个角度来分析，它们分别是系统的实用性，系统的适应性，系统的易操作性，系统的安全性和系统的易维护性。

性能需求一：系统的实用性，本系统主要是让管理人员集中处理相关信息，可以提供方便快捷的信息添加，信息编辑等操作。在提高信息管理人员的工作效率的同时，也可以降低管理成本，并大大减少管理人员日常繁琐的工作量。

性能需求二：系统的适应性，本系统对于运行环境的要求并不高，可以被广泛运用在生活中。因为使用者只要在日常使用的计算机，或者是随身携带的笔记本上搭建运行环境都能运行本系统，另外系统提供的基础功能包括添加，修改等都能随时操作。

性能需求三：系统的易操作性，本系统提供的功能跟同类型系统一样，也具备简单的增删改操作，操作流程的逻辑也符合广大使用者的使用需求，使用者使用本系统管理数据会非常顺手。

性能需求四：系统的安全性，本系统在数据保存与管理上安全系数要达标，在设计与编码阶段，通过对用户进行权限分配，把系统的功能依照不同用户的角色进行分配，在首次进入系统时，通过编写安全验证的代码模块，引导不同用户进入不同的操作界面。还可以对用户基础信息包括登录的账号密码等进行加密保存，可以利用当下常用的技术成熟的MD5加密技术实现。

性能需求五：系统的易维护性，本系统在后期运行中，会根据使用者的操作，产生许多数据信息，为了便于维护，就要求这些数据可以通过工具从数据库中导出来，对于一些阶段性数据，可以进行批量删除，以此达到轻负荷处理数据的目标，让本系统可以变得更加轻盈。 # 第4章系统设计市面上设计比较好的系统都有一个共同特征，就是主题鲜明突出糖心。通过对页面简洁清晰的布局，让页面的内容，包括文字语言，或者视频图片等元素可以清晰表达出系统的主题。让来访用户无需花费过多精力和时间找寻需要的内容。 ## 4.1界面设计原则一般来说，大部分用户使用系统，有些是想从系统中获取需要的信息，有些则是使用系统提供的服务。所以，为了改善用户体验，提高系统的使用率，在对系统界面设计时，需要按照下面的原则进行。

第一点，对用户进行分析，了解用户使用系统的目的，以及使用系统的方式，考虑大部分用户的阅读习惯，设计Z字形或F型结构可以方便用户获取信息。

第二点：设计有效的导航，这个包括每个页面上都有导航条的显示，有时也可以在页面的底部设计导航条，当用户进入具体页面时，要设计相应的位置提示，在页面中比较特殊的位置，需要设计返回链接，可以返回上个页面，也可以返回首页等。

第三点：对整个系统要运用统一的设计方案，包括色彩方案的一致性，页面模板的相似性等，对相同操作和专业术语的描述在整个系统中也应该保持一致。

第四点：设计的界面要保证传达的内容清晰准确。要避免在同一个页面设计非常多的内容，另外可以准确对系统内容进行分类，把页面中用户视觉集中的位置，用来显示重要信息。

作为初学者，并没有那么多的设计经验，但是可以运用上面提到的界面设计原则设计出比较好的系统，可以让用户产生良好的使用体验。 ## 4.2功能结构设计为了让系统的编码可以顺利进行，特意对本系统功能进行细分设计，设计的系统功能结构见下图。

中国传统面食介绍网站

用户信息管理

新闻动态管理

面食文化管理

面食菜谱管理

用户信息修改

用户信息新增

面食菜谱添加

面食菜谱删除

面食菜谱修改

糕点专区添加

糕点专区修改

糕点专区删除

新闻动态添加

新闻动态删改

新闻动态删除

面食文化添加

面食文化修改

面食文化删除

论坛信息管理

论坛信息修改

论坛信息删除

论坛信息添加

糕点专区管理

图4.1 系统功能结构图

4.3 数据库设计

开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合，存储在一起的这些数据也是按照一定的组织方式进行的。目前，数据库能够服务于多种应用程序，则是源于它存储方式最佳，具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段时间的发展，从最初的不为人知，到现在的人尽皆知，其相关技术也越发成熟，同时也拥有着坚实的理论基础。

4.3.1 数据库概念设计

这部分内容需要借助数据库关系图来完成，也需要使用专门绘制数据库关系图的工具，比如Visio工具就可以设计E-R图（数据库关系图）。设计数据库，也需要按照设计的流程进行，首先还是要根据需求完成实体的确定，分析实体具有的特征，还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法，绘制本系统的E-R图。不管是使用亿图软件，还是Visio工具，对于E-R模型的表示符号都一样，通常矩形代表实体，实体间存在的关系用菱形符号表示，实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形，菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。

（1）下图是用户实体和其具备的属性。

图4.1 用户实体属性图

（2）下图是文章留言实体和其具备的属性。

图4.2 文章留言实体属性图

（3）下图是字典表实体和其具备的属性。

图4.3 字典表实体属性图

（4）下图是糕点专栏留言实体和其具备的属性。

图4.4 糕点专栏留言实体属性图

（5）下图是面食菜谱实体和其具备的属性。

图4.5 面食菜谱实体属性图

（6）下图是糕点专栏实体和其具备的属性。

图4.6 糕点专栏实体属性图

（7）下图是面食菜谱留言实体和其具备的属性。

图4.7 面食菜谱留言实体属性图

（8）下图是每日推荐实体和其具备的属性。

图4.8 每日推荐实体属性图

（9）下图是新闻动态实体和其具备的属性。

图4.9 新闻动态实体属性图

（10）下图是社区信息实体和其具备的属性。

图4.10 社区信息实体属性图

（11）下图是面食文化实体和其具备的属性。

图4.11 面食文化实体属性图

（12）下图是论坛信息实体和其具备的属性。

图4.12 论坛信息实体属性图

（13）下图是面食文化留言实体和其具备的属性。

图4.13 面食文化留言实体属性图

（14）下图是用户表实体和其具备的属性。

图4.14 用户表实体属性图

作为程序后台的支持，本数据库也需要设计数据存储的结构。而数据存储结构的设计就包括了数据表结构的设计和创建。数据表结构包括了字段，数据类型，还有字段的取值范围等信息。而E-R模型中的实体就是一张表，实体的特征就可以作为该表中的字段，根据本程序信息存储要求，设计每个字段需要的类型，还有该字段的取值范围等。每当设计完成一张数据表，就需要及时保存在数据库里面，并对该设计的数据表准确命名，要求设置的数据表的名称尽量不要是中文，而且要方便记忆。因为在程序编码阶段，通过SQL语句可以把程序里面的数据写入在各个数据表里面，而这个环节需要使用到数据表的名称。如果数据表名称是中文的话，可能会乱码并影响程序运行。下面就以表格形式展示设计的结果。

表4.1字典表表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	dic_code	String	字段	是
3	dic_name	String	字段名	是
4	code_index	Integer	编码	是
5	index_name	String	编码名字	是
6	super_id	Integer	父字段id	是
7	beizhu	String	备注	是
8	create_time	Date	创建时间	是

表4.2论坛信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	forum_name	String	帖子标题	是
3	yonghu_id	Integer	用户	是
4	users_id	Integer	管理员	是
5	forum_content	String	发布内容	是
6	super_ids	Integer	父id	是
7	forum_state_types	Integer	帖子状态	是
8	insert_time	Date	发帖时间	是
9	update_time	Date	修改时间	是
10	create_time	Date	创建时间	是

表4.3糕点专栏表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	gaodianzhuanlan_name	String	糕点专栏标题	是
3	gaodianzhuanlan_photo	String	糕点专栏图片	是
4	gaodianzhuanlan_types	Integer	糕点专栏类型	是
5	gaodianzhuanlan_content	String	糕点专栏简介	是
6	create_time	Date	创建时间	是

表4.4糕点专栏留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	gaodianzhuanlan_id	Integer	糕点专栏	是
3	yonghu_id	Integer	用户	是
4	gaodianzhuanlan_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7TXAPP.TV	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.5每日推荐表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	meirituijain_name	String	每日推荐标题	是
3	meirituijain_photo	String	每日推荐图片	是
4	meirituijain_types	Integer	每日推荐类型	是
5	meirituijain_content	String	每日推荐简介	是
6	create_time	Date	创建时间	是

表4.6面食菜谱表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	mianshicaipu_name	String	面食菜谱标题	是
3	mianshicaipu_photo	String	面食菜谱图片	是
4	mianshicaipu_types	Integer	面食菜谱类型	是
5	mianshicaipu_content	String	面食菜谱简介	是
6	create_time	Date	创建时间	是

表4.7面食菜谱留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	mianshicaipu_id	Integer	面食菜谱	是
3	yonghu_id	Integer	用户	是
4	mianshicaipu_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.8面食文化表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	mianshiwenhua_name	String	面食文化标题	是
3	mianshiwenhua_photo	String	面食文化图片	是
4	mianshiwenhua_types	Integer	面食文化类型	是
5	mianshiwenhua_content	String	面食文化简介	是
6	create_time	Date	创建时间	是

表4.9面食文化留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	mianshiwenhua_id	Integer	面食文化	是
3	yonghu_id	Integer	用户	是
4	mianshiwenhua_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time糖心vlog	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.10新闻动态表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	news_name	String	新闻标题	是
3	news_types	Integer	新闻类型	是
4	news_photo	String	新闻图片	是
5	insert_time	Date	添加时间	是
6	news_content	String	新闻详情	是
7	create_time	Date	创建时间	是

表4.11社区信息表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shequxinxi_name	String	文章标题	是
3	shequxinxi_photo	String	文章封面	是
4	shequxinxi_types	Integer	文章类型	是
5	yonghu_id	Integer	用户	是
6	shequxinxi_content	String	文章简介	是
7	create_time	Date	创建时间	是

表4.12文章留言表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	shequxinxi_id	Integer	社区信息	是
3	yonghu_id	Integer	用户	是
4	shequxinxi_liuyan_text	String	留言内容	是
5	insert_time	Date	留言时间	是
6	reply_text	String	回复内容	是
7	update_time	Date	回复时间	是
8	create_time	Date	创建时间	是

表4.13用户表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	yonghu_name	String	用户姓名	是
3	yonghu_photo	String	头像	是
4	yonghu_phone	String	联系方式	是
5	yonghu_email	String	邮箱	是
6	yonghu_delete	Integer	假删	是
7	insert_time	Date	添加时间	是
8	create_time	Date	创建时间	是

表4.14用户表表

序号	列名	数据类型	说明	允许空
1	Id	Int	id	否
2	username	String	用户名	是
3	password	String	密码	是
4	role	String	角色	是
5	addtime	Date	新增时间	是

这个环节需要使用前面的设计方案，包括对系统模块的设计，还有对程序后台的数据支持的数据库的设计等。不过这部分内容还是强调系统编码人员的开发能力，要把前面设计的内容通过编码的形式以一个完整的，可以运行的系统呈现出来。

功能模块的实现 ### 5.1用户信息管理如图5.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，

还进行了对用户名称的模糊查询的条件

图5.1 用户信息管理页面 ### 5.2 面食菜谱管理如图5.2显示的就是面食菜谱管理页面，此页面提供给管理员的功能有：查看已发布的面食菜谱数据，修改面食菜谱，面食菜谱作废，即可删除，还进行了对面食菜谱名称的模糊查询面食菜谱信息的类型查询等等一些条件。

图5.2 面食菜谱管理页面 ### 5.3面食文化管理如图5.3显示的就是面食文化管理页面，此页面提供给管理员的功能有：根据面食文化进行条件查询，还可以对面食文化进行新增、修改、查询操作等等。

图5.3 面食文化管理页面 ### 5.1新闻动态管理如图5.4显示的就是新闻动态管理页面，此页面提供给管理员的功能有：根据新闻动态进行新增、修改、查询操作等等。

图5.4 新闻动态管理页面


package com.controller;


import java.util.Arrays;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.service.ConfigService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;

/**
 * 登录相关
 */
@RequestMapping("config")
@RestController
public class ConfigController{
    
    @Autowired
    private ConfigService configService;

    /**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
        EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
        PageUtils page = configService.queryPage(params);
        return R.ok().put("data", page);
    }
    
    /**
     * 列表
     */
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ConfigEntity config){
        EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
        PageUtils page = configService.queryPage(params);
        return R.ok().put("data", page);
    }

    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        ConfigEntity config = configService.selectById(id);
        return R.ok().put("data", config);
    }
    
    /**
     * 详情
     */
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") String id){
        ConfigEntity config = configService.selectById(id);
        return R.ok().put("data", config);
    }
    
    /**
     * 根据name获取信息
     */
    @RequestMapping("/info")
    public R infoByName(@RequestParam String name){
        ConfigEntity config = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
        return R.ok().put("data", config);
    }
    
    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody ConfigEntity config){
//      ValidatorUtils.validateEntity(config);
        configService.insert(config);
        return R.ok();
    }


    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ConfigEntity config){
//        ValidatorUtils.validateEntity(config);
        configService.updateById(config);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        configService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}


package com.service.impl;


import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.dao.CommonDao;
import com.service.CommonService;


/**
 * 系统用户
 * @author
 * @date
 */
@Service("commonService")
public class CommonServiceImpl implements CommonService {
    
    @Autowired
    private CommonDao commonDao;

    @Override
    public List<String> getOption(Map<String, Object> params) {
        return commonDao.getOption(params);
    }
    
    @Override
    public Map<String, Object> getFollowByOption(Map<String, Object> params) {
        return commonDao.getFollowByOption(params);
    }


    /**
     tableName 查询表
     condition1 条件1
     condition1Value 条件1值
     average 计算平均评分
     * */
    public Map<String, Object> queryScore(Map<String, Object> params){
        return commonDao.queryScore(params);
    }
    
    @Override
    public void sh(Map<String, Object> params) {
        commonDao.sh(params); 
    }

    @Override
    public int remindCount(Map<String, Object> params) {
        return commonDao.remindCount(params);
    }

    @Override
    public Map<String, Object> selectCal(Map<String, Object> params) {
        return commonDao.selectCal(params);
    }
    
    @Override
    public List<Map<String, Object>> selectGroup(Map<String, Object> params) {
        return commonDao.selectGroup(params);
    }
    
    @Override
    public List<Map<String, Object>> selectValue(Map<String, Object> params) {
        return commonDao.selectValue(params);
    }

    @Override
    public List<Map<String, Object>> chartBoth(Map<String, Object> params) {
        return commonDao.chartBoth(params);
    }

    @Override
    public List<Map<String, Object>> chartOne(Map<String, Object> params) {
        return commonDao.chartOne(params);
    }


    /**
     * 新的级联字典表的  分组求和统计
     * @param params
     * @return
     */
    @Override
    public List<Map<String, Object>> newSelectGroupSum(Map<String, Object> params) {
        return commonDao.newSelectGroupSum(params);
    }


    /**
     * 新的级联字典表的  分组条数统计
     * @param params
     * @return
     */
    @Override
    public List<Map<String, Object>> newSelectGroupCount(Map<String, Object> params) {
        return commonDao.newSelectGroupCount(params);
    }

    /**
     * 当前表的日期分组求和
     * @param params
     * @return
     */
    @Override
    public List<Map<String, Object>> newSelectDateGroupSum(Map<String, Object> params) {
        return commonDao.newSelectDateGroupSum(params);
    }


    /**
     * 查询字典表的分组统计总条数
     * @param params
     * @return
     */
    @Override
    public List<Map<String, Object>> newSelectDateGroupCount(Map<String, Object> params) {
        return commonDao.newSelectDateGroupCount(params);
    }

    @Override
    public int plusCloumNumber(Map<String, Object> params) {
        return commonDao.plusCloumNumber(params);
    }

    @Override
    public int reduceCloumNumber(Map<String, Object> params) {
        return commonDao.reduceCloumNumber(params);
    }
    @Override
    public int updateCloumValue(Map<String, Object> params) {
        return commonDao.updateCloumValue(params);
    }

/**
 * 饼状图
 * -- 饼状图  查询当前表
 --                 查询字典表【月】
 --                  统计   -- 查询某个月的每个类型的订单销售数量
 --                  求和   -- 查询某个月的每个类型的订单销售额
 --                 查询某个字符串【月】
 --                  统计   -- 查询某个月的每个员工的订单销售数量
 --                  求和   -- 查询某个月的每个员工的订单销售额
 --                 查询时间【年】
 --                  统计     -- 查询每个月的订单销售数量
 --                  求和     -- 查询每个月的订单销售额
 -- 饼状图  查询级联表
 --                 查询字典表
 --                  统计     -- 查询某个月的每个类型的订单销售数量
 --                  求和   -- 查询某个月的每个类型的订单销售额
 --                 查询某个字符串
 --                  统计   -- 查询某个月的每个员工的订单销售数量
 --                  求和   -- 查询某个月的每个员工的订单销售额
 --                 查询时间
 --                  统计     -- 统计每个月的订单销售数量
 --                  求和     -- 查询每个月的订单销售额
 */


/**
 * 柱状图
 -- 柱状图  查询当前表
 --             某个【年，月】
 --              当前表 2 级联表 1
 --                         统计
 --                         【日期，字符串，下拉框】
 --                         求和
 --                         【日期，字符串，下拉框】
 -- 柱状图  查询级联表
 --                     某个【年，月】
 --                         统计
 --                         【日期，字符串，下拉框】
 --                         求和
 --                         【日期，字符串，下拉框】
 */
    /**
     * 柱状图求和
     * @param params
     * @return
     */
    public List<Map<String, Object>> barSum(Map<String, Object> params){
        return commonDao.barSum(params);
    }

    /**
     * 柱状图统计
     * @param params
     * @return
     */
    public List<Map<String, Object>> barCount(Map<String, Object> params){
        return commonDao.barCount(params);
    }

}


package com.controller;

import java.io.File;
import java.math.BigDecimal;
import java.net.URL;
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.*;
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.*;
import com.entity.view.*;
import com.service.*;
import com.utils.PageUtils;
import com.utils.R;
import com.alibaba.fastjson.*;

/**
 * 面食菜谱留言
 * 后端接口
 * @author
 * @email
*/
@RestController
@Controller
@RequestMapping("/mianshicaipuLiuyan")
public class MianshicaipuLiuyanController {
    private static final Logger logger = LoggerFactory.getLogger(MianshicaipuLiuyanController.class);

    @Autowired
    private MianshicaipuLiuyanService mianshicaipuLiuyanService;


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

    //级联表service
    @Autowired
    private MianshicaipuService mianshicaipuService;
    @Autowired
    private YonghuService yonghuService;



    /**
    * 后端列表
    */
    @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(false)
            return R.error(511,"永不会进入");
        else if("用户".equals(role))
            params.put("yonghuId",request.getSession().getAttribute("userId"));
        if(params.get("orderBy")==null || params.get("orderBy")==""){
            params.put("orderBy","id");
        }
        PageUtils page = mianshicaipuLiuyanService.queryPage(params);

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

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


                //级联表
                MianshicaipuEntity mianshicaipu = mianshicaipuService.selectById(mianshicaipuLiuyan.getMianshicaipuId());
                if(mianshicaipu != null){
                    BeanUtils.copyProperties( mianshicaipu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setMianshicaipuId(mianshicaipu.getId());
                }
                //级联表
                YonghuEntity yonghu = yonghuService.selectById(mianshicaipuLiuyan.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
            //修改对应字典表字段
            dictionaryService.dictionaryConvert(view, request);
            return R.ok().put("data", view);
        }else {
            return R.error(511,"查不到数据");
        }

    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
        if(false)
            return R.error(511,"永远不会进入");
        else if("用户".equals(role))
            mianshicaipuLiuyan.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));

        mianshicaipuLiuyan.setInsertTime(new Date());
        mianshicaipuLiuyan.setCreateTime(new Date());
        mianshicaipuLiuyanService.insert(mianshicaipuLiuyan);
        return R.ok();
    }

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

        String role = String.valueOf(request.getSession().getAttribute("role"));
//        if(false)
//            return R.error(511,"永远不会进入");
//        else if("用户".equals(role))
//            mianshicaipuLiuyan.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
        //根据字段查询是否有相同数据
        Wrapper<MianshicaipuLiuyanEntity> queryWrapper = new EntityWrapper<MianshicaipuLiuyanEntity>()
            .eq("id",0)
            ;

        logger.info("sql语句:"+queryWrapper.getSqlSegment());
        MianshicaipuLiuyanEntity mianshicaipuLiuyanEntity = mianshicaipuLiuyanService.selectOne(queryWrapper);
        mianshicaipuLiuyan.setUpdateTime(new Date());
        if(mianshicaipuLiuyanEntity==null){
            mianshicaipuLiuyanService.updateById(mianshicaipuLiuyan);//根据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());
        mianshicaipuLiuyanService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }


    /**
     * 批量上传
     */
    @RequestMapping("/batchInsert")
    public R save( String fileName, HttpServletRequest request){
        logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
        Integer yonghuId = Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId")));
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        try {
            List<MianshicaipuLiuyanEntity> mianshicaipuLiuyanList = new ArrayList<>();//上传的东西
            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
            Date date = new Date();
            int lastIndexOf = fileName.lastIndexOf(".");
            if(lastIndexOf == -1){
                return R.error(511,"该文件没有后缀");
            }else{
                String suffix = fileName.substring(lastIndexOf);
                if(!".xls".equals(suffix)){
                    return R.error(511,"只支持后缀为xls的excel文件");
                }else{
                    URL resource = this.getClass().getClassLoader().getResource("/upload/" + fileName);//获取文件路径
                    File file = new File(resource.getFile());
                    if(!file.exists()){
                        return R.error(511,"找不到上传文件，请联系管理员");
                    }else{
                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
                        dataList.remove(0);//删除第一行，因为第一行是提示
                        for(List<String> data:dataList){
                            //循环
                            MianshicaipuLiuyanEntity mianshicaipuLiuyanEntity = new MianshicaipuLiuyanEntity();
//                            mianshicaipuLiuyanEntity.setMianshicaipuId(Integer.valueOf(data.get(0)));   //面食菜谱 要改的
//                            mianshicaipuLiuyanEntity.setYonghuId(Integer.valueOf(data.get(0)));   //用户 要改的
//                            mianshicaipuLiuyanEntity.setMianshicaipuLiuyanText(data.get(0));                    //留言内容 要改的
//                            mianshicaipuLiuyanEntity.setInsertTime(date);//时间
//                            mianshicaipuLiuyanEntity.setReplyText(data.get(0));                    //回复内容 要改的
//                            mianshicaipuLiuyanEntity.setUpdateTime(sdf.parse(data.get(0)));          //回复时间 要改的
//                            mianshicaipuLiuyanEntity.setCreateTime(date);//时间
                            mianshicaipuLiuyanList.add(mianshicaipuLiuyanEntity);


                            //把要查询是否重复的字段放入map中
                        }

                        //查询是否重复
                        mianshicaipuLiuyanService.insertBatch(mianshicaipuLiuyanList);
                        return R.ok();
                    }
                }
            }
        }catch (Exception e){
            e.printStackTrace();
            return R.error(511,"批量插入数据异常，请联系管理员");
        }
    }





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

        // 没有指定排序字段就默认id倒序
        if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
            params.put("orderBy","id");
        }
        PageUtils page = mianshicaipuLiuyanService.queryPage(params);

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

    /**
    * 前端详情
    */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id, HttpServletRequest request){
        logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
        MianshicaipuLiuyanEntity mianshicaipuLiuyan = mianshicaipuLiuyanService.selectById(id);
            if(mianshicaipuLiuyan !=null){


                //entity转view
                MianshicaipuLiuyanView view = new MianshicaipuLiuyanView();
                BeanUtils.copyProperties( mianshicaipuLiuyan , view );//把实体数据重构到view中

                //级联表
                    MianshicaipuEntity mianshicaipu = mianshicaipuService.selectById(mianshicaipuLiuyan.getMianshicaipuId());
                if(mianshicaipu != null){
                    BeanUtils.copyProperties( mianshicaipu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setMianshicaipuId(mianshicaipu.getId());
                }
                //级联表
                    YonghuEntity yonghu = yonghuService.selectById(mianshicaipuLiuyan.getYonghuId());
                if(yonghu != null){
                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
                    view.setYonghuId(yonghu.getId());
                }
                //修改对应字典表字段
                dictionaryService.dictionaryConvert(view, request);
                return R.ok().put("data", view);
            }else {
                return R.error(511,"查不到数据");
            }
    }


    /**
    * 前端保存
    */
    @RequestMapping("/add")
    public R add(@RequestBody MianshicaipuLiuyanEntity mianshicaipuLiuyan, HttpServletRequest request){
        logger.debug("add方法:,,Controller:{},,mianshicaipuLiuyan:{}",this.getClass().getName(),mianshicaipuLiuyan.toString());
        mianshicaipuLiuyan.setInsertTime(new Date());
        mianshicaipuLiuyan.setCreateTime(new Date());
        mianshicaipuLiuyanService.insert(mianshicaipuLiuyan);
        return R.ok();
        }


}

# replace default config
# 基于svgo对svg文件进行压缩：https://panjiachen.github.io/vue-element-admin-site/zh/feature/script/svgo.html
# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

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

java系统设计，毕设辅导

糖心vlog

上一篇: 建站时怎么做才能让网站加载速度更快

下一篇: 糖心vlogTXAPP.TV：域名注册的流程和须知具体是什么

糖心vlogTXAPP.TV：基于HTML的中国传统面食介绍网站的搭建+vue

随便看看