基于Vue框架的娱爆新闻网站的设计与实现---附源码80930

摘要

本论文旨在设计和实现一个娱爆新闻网站，以满足用户对娱乐资讯的需求。通过系统的开发与实施，该网站成功整合了丰富的娱乐新闻内容，并提供了功能模块如新闻列表、分类浏览、评论互动等。网站采用前端框架Vue进行用户界面开发，后端使用Node.js作为服务器端技术，数据存储方面使用MySQL关系型数据库。用户可以在网站上浏览最新的娱乐新闻，根据兴趣选择不同的新闻分类进行浏览，参与评论互动等。

本论文重点研究了娱爆新闻网站的设计与实现过程中的关键问题，包括前端页面设计、后端服务搭建、数据存储与管理等方面。通过解决这些问题，网站能够提供流畅、响应迅速的用户界面，同时实现高效的数据交互和管理。

在设计与实现过程中，本论文还探索了如何提高用户体验和网站性能的方法。通过优化页面加载速度、采用异步请求和缓存等策略，使用户能够快速获取到最新的娱乐资讯，并享受良好的浏览体验。

通过本论文的研究与实践，验证了娱爆新闻网站在提供娱乐资讯、用户互动和用户体验方面的有效性。同时，本论文对娱爆新闻网站的设计与实施提供了一系列的经验总结和技术指导，为其他类似应用的开发与发展提供有益的参考和借鉴。

关键词：娱爆新闻网站；Vue框架；Node.js；MySQL数据库；用户界面；数据交互

Design and Implementation of Entertainment Explosive News Website Based on Vue Framework

This paper aims to design and implement an entertainment news website to meet the needs of users for entertainment information. Through the development and implementation of the system, the website has successfully integrated rich entertainment news content and provided functional modules such as news lists, categorized browsing, and interactive comments. The website adopts the front-end framework Vue for user interface development, and the back-end uses Node.js as server-side technology. In terms of data storage, MySQL relational database is used. Users can browse the latest entertainment news on the website, choose different news categories based on their interests for browsing, and participate in interactive comments.

This paper focuses on the key issues in the design and implementation process of entertainment news websites, including front-end page design, back-end service construction, data storage and management, etc. By addressing these issues, websites can provide a smooth and responsive user interface, while achieving efficient data exchange and management.

During the design and implementation process, this paper also explores methods to improve user experience and website performance. By optimizing page loading speed, adopting asynchronous requests and caching strategies, users can quickly access the latest entertainment information and enjoy a good browsing experience.

Through the research and practice of this paper, the effectiveness of entertainment news websites in providing entertainment information, user interaction, and user experience has been verified. At the same time, this paper provides a series of experience summaries and technical guidance for the design and implementation of entertainment news websites, providing useful reference and inspiration for the development and application of other similar applications.

Keywords: Entertainment and explosive news websites; Vue framework; Node.js; MySQL database; User interface; Data exchange

1 绪论

1.1研究背景与意义

随着娱乐资讯的快速发展和人们对娱乐新闻的关注度不断提高，娱爆网站全部提供最新最全的娱乐新闻和爆料，设计和实现一个基于Vue框架的娱爆新闻网站具有重要的研究背景和实践意义。

首先，传统娱乐新闻的获取方式主要依赖于传统媒体或专业娱乐资讯平台。然而，这些方式存在信息筛选不准确、更新速度慢、用户互动性差等问题，无法满足用户对即时、多样化娱乐资讯的需求。因此，基于Vue框架的娱爆新闻网站的开发能够更好地满足用户的需求，提供及时、全面的娱乐新闻内容。

其次，Vue作为一种流行的前端框架，具有轻量级、高效的特点，可以提供良好的用户体验和交互性。通过使用Vue框架，可以构建动态、响应式的用户界面，使用户能够方便地浏览、分类和评论娱乐新闻，提升用户的参与度和粘性。

此外，通过研究和实践，可以探索如何充分利用Vue框架的特性来优化娱爆新闻网站的设计与开发。通过合理的组件拆分和状态管理，可以提高代码的可维护性和扩展性；通过异步请求和数据缓存，可以提升网站的性能和加载速度。这些技术和经验对于其他类似应用的开发和优化具有重要的参考价值。

因此，本论文的研究背景与意义在于通过设计和实现一个基于Vue框架的娱爆新闻网站，满足用户对即时、多样化娱乐资讯的需求，并探索如何优化网站的设计与开发，提升用户体验和网站性能。这将为娱乐资讯领域的新闻网站建设提供新的思路和方法，推动娱乐资讯的传播和用户互动的发展。

1.2国内外研究现状

国内方面，随着互联网的普及和娱乐资讯的快速发展，越来越多的研究关注于娱爆新闻网站的设计与实现。一些研究聚焦于前端技术的应用，如Vue、React等框架的使用和优化，以提供良好的用户体验和响应式界面。同时，也有研究关注于后端服务的搭建和数据管理，包括Node.js、MySQL等技术的应用。这些研究通过开发具体案例或系统，验证了不同技术在娱爆新闻网站中的有效性和可行性。

国外方面，许多先进国家在娱爆新闻网站的设计与实现方面进行了深入的研究。一些研究关注于前端技术的发展和创新，探索了如何利用最新的Web技术和工具来构建交互性强、动态的用户界面。另外，也有研究关注于后端技术的应用和优化，包括服务器架构、数据存储和处理等方面。这些研究通过实验和实践，提出了一些先进的方法和技术，为娱爆新闻网站的设计与实现提供了有益的借鉴和参考。

综上所述，国内外对于娱爆新闻网站的设计与实现都有一定的研究成果。然而，仍存在一些挑战和问题，如用户体验的提升、性能优化、数据安全等方面。因此，本论文将综合国内外研究现状，针对这些问题进行深入研究，提出创新的解决方案，以推动娱爆新闻网站的发展和进步。

1.3研究内容

娱爆新闻网站的开发及实现，所需要的工作内容：

（1）首先是确定选题，确定好所要做的系统，并对系统的背景及现在面临的一些问题等进行系统的初步确认。

（2）系统确认完成后，结合系统开发的需求进行确认系统开发所使用的技术，娱爆新闻网站的开发使用Vue框架，数据库进行平台的搭建开发，确认好使用的技术进行技术分析，所使用的技术是否可以完成系统的实现。

（3）确定好系统使用的技术，进行在线确认系统所划分的用户角色，并且根据用户角色划分确定所要设计的功能模块，对娱爆新闻网站的设计主要划分别为管理员和用户角色。

（4）系统的功能模块确认完成后进行程序及界面的设计，设计完成后，并且通过测试来判断程序是否完善，对于系统测试，需要不同的用户进行不同的内容编辑及提交，及使用不同的测试方式找出程序中存在的漏洞，并对程序出现的漏洞问题进行在线解决处理，如果测试系统没有任何问题时，可以将系统上传进行正式操作使用。

1.4论文结构与章节安排

论文将分层次经行编排，除去论文摘要致谢文献参考部分，正文部分还会对网站需求做出分析，以及阐述大体的设计和实现的功能，最后罗列部分调测记录，论文主要架构如下：

第一章：引言。第一章主要介绍了课题研究的背景，系统开发的现状和本文的国内外研究现状与主要工作。

第二章：系统需求分析。第二章主要从系统的用户、功能等方面进行需求分析。

第三章：系统设计。第三章主要对系统框架、系统功能模块、数据库进行功能设计。

第四章：系统实现。第四章主要介绍了系统框架搭建、系统界面的实现。

第五章：系统测试。第五章主要对系统的部分界面进行测试并对主要功能进行测试

第六章：总结。

2 娱爆新闻网站分析

系统分析是开发一个项目的先决条件，通过系统分析可以很好的了解系统的主体用户的基本需求情况，同时这也是项目的开发的原因。进而对系统开发进行可行性分析，通常包括技术可行性、经济可行性等，可行性分析同时也是从项目整体角度进行的分析。然后就是对项目的具体需求进行分析，分析的手段一般都是通过用户的用例图来实现。下面是详细的介绍。

2.1 可行性分析

（1）技术可行性分析

娱爆新闻网站的设计与实现在技术可行性方面是具有很大潜力的。利用现代化的前端框架如Vue，可以轻松构建交互性强、用户界面友好的网站。结合后端技术如Node.js，能够提供高效的数据处理和服务支持。已有的成功案例表明，基于这些技术的应用能够实现良好的扩展性、维护性和安全性。因此，从技术角度来看，设计与实现娱爆新闻网站是具备较高的技术可行性的，为用户提供一个优秀的娱乐资讯平台。

（2）经济可行性分析

设计与实现娱爆新闻网站在经济上具备可行性。系统可以使用免费开源的技术工具如Vue前端框架和Node.js后端框架，以及配套的开发工具和数据库，可以避免额外的经济投入。这些技术已经被广泛学习和应用，在学校进行了系统的学习，使开发人员能够独立操作并完成所需的开发任务。此外，这些技术还具备良好的扩展性、维护性和安全性，为娱爆新闻网站的长期运营和持续发展提供了可靠的基础。综合考虑技术方面的经济可行性，设计与实现娱爆新闻网站是具有潜力且经济上可行的选择。

（3）操作可行性分析

此次项目设计的时候我参考了很多类似系统的成功案例，对它们的操作界面以及功能都进行了系统的分析，将众多案例结合在一起，突出以人为本简化操作，所以具有基本计算机知识的人都会操作本项目。因此操作可行性也没有问题。

2.2系统流程分析

业务流程是用一些特定的符合和线条来进行演示用户在使用系统时的过程，在进行系统分析的时候，业务流程可以帮助开发人员更好的理解业务，发现错误，完善系统。

2.2.1 数据增加流程

用户成功登入系统后就能够实现增加数据的操作，增加数据的编号是特定的，系统生成，用户不能随意填写，除了编号以外，其他增加信息用户自己填写，填写后的信息经过系统验证，验证合法通过就显示增加数据成功了，相反的话，就没有增加成功，图2-1显示的就是在增加数据时的流程。

图2-1 数据增加流程图

2.2.2 数据修改流程

数据修改时的流程和上面介绍的数据增加时的流程差不多，如图2-2所示。

图2-2 数据修改流程图

2.2.3 数据删除流程

如果系统里面存在一些没有用的数据的话，相关的管理人员还可以对这些数据进行删除，图2-3就是数据删除时的流程图。

图2-3 数据删除流程图

2.3 系统功能分析

2.3.1 功能性分析

按照娱爆新闻网站的角色，我划分为了注册用户管理模块和管理员管理模块这两大部分。

注册用户管理模块：

（1）用户注册登录：用户注册为用户并登录娱爆新闻网站；用户对个人信息的增删改查，比如个人资料，密码修改。

（2）查看娱爆新闻网站的首页信息：娱爆新闻网站的首页信息包含了个人账户、个人收藏等。

（3）网站公告：当用户点击“网站公告”这一菜单按钮，会显示管理员在后台发布的所有的公告信息，可以查看详情；

（4）新闻资讯：当用户点击“新闻资讯”这一菜单按钮，会显示管理员在后台发布的所有的新闻资讯信息，可以查看详情，进行收藏、点赞、评论等；

（5）个人资料：当用户点击“个人资料”中“我的账户”可以对个人的资料、登录系统的密码以及自己收藏的信息进行设置管理；

（6）交流论坛：用户可以在交流论坛中发布交流信息；

（7）留言反馈：用户可以对阅读浏览的娱爆新闻在线进行留言和反馈。

管理员管理模块：

（1）登录：管理员的账号是在数据表表中直接设置生成的，不需要进行注册；

（2）用户管理：当点击“用户管理”这一菜单的时候，会出现管理员+注册用户这两个子菜单，可以对这两个模块进行增删改查操作；

（3）公告管理：管理员可以对系统前台展示的轮播图以及网站公告进行增删改查，方便用户进行查看；

（4）新闻资讯管理：管理员可以娱爆新闻网站前台展示的新闻资讯对新闻资讯信息进行管控；

（5）新闻分类管理：管理员点击“新闻分类”按钮，可以对新闻资讯进行列表分类、添加管理；

（6）数据分析管理：管理员点击“数据分析”按钮，可以通过对后台首页的数据分析统计图，统计表分析得出的后台需要的关于新闻类型的详细数据统计包括，浏览，点赞，评论人数等进行管控。

（7）系统管理：管理员点击“系统管理”按钮，可以对系统首页底部的友情链接内容进行详情查询、重置、删除、添加管控。

（8）交流管理：对交流论坛内容进行管控；

（9）留言管理：对用户的留言信息进行维护管理。

2.3.2 非功能性分析

娱爆新闻网站的非功能性需求比如娱爆新闻网站的安全性怎么样，可靠性怎么样，性能怎么样，可拓展性怎么样等。具体可以表示在如下3-1表格中：

表3-1 娱爆新闻网站非功能需求表

安全性	主要指娱爆新闻网站数据库的安装，数据库的使用和密码的设定必须合乎规范。
可靠性	可靠性是指娱爆新闻网站能够安装用户的指示进行操作，经过测试，可靠性90%以上。
性能	性能是影响娱爆新闻网站占据市场的必要条件，所以性能最好要佳才好。
可扩展性	比如数据库预留多个属性，比如接口的使用等确保了系统的非功能性需求。
易用性	用户只要跟着娱爆新闻网站的页面展示内容进行操作，就可以了。
可维护性	娱爆新闻网站开发的可维护性是非常重要的，经过测试，可维护性没有问题

2.4 系统用例分析

通过2.3功能的分析，得出了本娱爆新闻网站的用例图：

注册用户角色用例如图2-3所示。

图2-3娱爆新闻网站注册用户角色用例图

web后台管理上的管理员是维护整个娱爆新闻网站中所有数据信息的。管理员角色用例如图2-4所示。

图2-4娱爆新闻网站管理员角色用例图

2.5本章小结

本章主要通过对娱爆新闻网站的可行性分析、流程分析、功能需求分析、系统用例分析，确定整个娱爆新闻网站要实现的功能。同时也为娱爆新闻网站的代码实现和测试提供了标准。

3 娱爆新闻网站总体设计

本章主要讨论的内容包括娱爆新闻网站的功能模块设计、数据库系统设计。

3.1 系统架构设计

本娱爆新闻网站从架构上分为三层：表现层（UI）、业务逻辑层（BLL）以及数据层（DL）。

图3-1娱爆新闻网站架构设计图

表现层（UI）：又称UI层，主要完成本娱爆新闻网站的UI交互功能，一个良好的UI可以打打提高用户的用户体验，增强用户使用本娱爆新闻网站时的舒适度。UI的界面设计也要适应不同版本的娱爆新闻网站以及不同尺寸的分辨率，以做到良好的兼容性。UI交互功能要求合理，用户进行交互操作时必须要得到与之相符的交互结果，这就要求表现层要与业务逻辑层进行良好的对接。

业务逻辑层（BLL）：主要完成本娱爆新闻网站的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层，系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。

数据层（DL）：由于本娱爆新闻网站的数据是放在服务端的mysql数据库中，因此本属于服务层的部分可以直接整合在业务逻辑层中，所以数据层中只有数据库，其主要完成本娱爆新闻网站的数据存储和管理功能。

3.2 系统功能模块设计

3.2.1整体功能模块设计

在上一章节中主要对系统的功能性需求和非功能性需求进行分析，并且根据需求分析了本娱爆新闻网站中的用例。那么接下来就要开始对本娱爆新闻网站的架构、主要功能和数据库开始进行设计。娱爆新闻网站根据前面章节的需求分析得出，其总体设计模块图如图3-2所示。

图3-2娱爆新闻网站功能模块图

3.2.2用户模块设计

后台管理者能够实现对前台注册的用户增删改查操作，用户模块结构图如下图：

图3-3用户用户模块结构图

3.2.3评论管理模块设计

娱爆新闻网站是一个交流性质的公开平台，会员用户可以在平台上评论，增加用户之间的互动性。但是同时也为了更好的规范评论的内容，给予管理员删除不合适的言论的功能，所以需要专门设计一个评论管理模块，具体的结构图如下：

图3-4评论模块结构图

3.2.4新闻资讯模块设计

后台管理者能够实现对前台发布的新闻资讯进行增删改查操作，新闻资讯模块结构图如下图：

图3-5新闻资讯模块结构图

3.3 数据库设计

数据库设计一般包括需求分析、概念模型设计、数据库表建立三大过程，其中需求分析前面章节已经阐述，概念模型设计有概念模型和逻辑结构设计两部分。

3.3.1 数据库概念结构设计

下面是整个娱爆新闻网站中主要的数据库表总E-R实体关系图。

图3-6 娱爆新闻网站总E-R关系图

下面根据娱爆新闻网站的数据库总E-R关系图可以得出娱爆新闻网站需要很多E-R图，在此罗列出来一些主要的数据库E-R模型图。

图3-7注册用户E-R关系图

图3-8 公告E-R关系图

图3-9评论信息E-R关系图

图3-10新闻资讯E-R关系图

3.3.2 数据库逻辑结构设计

通过上一小节中娱爆新闻网站中总E-R关系图上得出一共需要创建很多个数据表。在此我主要罗列几个主要的数据库表结构设计。

表access_token (登陆访问时长)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	token_id	int	10	0	N	Y		临时访问牌ID
2	token	varchar	64	0	Y	N		临时访问牌
3	info	text	65535	0	Y	N
4	maxage	int	10	0	N	N	2	最大寿命：默认2小时
5	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
6	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
7	user_id	int	10	0	N	N	0	用户编号:

表auth (用户权限管理)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	auth_id	int	10	0	N	Y		授权ID：
2	user_group	varchar	64	0	Y	N		用户组：
3	mod_name	varchar	64	0	Y	N		模块名：
4	table_name	varchar	64	0	Y	N		表名：
5	page_title	varchar	255	0	Y	N		页面标题：
6	path	varchar	255	0	Y	N		路由路径：
7	position	varchar	32	0	Y	N		位置：
8	mode	varchar	32	0	N	N	_blank	跳转方式：
9	add	tinyint	3	0	N	N	1	是否可增加：
10	del	tinyint	3	0	N	N	1	是否可删除：
11	set	tinyint	3	0	N	N	1	是否可修改：
12	get	tinyint	3	0	N	N	1	是否可查看：
13	field_add	text	65535	0	Y	N		添加字段：
14	field_set	text	65535	0	Y	N		修改字段：
15	field_get	text	65535	0	Y	N		查询字段：
16	table_nav_name	varchar	500	0	Y	N		跨表导航名称：
17	table_nav	varchar	500	0	Y	N		跨表导航：
18	option	text	65535	0	Y	N		配置：
19	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
20	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表collect (收藏)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	collect_id	int	10	0	N	Y		收藏ID：
2	user_id	int	10	0	N	N	0	收藏人ID：
3	source_table	varchar	255	0	Y	N		来源表：
4	source_field	varchar	255	0	Y	N		来源字段：
5	source_id	int	10	0	N	N	0	来源ID：
6	title	varchar	255	0	Y	N		标题：
7	img	varchar	255	0	Y	N		封面：
8	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
9	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表comment (评论)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	comment_id	int	10	0	N	Y		评论ID：
2	user_id	int	10	0	N	N	0	评论人ID：
3	reply_to_id	int	10	0	N	N	0	回复评论ID：空为0
4	content	longtext	2147483647	0	Y	N		内容：
5	nickname	varchar	255	0	Y	N		昵称：
6	avatar	varchar	255	0	Y	N		头像地址：[0,255]
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
9	source_table	varchar	255	0	Y	N		来源表：
10	source_field	varchar	255	0	Y	N		来源字段：
11	source_id	int	10	0	N	N	0	来源ID：

表data_analysis (数据分析)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	data_analysis_id	int	10	0	N	Y		数据分析ID
2	news_headlines	varchar	64	0	Y	N		新闻标题
3	news_id	varchar	64	0	Y	N		新闻编号
4	news_type	varchar	64	0	Y	N		新闻类型
5	number_of_viewers	int	10	0	Y	N	0	浏览人数
6	number_of_comments	int	10	0	Y	N	0	评论数
7	like_count	int	10	0	Y	N	0	点赞数
8	data_analysis	text	65535	0	Y	N		数据分析
9	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表forum (论坛)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	forum_id	mediumint	8	0	N	Y		论坛id
2	display	smallint	5	0	N	N	100	排序
3	user_id	mediumint	8	0	N	N	0	用户ID
4	nickname	varchar	16	0	Y	N		昵称：[0,16]
5	praise_len	int	10	0	Y	N	0	点赞数
6	hits	int	10	0	N	N	0	访问数
7	title	varchar	125	0	N	N		标题
8	keywords	varchar	125	0	Y	N		关键词
9	description	varchar	255	0	Y	N		描述
10	url	varchar	255	0	Y	N		来源地址
11	tag	varchar	255	0	Y	N		标签
12	img	text	65535	0	Y	N		封面图
13	content	longtext	2147483647	0	Y	N		正文
14	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
15	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
16	avatar	varchar	255	0	Y	N		发帖人头像：
17	type	varchar	64	0	N	N	0	论坛分类：[0,1000]用来搜索指定类型的论坛帖

表forum_type (论坛分类)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	type_id	smallint	5	0	N	Y		分类ID：[0,10000]
2	name	varchar	16	0	N	N		分类名称：[2,16]
3	description	varchar	255	0	Y	N		描述：[0,255]描述该分类的作用
4	url	varchar	255	0	Y	N		外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
5	father_id	smallint	5	0	N	N	0	上级分类ID：[0,32767]
6	icon	varchar	255	0	Y	N		分类图标：
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表hits (用户点击)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	hits_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：

表link (友情链接)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	link_id	smallint	5	0	N	Y		友情链接ID：[0,32767]
2	display	smallint	5	0	N	N	100	显示顺序：[0,10000]数值越小，越优先显示
3	name	varchar	32	0	Y	N		链接名称：[0,32]
4	img	varchar	255	0	Y	N		友情链接图：[0,255]
5	url	varchar	255	0	Y	N		跳转链接：[0,255]
6	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
7	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表message (留言板)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	message_id	int	10	0	N	Y		留言板ID:
2	user_id	int	10	0	N	N	0	用户ID:
3	title	varchar	64	0	Y	N		标题:
4	content	longtext	2147483647	0	N	N		内容:
5	nickname	varchar	32	0	N	N		昵称:
6	avatar	varchar	255	0	Y	N		头像:
7	email	varchar	125	0	Y	N		留言者邮箱
8	phone	varchar	11	0	Y	N		留言者手机号码
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
11	reply	longtext	2147483647	0	Y	N		回复
12	reply_state	tinyint	4	0	Y	N	0	回复状态

表news_and_information (新闻资讯)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	news_and_information_id	int	10	0	N	Y		新闻资讯ID
2	news_headlines	varchar	64	0	Y	N		新闻标题
3	news_id	varchar	64	0	Y	N		新闻编号
4	news_type	varchar	64	0	Y	N		新闻类型
5	cover	varchar	255	0	Y	N		封面
6	time	datetime	19	0	Y	N		时间
7	place	varchar	64	0	Y	N		地点
8	content	longtext	2147483647	0	Y	N		内容
9	hits	int	10	0	N	N	0	点击数
10	praise_len	int	10	0	N	N	0	点赞数
11	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
12	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表news_classification (新闻分类)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	news_classification_id	int	10	0	N	Y		新闻分类ID
2	news_type	varchar	64	0	Y	N		新闻类型
3	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表notice (公告)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	notice_id	mediumint	8	0	N	Y		公告id：
2	title	varchar	125	0	N	N		标题：
3	content	longtext	2147483647	0	Y	N		正文：
4	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
5	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表praise (点赞)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	praise_id	int	10	0	N	Y		点赞ID：
2	user_id	int	10	0	N	N	0	点赞人：
3	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	status	bit	1	0	N	N	1	点赞状态:1为点赞，0已取消

表registered_users (注册用户)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	registered_users_id	int	10	0	N	Y		注册用户ID
2	name	varchar	64	0	Y	N		姓名
3	gender	varchar	64	0	Y	N		性别
4	examine_state	varchar	16	0	N	N	已通过	审核状态
5	user_id	int	10	0	N	N	0	用户ID
6	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
7	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表sensitive_vocabulary (敏感词汇)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	sensitive_vocabulary_id	int	10	0	N	Y		敏感词汇ID
2	sensitive_vocabulary	varchar	64	0	Y	N		敏感词汇
3	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
4	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表slides (轮播图)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	slides_id	int	10	0	N	Y		轮播图ID：
2	title	varchar	64	0	Y	N		标题：
3	content	varchar	255	0	Y	N		内容：
4	url	varchar	255	0	Y	N		链接：
5	img	varchar	255	0	Y	N		轮播图：
6	hits	int	10	0	N	N	0	点击量：
7	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
8	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

表upload (文件上传)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	upload_id	int	10	0	N	Y		上传ID
2	name	varchar	64	0	Y	N		文件名
3	path	varchar	255	0	Y	N		访问路径
4	file	varchar	255	0	Y	N		文件路径
5	display	varchar	255	0	Y	N		显示顺序
6	father_id	int	10	0	Y	N	0	父级ID
7	dir	varchar	255	0	Y	N		文件夹
8	type	varchar	32	0	Y	N		文件类型

表user (用户账户：用于保存用户登录信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	user_id	mediumint	8	0	N	Y		用户ID：[0,8388607]用户获取其他与用户相关的数据
2	state	smallint	5	0	N	N	1	账户状态：[0,10](1可用\|2异常\|3已冻结\|4已注销)
3	user_group	varchar	32	0	Y	N		所在用户组：[0,32767]决定用户身份和权限
4	login_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	上次登录时间：
5	phone	varchar	11	0	Y	N		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
6	phone_state	smallint	5	0	N	N	0	手机认证：[0,1](0未认证\|1审核中\|2已认证)
7	username	varchar	16	0	N	N		用户名：[0,16]用户登录时所用的账户名称
8	nickname	varchar	16	0	Y	N		昵称：[0,16]
9	password	varchar	64	0	N	N		密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
10	email	varchar	64	0	Y	N		邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
11	email_state	smallint	5	0	N	N	0	邮箱认证：[0,1](0未认证\|1审核中\|2已认证)
12	avatar	varchar	255	0	Y	N		头像地址：[0,255]
13	open_id	varchar	255	0	Y	N		针对获取用户信息字段
14	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：

表user_group (用户组：用于用户前端身份和鉴权)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	group_id	mediumint	8	0	N	Y		用户组ID：[0,8388607]
2	display	smallint	5	0	N	N	100	显示顺序：[0,1000]
3	name	varchar	16	0	N	N		名称：[0,16]
4	description	varchar	255	0	Y	N		描述：[0,255]描述该用户组的特点或权限范围
5	source_table	varchar	255	0	Y	N		来源表：
6	source_field	varchar	255	0	Y	N		来源字段：
7	source_id	int	10	0	N	N	0	来源ID：
8	register	smallint	5	0	Y	N	0	注册位置:
9	create_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	创建时间：
10	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间：

3.4本章小结

整个娱爆新闻网站的需求分析主要对系统总体架构以及功能模块的设计，通过建立E-R模型和数据库逻辑系统设计完成了数据库系统设计。

4 娱爆新闻网站详细设计与实现

娱爆新闻网站的详细设计与实现主要是根据前面的娱爆新闻网站的需求分析和娱爆新闻网站的总体设计来设计页面并实现业务逻辑。主要从娱爆新闻网站界面实现、业务逻辑实现这两部分进行介绍。

4.1用户功能模块

4.1.1 前台首页界面

当进入娱爆新闻网站的时候，首先映入眼帘的是系统的导航栏，下面是轮播图以及系统内容，其主界面展示如下图4-1所示。

图4-1 前台首页界面图

4.1.2用户登录界面

娱爆新闻网站中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的，当用户输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到娱爆新闻网站的首页中；否则将会提示相应错误信息，用户登录界面如下图4-2所示。

图4-2用户登录界面图

登录关键代码如下所示。

const md5 = require("md5");

var Controller = require("../core/controller.js");

class Login extends Controller {

constructor(config) {

super(

Object.assign({

tpl: "./login/",

service: "user",

config

)

);

}

var body = ctx.request.body;

var obj = await $.services["user"].get_obj({

username: body.username

},{like:false});

if (obj) {

var group = await $.services["user_group"].get_obj({

name:obj.user_group

})

if (group){

if (group.name!=="管理员"){

var sql = "select examine_state from "+ group.source_table +" WHERE user_id = " + obj.user_id;

var userExamine = await $.mysql.run(sql);

if (userExamine && userExamine.length > 0 && userExamine[0].examine_state!=="已通过"){

return {

error: {

code: 70000,

message: "该用户审核未通过"

};

}

if (obj.state!==1){

return {

error: {

code: 70000,

message: "用户非可用状态，不能登录"

};

}

var password = md5(body.password);

if (password === obj.password) {

ctx.session.user = obj;

var date = Date.parse(new Date());

var token = md5(obj.user_id + "_" + date);

await $.services["access_token"].add({

token,

info: JSON.stringify(obj),

user_id:obj.user_id

});

obj.token = token;

return {

result: {obj}

};

} else {

return {

error: {

code: 70000,

message: "密码错误"

};

}

}else {

return {

error: {

code: 70000,

message: "用户组不存在"

};

}

} else {

return {

error: {

code: 70000,

message: "账户不存在"

}

};

}

};

4.1.3用户注册界面

不是娱爆新闻网站中正式用户的是可以在线进行注册的，如果你没有本娱爆新闻网站的账号的话，添加“注册”，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可用户注册成功。其用用户注册界面展示如下图4-3所示。

图4-3用户注册界面图

注册关键代码如下所示。

var group_list = await $.services["user_group"].get_list({}, Object.assign({}, this.config));

return await ctx.render(this.config.tpl + "index.html", {

group_list

});

};

var user = $.services.user;

var body = ctx.request.body;

var username = body.username;

var obj = await user.get_obj({

username

});

if (obj) {

return {

error: {

code: 70000,

message: "账户名已存在",

};

} else {

var password = md5(body.password);

var nickname = body.nickname;

var user_group = body.user_group;

var email = body.email;

var email_state= body.hasOwnProperty('email_state') ? body.email_state : 0;

var phone = body.phone;

var phone_state= body.hasOwnProperty('phone_state') ? body.phone_state : 0;

var avatar = body.avatar;

var bl_reg = await user.add({

username,

password,

nickname,

user_group,

email,

email_state,

phone,

phone_state,

avatar

});

if (bl_reg) {

return {

result: "注册成功"

};

} else {

return {

error: {

code: 70000,

message: "注册失败",

};

}

};

4.1.4交流论坛界面

当用户点击交流论坛时可以在线发布评论，管理员可以对用户发布的评论信息进行管理。交流论坛界面如下图4-4所示。

图4-4交流论坛界面图

4.1.5 密码修改界面

用户使用该娱爆新闻网站注册完成后，用户对登录密码有修改需求时，系统也可以提供用户修改密码权限。系统中所有的操作者能够变更自己的密码信息，执行该功能首先必须要登入系统，然后选择密码变更选项以后在给定的文本框中填写初始密码和新密码来完成修改密码的操作。在填写的时候，假如两次密码填写存在差异，那么此次密码变更操作失败，下面的图片展示的就是该板块对应的工作面。密码修改界面如下图4-5所示。

图4-5密码修改界面图

密码修改关键代码如下：

Change_password.prototype.api = async function(ctx) {

var user = $.services.user;

var body = ctx.request.body;

var token = ctx.headers["x-auth-token"];

var access_token = await $.services["access_token"].get_obj({

token

});

var info = JSON.parse(access_token.info);

var username = info.username;

var o_password = md5(body.o_password);

var change_password = md5(body.password);

var obj = await user.get_obj({

username

});

if (obj) {

if (o_password == obj.password) {

var bl_for = await user.set({

username

}, {

password: change_password

});

if (bl_for) {

return {

result: "修改成功"

};

} else {

return {

error: {

code: 70000,

message: "修改失败",

};

}

} else {

return {

error: {

code: 70000,

message: "密码错误",

};

}

} else {

return {

error: {

code: 70000,

message: "账户不存在",

};

}

};

4.1.6新闻资讯界面

当访客点击娱爆新闻网站中导航栏上的“新闻资讯”后将会进入到该“新闻资讯”列表的界面，然后选择想要看的新闻资讯信息，点击进入到详细界面，在详细界面可以收藏+赞+评论等操作，新闻资讯界面如下图4-6所示。

图4-6新闻资讯界面图

新闻资讯关键代码如下所示。

Controller.prototype.add = async function(ctx) {

var result = await this.service.add(ctx.request.body, this.config);

if (this.service.error) {

return {

error: this.service.error,

};

}

return {

result,

};

4.1.7网站公告界面

当点击导航栏上的“网站公告”的时候，就会进入对应的界面查看公告信息，网站公告界面如下图4-7所示。

图4-7网站公告界面图

4.2管理员功能模块

4.2.1登录界面

管理员在登录界面输入账号+密码，点击“登录”按钮，系统在用户数据库表中会对管理员，系统用户的账号进行匹配，账号+密码正确的话，就会登录到系统中各个用户的主管理界面，否则提示对应的信息，返回到登录的界面，如果管理人员忘记密码的话，点击“忘记密码”根据提示可以找回密码，然后再进行登录其主界面展示如下图4-8所示。

图4-8登录界面图

4.2.2用户管理界面

娱爆新闻网站中的管理员在“用户管理”这一菜单是中可以对注册的注册用户以及管理员人员进行管控。界面如下图4-9所示。

图4-9用户管理界面图

用户管理代码如下所示。

module.exports = {

db: "mysql",

web: {

port: 5000,

host: "0.0.0.0"

mysql: {

port: 3306,

host: "127.0.0.1",

user: "root",

password: "root",

database: "project93355",

log: false,

timezone:"08:00"

}

4.2.3网站公告管理界面

网站公告管理模块是对网站公告进行增删改查，只有管理员权限才能进行更新维护。界面如下图4-10所示。

图4-10网站公告管理界面图

网站公告管理关键代码如下所示。

Service.prototype.get_list = async function(query, config) {

var sql = $.mysql.toGetSql(query, Object.assign({}, this.config, config || {}));

return await this.run(sql);

};

Service.prototype.get_list = async function(query, config) {

var sql = $.mysql.toGetSql(query, Object.assign({}, this.config, config || {}));

return await this.run(sql);

};

4.2.4新闻资讯管理界面

点击“新闻资讯”按钮会显示资讯详情列表有数据分析按钮，再点击“新闻资讯添加”里对“数据分析”这一项进行相关内容添加编辑，点击“提交”后在后台首页界面数据分析统计界面就可以显示了，点击“新闻资讯”按钮会显示自己添加的新闻资讯，如果想要添加新的新闻资讯，点击“添加”按钮根据提示输入新闻标题，点击“提交”后在新闻资讯界面就可以显示了，如果信息有错可以对新闻资讯进行更新维护，也可以直接删除某一新闻资讯，如下图4-11所示。

图4-11新闻资讯管理界面图

新闻资讯管理代码如下所示。

Controller.prototype.count = async function(ctx) {

var result = await this.service.count(ctx.request.query, this.config);

if (this.service.error) {

return {

error: this.service.error,

};

}

return {

result,

};

4.2.5系统管理界面

管理员在系统管理模块中的友情链接管理功能里提供了查看网易、腾讯网、百度等已存在友情链接的详细信息。管理员允许对这些功能进行查询，重置，删除，添加等管控操作，这些功能共同构成了友情链接管理的核心模块，提供了对友情链接的全面管理和操作，效果会直接呈现在系统首页底部，如下图4-12所示。

图4-12系统管理界面图

5系统测试

5.1系统测试的目的

系统开发到了最后一个阶段那就是系统测试，系统测试对软件的开发其实是非常有必要的。因为没什么系统一经开发出来就可能会尽善尽美，再厉害的系统开发工程师也会在系统开发的时候出现纰漏，系统测试能够较好的改正一些bug，为后期系统的维护性提供很好的支持。通过系统测试，开发人员也可以建立自己对系统的信心，为后期的系统版本的跟新提供支持。

5.2 系统测试用例

系统测试包括：用户登录功能测试、网站公告展示功能测试、新闻资讯添加、新闻资讯搜索、密码修改功能测试，如表5-1、5-2、5-3、5-4、5-5所示：

用户登录功能测试：

表5-1 用户登录功能测试表

用例名称	用户登录系统
目的	测试用户通过正确的用户名和密码可否登录功能
前提	未登录的情况下
测试流程	1) 进入登录页面 2) 输入正确的用户名和密码
预期结果	用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入
实际结果	实际结果与预期结果一致

网站公告查看功能测试：

表5-2 网站公告查看功能测试表

用例名称	网站公告查看
目的	测试网站公告查看功能
前提	用户登录
测试流程	点击网站公告列表
预期结果	可以查看到所有网站公告信息
实际结果	实际结果与预期结果一致

管理员添加新闻资讯界面测试：

表5-3 管理员添加新闻资讯界面测试表

用例名称	新闻资讯发布测试用例
目的	测试新闻资讯发布功能
前提	用户正常登录情况下
测试流程	1）点击新闻资讯信息管理就，然后点击添加后并填写信息。 2）点击进行提交。
预期结果	提交以后，页面首页会显示新的新闻资讯信息
实际结果	实际结果与预期结果一致

新闻资讯搜索功能测试：

表5-4新闻资讯搜索功能测试表

用例名称	新闻资讯搜索测试
目的	测试新闻资讯搜索功能
前提	无
测试流程	1）在搜索框填入搜索关键字。 2）点击搜索按钮。
预期结果	页面显示包含有搜索关键字的新闻资讯
实际结果	实际结果与预期结果一致

密码修改功能测试：

表5-5 密码修改功能测试表

用例名称	密码修改测试用例
目的	测试管理员密码修改功能
前提	管理员用户正常登录情况下
测试流程	1）管理员密码修改并完成填写。 2）点击进行提交。
预期结果	使用新的密码可以登录
实际结果	实际结果与预期结果一致

5.3 系统测试结果

通过编写娱爆新闻网站的测试用例，已经检测完毕用户登录模块、网站公告查看模块、新闻资讯添加模块、新闻资讯搜索模块、密码修改功能测试，通过这5大模块为娱爆新闻网站的后期推广运营提供了强力的技术支撑。

结论

至此，娱爆新闻网站已经结束，在开发前做了许多的准备，在本系统的设计和开发过程中阅览和学习了许多文献资料，从中我也收获了很多宝贵的方法和设计思路，对系统的开发也起到了很重要的作用，系统的开发技术选用的都是自己比较熟悉的，比如VUE、Node.js技术、MYSQL，这些技术都是在以前的学习中学到了，其中许多的设计思路和方法都是在以前不断地学习中摸索出来的经验，其实对于我们来说工作量还是比较大的，但是正是由于之前的积累与准备，才能顺利的完成这个项目，由此看来，积累经验跟做好准备是十分重要的事情。

当然在该系统的设计与实现的过程中也离不开老师以及同学们的帮助，正是因为他们的指导与帮助，我才能够成功的在预期内完成了这个系统。同时在这个过程当中我也收获了很多东西，此系统也有需要改进的地方，但是由于专业知识的浅薄，并不能做到十分完美，希望以后有机会可以让其真正的投入到使用之中。

参考文献

[1]杨纤. 媒体融合背景下地方新闻网站的创新与发展——以兰溪新闻网推动新媒体融合发展为例 [J]. 传媒论坛, 2023, 6 (23): 86-88.

[2]Peng Z ,Yuhan G . Detecting prototype pollution for node.js: Vulnerability review and new fuzzing inputs [J]. Computers & Security, 2024, 137 103625-.

[3]陈耀峰. 媒体融合背景下地方新闻网站的发展策略研究——以平潭网为例 [J]. 中国地市报人, 2023, (11): 55-56.

[4]Xiao Z ,Ali Y ,Xin W , et al. Sports Work Strategy of College Counselors Based on MySQL Database Big Data Analysis [J]. International Journal of Information Technology and Web Engineering (IJITWE), 2023, 18 (1): 1-14.

[5]杨芬,宋晓燕. MySQL数据库应用的课程教学分析 [J]. 电子技术, 2023, 52 (10): 180-181.

[6]刘莉莉. 娱乐新闻报道提升文化属性强化社会意义的路径探析 [J]. 海河传媒, 2023, (05): 79-81.

[7]杨华,徐扬. MySQL数据库对中文编码支持的探讨 [J]. 网络安全和信息化, 2023, (10): 157-160.

[8]李淑玲,朱彤. 基于Node.js技术的在线测试系统设计方案 [J]. 科技资讯, 2023, 21 (19): 35-38.

[9]王学兴. 如何做好行业媒体的网站编辑工作 [J]. 中国报业, 2023, (17): 202-203.

[10]Joel P . Entertainment journalism as a resource for public connection: A qualitative study of digital news audiences [J]. Media, Culture & Society, 2023, 45 (6): 1242-1257.

[11]邓杰海,刘薇,汤小燕. 基于Node.js的开源架构Electron赋能前端开发 [J]. 现代计算机, 2023, 29 (16): 87-92.

[12]张威. 基于Vue.js的专利学习平台开发设计与实现 [J]. 电脑知识与技术, 2023, 19 (22): 57-60.

[13]白雨萌,赵丽娟. 新媒体环境下新闻娱乐化的新发展 [J]. 中国报业, 2023, (14): 126-128.

[14]林展翅. 全媒体语境下地方新闻网站理论宣传的创新实践——以星辰在线为例 [J]. 长沙大学学报, 2023, 37 (04): 33-37.

[15]刘懿宁. 社会化媒体中新闻娱乐化现象探究 [J]. 国际公关, 2023, (11): 158-160.

[16]张锦原. 新媒体语境下新闻“泛娱乐化”现象研究 [J]. 新闻前哨, 2023, (11): 79-80.

[17]张猛,何姗姗. 基于Vue+Node.js的智能小区数据管理系统设计与实现 [J]. 电脑知识与技术, 2023, 19 (14): 46-49+53.

[18]孙佳. 关于网络娱乐新闻真实性失范的反思 [J]. 声屏世界, 2023, (01): 23-25.

[19]贝倩妮. 娱乐新闻文化先行——从《文娱新天地》看文化与娱乐的兼容 [J]. 国际公关, 2022, (14): 173-175.

[20]金中丽. 文娱新闻报道怎样兼顾娱乐性和文化性 [J]. 全媒体探索, 2022, (06): 57-58.

致谢

在此论文完成之际，感谢我的指导老师。在指导老师的网页设计课上，当时我学到了很多东西，这对于我实习过程中也打了一定的基础，而且指导老师对于我的设计也提出许多建议，并予以悉心的指导，对于一些细小的问题都耐心的指导我去完善，授予我写论文的好友，时常的鼓励我，另外感谢教导我完善此项目的前端同学，对于这个项目，我是边学习边实现完成的，有许多东西开始并不是很明白，但前端开发的同学非常耐心的引导我去将这个项目完成，在系统的后端开发中，所用到的后台开发技术也时常会给我讲解，助于我更好的将论文完成，在此对帮助到我的同学和一直予以教导的指导老师致以衷心的感谢，祝事业有成。