vue.js技术的新闻app设计与实现(源码)【字数：7434】
现代生活中的人们是离不开新闻的，传统意义上人们喜欢以观看电视的方式来获得新闻内容，但是现阶段随着生活节奏的不断加快，人们更加愿意从网络的渠道去获得新闻的资讯，而手机也成为了人们的第一首选，所以人们愿意下载一些新闻，播报类的APP，在日常生活的细碎时间当中，能够迅速的了解发生的国内外时事新闻，通过手机APP的方式获得新闻，不仅非常的便利，而且也能够使人们的新闻获取方式更加的快捷和现代化。文章主要通过新闻APP的开发背景和意义进行开篇，通过对App的可行性分析来制定设计目标，该项目设计使用了vue.js框架进行前端设计，通过Node+Mongodb实现后端接口的开发以及数据库的建立。并通过结构框架分别对后端接口和前端页面进行了细致的分析。并在分析之后总结出该项目的发展前景以及个人所获。
目 录
一、 引言 1
（一） 开发背景 1
（二） 选题意义 1
（三） 项目可行性分析 1
1. 可行性 1
2. 设计目标 1
（四） 开发技术及运行环境 2
1．开发技术 2
2．前端开发环境 2
3．后台开发环境 2
4．测试环境 2
二、 系统分析与设计 2
（一） 系统功能需求 2
（二） 系统功能模块图 3
（三） 注册流程图 3
三、 新闻APP结构概念介绍 3
（一） 系统管理接口 3
1.App注册 3
2.App登录 4
（二） 新闻接口 6
1.获取新闻 6
2.获取资讯 7
3.发布新闻 8
（三） 个人中心接口 9
1.获取我的发布 9
2.删除我的发布 10
3.获取我的名片信息 11
4.密码找回接口 12
四、 Android端实施 13
（一） 注册模块 13
（二） 登录模块 14
（三） 忘记密码 15
（四） 新闻主页 15
（五） 首页搜索页 17
*好棒文|www.hbsrm.com +Q: @351916072@
（六） 资讯页面 22
（七） 发布页面 23
（八） 消息页面 24
（九） 我的页面 27
1.我的名片 29
2.我的发布 30
3.关于我们 31
4.退出登录 32
五、 该新闻APP的市场发展前景 33
六、 软件测试 35
七、 总结 37
参考文献 39
引言
开发背景
近几年各手机APP行业迎来了发展的春天，人们对于手机的依赖越来越强，无论是在日常生活当中的工作或是休息的时间，人们都愿意拿起手机，浏览手机上的各种类型APP，既能够优化工作的流程，同时又能够丰富人们的日常休息时间，给人们带去知识和快乐。人们除了使用手机听歌或是玩游戏之外，获取新闻资讯，也是人们经常浏览手机的目的之一，同时从用户来说，我们人口众多，庞大的人群显示出庞大的用户市场。我们也知道，对新闻的了解是人的天生的追求，没有一个人是一座孤岛。新闻是人们生活的必需品，人们需要及时的了解社会动态以来指导自己的生活。否则，将被时代淘汰，这不是危言耸听，而是大家所认同的，因此手机上的新闻有诸多种新闻，APP在手机的应用市场上纷纷上架，本文主要以新闻APP为研究对象，主要针对APP本身的编程技术讲解，通过对api接口的剖析，让读者更加清楚项目本身的数据获取流程以及传参方式，通过对前端uniapp讲解，让读者了解项目中组件的运用以及页面的布局。
选题意义
笔者之所以认为新闻APP具有广阔的发展空间，非常丰富的信息资源，当新时代，很大程度上来讲，信息就是资本，对信息的及时掌握就是开拓一条捷径，这就可以看到了新闻APP相较于同类产品的独特优势。首先，新闻媒体或者自媒体一键发送，受众便可以第一时间在平台接收。相比于大篇幅的文字来说，新闻APP更加注重对图片和视频的运用，图片和视频的传播信息的效果是远高于文字的，其次，新闻APP的开发已有前车之鉴，基本框架和运用模式已经成熟，这给新闻APP的新研究提供了理论基础，毕竟不是一个崭新的事物，获取相关接口也十分容易，实时抓取当前热点新闻，增加的用户的依赖性。因此，在新闻APP上开发单独的小视频模块非常有必要。
项目可行性分析
1.可行性
在这样一个信息高速传播的时代,人们需要及时了解社会动态信息来指导自己的生活及工作。因此，新闻APP凭借丰富的资讯资源、实时的信息推送和方便的社交互动被越来越多的用户认可。
新闻APP的开发已有前车之鉴，基本框架和运用模式已经成熟，这给新闻APP的新研究提供了理论基础。新闻APP 的搜索功能给用户带来的便利不可小觑，不仅可以搜索有关内容的新闻，还可以推送出一些引人耳目的八卦信息，增加了用户对这款APP的依赖性。新闻APP的模块化分类，将海量信息分类，有利于用户查询到想要的新闻资讯。
相较其他软件，人们愿意把新闻APP当做一个工具来使用。前端页面的设计为了显得更加简单实用，就直接套用的uniapp的相关列表组件。必要的分栏模块设计使新闻APP显得更具有朴素性，简易操作，容易理解。
2.设计目标
为了能够让用户快速了解新鲜事，丰富自己的业余时间，新闻app的兴起，能更好地解决了人们可以随时随便去了解娱乐，社会新闻等。本项目的主要设计目标包括用户登录、注册、发布、删除、正常浏览各页面新闻，搜索新闻等功能。
开发技术及运行环境
1．开发技术
该项目主要以前端和服务端交叉进行，前端以Vue全家桶为主，包括vuerouter（路由的跳转）、vuex（存储数据的仓库）、axios（接口请求）等。服务端以Node展开，对于前端开发人员而言，JavaScript必定了然于胸，作为一门脚本语言，以此来运行在服务端，性能方面及其优秀，减少了许多内存损耗，让本项目在运作上面更加行云流水，体验效果极佳。那么运用其核心Web框架Express，以非关系型数据库MongoDB进行数据的增删改查操作，两者衔接，相辅相成。
2．前端开发环境
软件：HbuilderX（是用来支持H5页面的web开发。），雷电模拟器(是手机端app在电脑上运行的虚拟终端。)
3．后台开发环境
软件：VS Code （是一款免费的开源编程软件，它的安装包非常小，而且启动速度非常快，可以无形中提高我们的用户体验。）
4．测试环境
（1）安卓手机两台
vivox9sl（安卓8.1 4+64 1.8GHZ高通骁龙八核 MSM8976）
目 录
一、 引言 1
（一） 开发背景 1
（二） 选题意义 1
（三） 项目可行性分析 1
1. 可行性 1
2. 设计目标 1
（四） 开发技术及运行环境 2
1．开发技术 2
2．前端开发环境 2
3．后台开发环境 2
4．测试环境 2
二、 系统分析与设计 2
（一） 系统功能需求 2
（二） 系统功能模块图 3
（三） 注册流程图 3
三、 新闻APP结构概念介绍 3
（一） 系统管理接口 3
1.App注册 3
2.App登录 4
（二） 新闻接口 6
1.获取新闻 6
2.获取资讯 7
3.发布新闻 8
（三） 个人中心接口 9
1.获取我的发布 9
2.删除我的发布 10
3.获取我的名片信息 11
4.密码找回接口 12
四、 Android端实施 13
（一） 注册模块 13
（二） 登录模块 14
（三） 忘记密码 15
（四） 新闻主页 15
（五） 首页搜索页 17
*好棒文|www.hbsrm.com +Q: @351916072@
（六） 资讯页面 22
（七） 发布页面 23
（八） 消息页面 24
（九） 我的页面 27
1.我的名片 29
2.我的发布 30
3.关于我们 31
4.退出登录 32
五、 该新闻APP的市场发展前景 33
六、 软件测试 35
七、 总结 37
参考文献 39
引言
开发背景
近几年各手机APP行业迎来了发展的春天，人们对于手机的依赖越来越强，无论是在日常生活当中的工作或是休息的时间，人们都愿意拿起手机，浏览手机上的各种类型APP，既能够优化工作的流程，同时又能够丰富人们的日常休息时间，给人们带去知识和快乐。人们除了使用手机听歌或是玩游戏之外，获取新闻资讯，也是人们经常浏览手机的目的之一，同时从用户来说，我们人口众多，庞大的人群显示出庞大的用户市场。我们也知道，对新闻的了解是人的天生的追求，没有一个人是一座孤岛。新闻是人们生活的必需品，人们需要及时的了解社会动态以来指导自己的生活。否则，将被时代淘汰，这不是危言耸听，而是大家所认同的，因此手机上的新闻有诸多种新闻，APP在手机的应用市场上纷纷上架，本文主要以新闻APP为研究对象，主要针对APP本身的编程技术讲解，通过对api接口的剖析，让读者更加清楚项目本身的数据获取流程以及传参方式，通过对前端uniapp讲解，让读者了解项目中组件的运用以及页面的布局。
选题意义
笔者之所以认为新闻APP具有广阔的发展空间，非常丰富的信息资源，当新时代，很大程度上来讲，信息就是资本，对信息的及时掌握就是开拓一条捷径，这就可以看到了新闻APP相较于同类产品的独特优势。首先，新闻媒体或者自媒体一键发送，受众便可以第一时间在平台接收。相比于大篇幅的文字来说，新闻APP更加注重对图片和视频的运用，图片和视频的传播信息的效果是远高于文字的，其次，新闻APP的开发已有前车之鉴，基本框架和运用模式已经成熟，这给新闻APP的新研究提供了理论基础，毕竟不是一个崭新的事物，获取相关接口也十分容易，实时抓取当前热点新闻，增加的用户的依赖性。因此，在新闻APP上开发单独的小视频模块非常有必要。
项目可行性分析
1.可行性
在这样一个信息高速传播的时代,人们需要及时了解社会动态信息来指导自己的生活及工作。因此，新闻APP凭借丰富的资讯资源、实时的信息推送和方便的社交互动被越来越多的用户认可。
新闻APP的开发已有前车之鉴，基本框架和运用模式已经成熟，这给新闻APP的新研究提供了理论基础。新闻APP 的搜索功能给用户带来的便利不可小觑，不仅可以搜索有关内容的新闻，还可以推送出一些引人耳目的八卦信息，增加了用户对这款APP的依赖性。新闻APP的模块化分类，将海量信息分类，有利于用户查询到想要的新闻资讯。
相较其他软件，人们愿意把新闻APP当做一个工具来使用。前端页面的设计为了显得更加简单实用，就直接套用的uniapp的相关列表组件。必要的分栏模块设计使新闻APP显得更具有朴素性，简易操作，容易理解。
2.设计目标
为了能够让用户快速了解新鲜事，丰富自己的业余时间，新闻app的兴起，能更好地解决了人们可以随时随便去了解娱乐，社会新闻等。本项目的主要设计目标包括用户登录、注册、发布、删除、正常浏览各页面新闻，搜索新闻等功能。
开发技术及运行环境
1．开发技术
该项目主要以前端和服务端交叉进行，前端以Vue全家桶为主，包括vuerouter（路由的跳转）、vuex（存储数据的仓库）、axios（接口请求）等。服务端以Node展开，对于前端开发人员而言，JavaScript必定了然于胸，作为一门脚本语言，以此来运行在服务端，性能方面及其优秀，减少了许多内存损耗，让本项目在运作上面更加行云流水，体验效果极佳。那么运用其核心Web框架Express，以非关系型数据库MongoDB进行数据的增删改查操作，两者衔接，相辅相成。
2．前端开发环境
软件：HbuilderX（是用来支持H5页面的web开发。），雷电模拟器(是手机端app在电脑上运行的虚拟终端。)
3．后台开发环境
软件：VS Code （是一款免费的开源编程软件，它的安装包非常小，而且启动速度非常快，可以无形中提高我们的用户体验。）
4．测试环境
（1）安卓手机两台
vivox9sl（安卓8.1 4+64 1.8GHZ高通骁龙八核 MSM8976）
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/690.html
