微信小程序之“无人机新闻”开发文档
源码连接
https://github.com/LiuGuoXiangIamI/drone-news
目录： 开发前的准备；
微信小程序前端开发
管理网站前端开发
数据库设计
后端开发
前后端交互方法
Bug总结
总结与不足
附录：代码链接
- 开发前的准备
1、选定开发工具：
微信开发者工具（安装及配置见微信小程序官方开发文档）；
Eclipse；
- 前端+后端选定框架：
前端：html+css+javascript
后端：springboot（Eclispe配置Springboot见博客）+mybatis
- 微信小程序前端开发
功能需求与设计：
- 新闻浏览：
功能说明：该功能主要为用户可以浏览新闻列表或者新闻详情页
功能设计：
①调用后台接口，将数据库中的新闻动态显示在页面中，一是显示在微信小程序的起始页面和新闻列表页面，显示新闻的大致信息（作者信息、发布日期、新闻标题、新闻图片、新闻简介及阅读量和收藏量等信息），二是显示在新闻详情页，我们根据用户选中的新闻获取到其特定序号（NewsID)，传到新闻详情页，调用后台接口从数据库中显示该新闻的完整信息。
②用户每点击新闻进入浏览后，该新闻属性中的浏览量实现+1的操作
- 视频浏览
功能说明：该功能主要为用户可以播放相关视频
功能设计：
调用后端接口，将数据库中的视频获取动态显示在视频页中即可，基本功能与新闻浏览类似
- 新闻编写
功能说明：该功能实现用户可自行在小程序端进行新闻编写
功能设计：
设计新闻发布的格式，指定用户的填写方式，然后将用户所填写的内容通过后台接口发布到数据库中，并在新闻相关页面中做到显示
- 视频发布
功能说明：该功能实现用户可自行在小程序端进行视频发布
功能设计：
基本等同新闻编写
- 新闻收藏
功能说明：该功能实现用户在看到喜欢或值得收藏的新闻后，对该新闻进行收藏及后期查看或删除的功能
功能设计：
①用户点击新闻下方的收藏键，若之前未收藏，则将该新闻通过后台接口发布到数据库中，然后用户在点击收藏页面时，将数据库中的内容显示在界面中，并做到收藏按钮颜色变化的实现
②用户取消已收藏的新闻时，将收藏键颜色变化，并从数据库中删除该收藏新闻
- 新闻评论
功能说明：该功能实现用户在浏览新闻后在新闻下方发表自己的评论
功能实现：
逻辑等同于新闻和视频的发布，针对特定的要对其进行评论的新闻进行
- 圈子功能（用于用户发布一些自己的新鲜活动）
功能说明：用户可发布自己身边的新鲜事和日常生活记录
功能实现：
与新闻、视频发布等逻辑相同
页面设计：
- 起始页
页面预览：
页面元素：
①轮播图；②功能按键；③轮播图（公告滚动）；④新闻及视频的图文列表
页面所实现功能：
新闻浏览；页面跳转；收藏；下拉刷新
页面代码：
见“微信小程序/pages/index”
- 新闻列表页
页面预览：
页面元素：
新闻图文列表
页面所实现功能：
新闻浏览；收藏
页面代码：
见“微信小程序/pages/news”
- 视频列表页
页面预览：
页面元素：
视频图文列表
页面所实现功能：
视频播放；收藏
页面代码：
见“微信小程序/pages/video”
- 新闻详情页
页面预览：
页面元素：
新闻属性内容；新闻评论部分；发表评论部分
页面所实现功能：
新闻浏览；收藏；发表评论
页面代码：
见“微信小程序/pages/newsPage”
- 新闻编写页
页面预览：
页面元素：
新闻属性输入框；“发表新闻”按钮
页面所实现功能：
编写并发送新闻
页面代码：
见“微信小程序/pages/writeNews”
- 视频发布页
页面预览：
页面代码：
见“微信小程序/pages/sendVideo”
- “圈子”页
页面预览：
页面元素：
导航栏；信息图文列表
页面所实现功能：
“圈子”浏览；“圈子”发表
页面代码：
见“微信小程序/pages/circle”
- 用户中心页
页面预览：
页面元素：
顶部用户信息；中部功能按键
页面所实现功能：
获取用户信息；页面跳转
页面代码：
见“微信小程序/pages/mine”
- 收藏页
页面预览：
页面元素：
被收藏新闻视频图文列表
页面所实现功能：
浏览新闻视频；取消收藏
页面代码：
见“微信小程序/pages/collectPage”
- 管理网站前端开发
功能需求与设计：
- 功能需求
①管理者登录
②管理者注册（不推荐）
③新闻管理（主要实现审核与删除功能）
④视频管理（主要实现审核与删除功能）
- 功能设计
①管理者登录：
提供一种较为安全的登录机制，用户在发送登录请求时，先将用户输入的用户名发给后台，检测是否存在，若存在，在后台端产生随机数并将该随机数返回按一定规则插入到用户所输入的密码中，随后进行md5加密，发给后台，后台进行密码与该随机数的同种处理后进行判断是否相等；在登录界面的前端添加验证码
②管理者注册（不推荐）
用户填写用户名及密码发到数据库中进行存储
③视频与新闻管理（主要实现审核与删除功能）
调用后台接口，根据返回的所有新闻及视频的信息在前端利用表格动态显示，并添加删除的功能，并给新闻内容和视频加入链接，方便审核
页面设计
①管理者登录
页面预览：
页面元素：
输入框；验证码；登录注册按钮
页面所实现功能：
获取用户输入信息；动态点击生成验证码及前端验证码判断；登录注册按钮
页面代码：
见“fly-news/src/main/resources/templates/login.html”
②视频与新闻管理
页面预览：
页面元素：
表格；删除按钮；链接
页面所实现功能：
审核与删除
页面代码：
见“fly-news/src/main/resources/templates/a.html”
③管理者注册
页面预览：
页面元素：
表单；“注册”按钮；链接
页面所实现功能：
管理者注册
页面代码：
见“fly-news/src/main/resources/templates/regist.html”
- 数据库设计
采用工具：mysql+navicat
数据库设计：
①新闻
新闻我们需要给新闻编号，记录新闻发表日期、发表作者信息、新闻简介、新闻内容、新闻浏览量、收藏量、评论等新闻属性
②视频
等同于新闻
③用户
用户需要记录用户的特定id、用户所发表的新闻和视频ID、用户所评论的新闻视频ID及评论内容等
④管理者
管理者需要记录管理者的用户名及密码等信息
数据库浏览：
数据库结构：
例：newstable
- 后端开发
该微信小程序后端采用的是springboot+mybatis
项目结构如下：
项目结构说明：
pom.xml：项目依赖项等的管理（maven库）
FlyNewsApplication：项目启动项
News等：新闻类等
UserMapper：由于本人并不是很了解springboot的原理，本人感觉该层是对sql语句的外部封装
UserService：本人感觉为对UserMapper的进一步封装
UserServiceImpl：对UserService的重写
UserController：提供与前端交互的封装
application.yml：与数据库连接等的配置
UserMapper.xml：sql语句的内部封装
后端接口所提供的功能：
查询所有新闻视频；查询单条新闻视频；删除单条新闻视频；用户上传新闻视频；用户上传评论；查询视频新闻数量；收藏新闻；判断管理者登录；注册管理者信息；收藏新闻
UserController预览：
UserMapper.xml预览：
其他具体代码见“fly-news”
- 前后端交互方法
①微信端与后台交互
采用wx.request()
示例：
若方法为“POST”，则header内容应改为：'content-type': 'application/x-www-form-urlencoded',
②管理网页端与后台交互
在本项目中采用了两种方式，一为xmlHttpRequest，而为ajax
示例如下：
xmlHttpRequest
ajax
- Bug总结
- 微信端常碰到undefined问题，往往是调用数据时没有使用this.setData或者此时this应改为that
- spring boot中@RequestMapping注解，这个注解会将 HTTP 请求映射到 MVC 和 REST 控制器的处理方法上，你可以将多个请求映射到一个方法上去，只需要添加一个带有请求路径值列表的 @RequestMapping 注解就行了。例如
Spring MVC 的 @RequestMapping 注解能够处理 HTTP 请求的方法, 比如 GET, PUT, POST, DELETE 以及 PATCH。所有的请求默认都会是 HTTP GET 类型的。为了能将一个请求映射到一个特定的 HTTP 方法，你需要在 @RequestMapping 中使用 method 来声明 HTTP 请求所使用的方法类型。
- 在springboot开发中，我使用了mybatis（MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射），这里就存在了jdbcType与java类型的转化问题了，例如
具体对应关系见博客：https://blog.csdn.net/haofeng82/article/details/34857991
- 一开始我是在localhost的另一个端口下的服务器上配置的管理网站（vs code提供的live server服务器插件）结果发生了跨域的问题，导致不能访问，然后我放弃了vs code，转而将网站利用thymeleaf的jar包，然后配置了application.yml，将网站放在了fly-news/src/main/resources/templates/的下面，然后就可以了，不过跨域问题的话可能采用代理设置可以解决。
- Springboot注解中@Controller和@RestController的区别，@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。
- 如果只是使用@RestController注解Controller，则Controller中的方法无法返回jsp页面，或者html，配置的视图解析器 InternalResourceViewResolver不起作用，返回的内容就是Return 里的内容。
- 如果需要返回到指定页面，则需要用 @Controller配合视图解析器InternalResourceViewResolver才行。
示例：
返回数据
返回html
- 数据库中两列字段的拼接方法
- MySQL数据库表的主键ID乱了，重新+1排列(用在删除某一项内容后的主键重排序)
- springboot之Request header is too large问题，这是因为tomcat限制了header的长度，在springboot中，由于tomcat内置，所以我们在application.yml加入
即可
9、springboot之Invalid character found in the request target.he valid characters are defined in RFC 7230 and RFC 3986错误，这个是因为springboot内置的tomcat有对特殊字符的限制
- 总结与不足
通过制作本微信小程序，我学会了springboot的使用和前端制作以及前端与后台交互的方式，并学会使用了数据库，为以后的项目打下了基础。
不足之处在于小程序很多地方并不完善，功能过于单一和简陋，用户逻辑欠缺考虑等。
附录：源码连接
4683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
