论文总字数：30376字

摘 要

互联网的出现本质就是为了对信息的高速传播。新闻是传播信息的重要渠道，每天世界各地都在发生着不同的新闻。因为没有纸质新闻媒体印刷、运输、分发的过程，基于互联网的新闻资讯系统具有便捷性以及高时效性。但是除了获得迅速、准确的时事新闻，读者也希望能够认识更多的人，互相交流看法、针砭时弊和求同存异。因此，我们希望实现一个轻量级、小型化、具备一定社交属性的新闻资讯网站。

本论文围绕基于Vue的新闻资讯系统的设计与实现，介绍了系统的研究背景以及国内研究现状。然后对基于Vue的新闻资讯系统的功能性需求和技术实现进行详细分析。系统的前端使用Vue.js框架，服务端使用Java平台的Spring Boot框架构建，使用MySQL数据库存储后台数据，ORM框架选用Mybatis框架。使用Webpack以及Maven分别作为前端以及服务端的构建工具。最终实现了一个基于Vue的新闻资讯系统，包括登陆、注册、浏览新闻、发布评论、收藏新闻、关注用户等主要功能。最后完成对系统的功能性测试，测试结果表明系统可以正常运行。

关键词：Vue.js；新闻资讯系统；轻量级

Abstract

The essence of the Internet is to spread information at high speed. News is an important channel for disseminating information, and different news is happening all over the world every day. Because there is no process of printing, transportation and distribution of paper news media, the Internet-based news information system is convenient and highly time-sensitive. But in addition to getting quick and accurate news on current affairs, readers also want to know more people, exchange views, keep abreast of the problems, and seek common ground while reserving differences. Therefore, we hope to realize a lightweight, miniaturized news and information website with certain social attributes.

This paper focuses on the design and implementation of the Vue-based news information system, and introduces the research background of the system and the domestic research status. Then, the functional requirements and technical realization of the Vue-based news information system are analyzed in detail. The front end of the system uses the Vue.js framework, the server end is built using the Spring Boot framework of the Java platform, and the MySQL database is used to store the background data. The ORM framework uses the Mybatis framework. Use Webpack and Maven as the front-end and server-side build tools, respectively. Finally, a Vue-based news information system was implemented, including main functions such as login, registration, browsing news, posting comments, collecting news, and following users. Finally, complete the functional test of the system, the test results show that the system can run normally.

KEY WORDS: Vue.js；News Information System ；Lightweight

目 录

摘 要 I

Abstract II

第1章 绪论 1

1.1 目的及意义 1

1.2 国内外发展现状 1

1.2.1 国外发展现状 1

1.2.2 国内发展现状 2

1.3 研究内容 2

第2章 需求分析 3

2.1 功能性需求分析 3

2.1.1 登陆注册 3

2.1.2 个人信息模块 4

2.1.3 关注与粉丝模块 4

2.1.4 新闻模块 4

2.1.5 评论模块 5

2.2 非功能性需求分析 5

2.3 本章小结 6

第3章 新闻资讯系统的设计 7

3.1 系统架构设计 7

3.2 系统总体设计与模块设计 8

3.2.1 系统总体的功能模块划分 8

3.2.2 登陆注册模块 9

3.2.3 个人信息模块 10

3.2.4 关注与粉丝模块 11

3.2.5 新闻模块 12

3.2.6 评论模块 13

3.3 数据库设计 13

3.3.1 ER图设计 14

3.3.2 数据库表设计 14

3.4 本章小结 16

第4章 系统实现 17

4.1 系统开发与运行环境 17

4.2 相关技术介绍 18

4.2.1 Vue.js框架 18

4.2.2 Spring Boot框架 18

4.3 系统关键技术实现 19

4.3.1权限控制拦截器 19

4.3.2 MD5加密算法的实现 20

4.4 系统功能模块实现 22

4.4.1 登陆注册模块的实现 22

4.4.2 个人信息模块的实现 24

4.4.3 关注与粉丝模块的实现 26

4.4.4 新闻模块的实现 28

4.4.5 评论模块的实现 29

4.4 本章小结 32

第5章 系统测试 33

5.1 功能测试 33

5.2 本章小结 38

第6章 总结与展望 39

6.1 全文总结 39

6.2 展望 39

参考文献 40

致 谢 42

第1章 绪论

1.1 目的及意义

为了对信息的高速传播, 有了互联网的诞生。基于互联网的新闻资讯系统相较传统的新闻资讯媒体相比更具优势^[1]。因为没有传统纸质新闻媒体制造报刊、运输至各门店、销售分发的过程，基于互联网的新闻资讯系统具有便捷性以及高时效性同时也更具经济效益^[2]。但是互联网新闻资讯平台的发展已经逐渐陷入瓶颈，在新闻资讯系统平台上，读者不仅希望获得迅速、准确的时事新闻，也希望能够认识更多的人，互相交流看法、针砭时弊和求同存异。因此，我们希望实现一个轻量级、小型化、具备一定社交属性的新闻资讯网站。

一个轻量级、具备一定社交属性的新闻资讯网站具有十分重要的意义。关注用户、评论新闻、收藏新闻等功能可以使得每个用户得到其他用户对于某一新闻的态度与看法，用户也可以直抒胸臆发布自己理解、见闻。用户可以查看其他用户的收藏夹来了解他人喜好。相较于现有其他的新闻资讯网站，用户可以形成自己的一个微型社交圈子。这样不仅可以提升用户的使用体验，增加产品使用时间，还能增加用户的留存率。

1.2 国内外发展现状

国内的新闻资讯网站的发展特点各有不同的侧重点。以各自的主流新闻资讯网站雅虎新闻与头条新闻为例子。

1.2.1 国外发展现状

雅虎新闻的特点是对受众的心理更加了解^[3]。Yahoo除了使用优秀的电脑算法来精选新闻，还会同时使用精良的编辑团队进行人工选择。Yahoo的新闻来源除了CNN、《华盛顿邮报》《纽约时报》等传统核心媒体, Twitter、FaceBook新兴社交、资讯网站也是它们的内容生产地。他们很擅长从这些新兴媒体发掘新闻趋势。

同时，雅虎向用户推送的新闻中很少出现形容词,如同电脑自动完成的一样。Yahoo的算法以最基础的5W1H(When、Where、What、Who、Why、How)出发,剔除了形容词、点评等会对受众立场产生干扰的因素。

雅虎新闻的资讯组成也更加贴合用户习惯。雅虎新闻的一条新闻往往会由以下要素构成:关键引语、视频、图像、数据图表。以简明扼要、清晰直接的方式帮助用户理解新闻,这满足了大部分于互联网浏览新闻的用户的要求:用短平快、多媒体的形式来填补他们的碎片时间。

1.2.2 国内发展现状

国内的头条新闻的特点为智能推荐、高效益、原创保护。

请支付后下载全文，论文总字数：30376字