springboot+微信小程序（无人机新闻）（eclipse）开发文档
微信小程序之“无人机新闻”开发文档
源码连接
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的使用和前端制作以及前端与后台交互的方式，并学会使用了数据库，为以后的项目打下了基础。
不足之处在于小程序很多地方并不完善，功能过于单一和简陋，用户逻辑欠缺考虑等。
附录：源码连接
https://github.com/LiuGuoXiangIamI/drone-news
springboot+微信小程序（无人机新闻）（eclipse）开发文档相关推荐
- 知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言 微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
- 微信小程序（天气预报）开发文档
相关Demo以放到github上 ---------飞机------------https://github.com/193Eric/XCXdemo.git 小程序技术文档 一．小程序应用分析 1. ...
- 微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 数据绑定(核心知识) 数据绑定的运算与逻 ...
- springboot+微信小程序老年人健康保障管理系统毕业设计源码302303
基于springboot微信小程序的老年人健康保障管理系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是 ...
- springboot 微信小程序获取用户手机号 最新方式
springboot 微信小程序获取用户手机号 直接开整!!! 现在有两种方式获取微信用户的手机号 第一种 这种方式比较旧了,也能获取到手机号,但不建议使用. 1.前端调用wx.login()(官方的 ...
- SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录 一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
- 基于SpringBoot+微信小程序的壁纸小程序
基于SpringBoot+微信小程序的壁纸小程序 ✌全网粉丝20W+,csdn特邀作者.博客专家.CSDN新星计划导师.java领域优质创作者,博客之星.掘金/华为云/阿里云/InfoQ等平台优质作者 ...
- 仿京细菜谱微信小程序源码云开版
仿京细菜谱微信小程序源码云开版,不需要域名和服务器即可搭建小程序,直接导入开发者工具即可上传审核. 源码下载:仿京细菜谱微信小程序源码云开版-小程序文档类资源-CSDN下载
- 多功能在线起名取名查重工具微信小程序源码 可开流量主 带安装教程
这是一个实用需求量还是比较高的一款微信小程序源码,由多个功能组合而成. 具体如下: 名字来源查询: 取名工具(支持多种选择取名): 查询重复名(输入名字查询有多少人和你吃饭): 诗文(里面就是一些古诗 ...
- 基于springboot微信小程序支付功能实现
基于springboot微信小程序支付功能实现 简单的封装微信小程序支付功能,支付工具类所依赖的fastjson.lombok.wagegger, 1.添加maven依赖: 版本号可根据自己项目的实际 ...
最新文章
- @HostListener 可接收的事件列表
- 麦肯锡：优秀数据科学家的5个特征！
- linux不识别ntfs分区,WinUbuntu下linux无法挂载NTFS格式分区问题的解决
- Cent OS dhcp配置
- .gitignore文件_Django项目.gitignore文件建议忽略文件清单及是否需要忽略数据库迁移文件...
- React-Native 填坑之ListView(item更新)
- 几种常用的排序方法7--希尔排序
- java中文本框如何表示为空值_去jsp页面中文本框有NULL值的代码
- 江苏海洋大学计算机知识竞赛,厦门大学第十届海洋知识竞赛重磅来袭！
- Mac底下java和jre路径
- 第39天-进程 _1（2013.09.11）
- 开课吧：分享一下C语言发展史的点点滴滴
- QString字符串中双引号的梗
- 数组字符串转int数组_7.5 C++字符串数组 | 字符串数组输出
- 添加mysql.h头文件
- ubutu虚拟机和主机共享同一网络
- 语音社交app源码中音频混音的实现步骤
- 中文乱码解决办法（java）
- windows如何解压tar.gz文件
- Tomcat解惑 之 CATALINA_HOME与CATALINA_BASE