技术栈
支持以下技术栈
小程序端运行软件 微信开发者工具/hbuiderx
uni-app框架：使用Vue.js开发跨平台应用的前端框架，编写一套代码，可编译到Android、小程序等平台。
前端开发框架:vue.js
数据库 mysql 版本不限
后端语言框架支持：
1 java(SSM/springboot)-idea/eclipse
2.Nodejs+Vue.js -vscode
3.python(flask/django)–pycharm/vscode
4.php(thinkphp/laravel)-hbuilderx
数据库工具：Navicat/SQLyog等都可以
uniapp系统设计
- 了解uni-app的特点
2.掌握uni-app运行环境和开发环境的部署
3.了解整个uni-app项目的开发流程 - 熟悉uni-app的页面开发
5.掌握uni-app的组件库和样式设计
6.实现页面布局和样式设计
7.数据处理和绑定
8.网络请求和数据交互
9.状态管理和全局数据
10.导航和路由控制
11.本地存储和缓存
12.第三方插件和扩展
13.多平台适配和界面优化
14.多平台打包发布
具体实现截图
前端
微信开发工具主要是根据系统层提供的框架来进行开发，由于小程序并非在浏览器中运行的，因此在 web 中禁用了 Document、Window 之类的方法。 微信开发者工具与 HTML5 开发工具有相似之处，但在预览模式方面存在一定差异，该工具属于微信本身，故能够有效的实现同步本地文件、开发小程序以及调试等一系列流程。除此之外，该工具开发了一些标签语言和样式语言。在微信小程序用的开发过程中， 进一步的提供了原生АРР的组件，使得开发者的工作更为便捷
后端
后端：使用微信小程序原生技术栈 JavaScript 简称 JS，是计算机编程语言，常用于控制整个页面的逻辑，是基于 web 页面开发并且具有安全性的脚本语言，该语言的类型是动态且灵活的，仅仅需要浏览器 功能支持即可运转，故跨平台性和适用性都很高。JSON：全称 JavaScript Object Notation，可用于存储数据，配置系统全局或单页面。WXML：全称 WeiXin Markup Language，是微信小程序框架设计语言，用于展示 UI（User Interface 用户界面）模板；WXSS：全称基于JavaScript 的垃圾分类系统的设计与实现 4 WeiXin Style Sheets，用于规定 UI 样式，具有CSS（Cascading Style Sheets 层叠样式表） 的大部分特性，在其基础上扩展了尺寸单位和样式导入功能。WXS：全称 WeiXin Script， 封装后的 JS 一般内嵌于 WXML 页面，方便构建页面。
java类核心代码部分展示
@RestController
@RequestMapping("/yuangong")
public class YuangongController {
@Autowired
private YuangongService yuangongService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@IgnoreAuth
@RequestMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", username));
if(user==null || !user.getMima().equals(password)) {
return R.error("账号或密码不正确");
}
String token = tokenService.generateToken(user.getId(), username,"yuangong", "员工" );
return R.ok().put("token", token);
}
/**
* 注册
*/
@IgnoreAuth
@RequestMapping("/register")
public R register(@RequestBody YuangongEntity yuangong){
//ValidatorUtils.validateEntity(yuangong);
YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", yuangong.getYuangonggonghao()));
if(user!=null) {
return R.error("注册用户已存在");
}
Long uId = new Date().getTime();
yuangong.setId(uId);
yuangongService.insert(yuangong);
return R.ok();
}
/**
* 退出
*/
@RequestMapping("/logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Long id = (Long)request.getSession().getAttribute("userId");
YuangongEntity user = yuangongService.selectById(id);
return R.ok().put("data", user);
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
YuangongEntity user = yuangongService.selectOne(new EntityWrapper<YuangongEntity>().eq("yuangonggonghao", username));
if(user==null) {
return R.error("账号不存在");
}
user.setMima("123456");
yuangongService.updateById(user);
return R.ok("密码已重置为：123456");
}
可行性论证
程序调试主要有三大功能区：模拟器、调试工具和小程序操作区
微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号。
技术可行性
本系统客户端基于“uniapp”框架开发，采用WXML、WXSS、JS以及微信提供的丰富的客户端API组件，来实现客户端界面和功能。服务端依靠微信小程序云开发技术，根据微信提供的丰富的服务端API接口完成前后端数据的交互。实现客户端和服务端数据的请求和数据处理等关键部分。前端使用微信开发者工具设计wxml，对应小程序的基本组件和页面，通过微信官方的控件属性或者自设属性填充wxss，然后根据业务流程确定各页面逻辑js。数据库使用mysql，开发者数据库管理工具使用Navicat for MySQL同时也给我提供了一次实际模拟锻炼的机会，使我在设计一套完整的软件系统的步骤、方法、及思路上有了一个全新的认识和体会，能够使我更深入的了解软件设计和开发，整合自己以前所学的知识。。
。
系统测试
系统测试主要是为了避免用户在使用时发生问题，增强用户体验感，为了不影响用户的使用，我们需要从多角度、多思路去考虑系统可能遇到的问题，通过不同的模拟场景来发现缺陷并解决问题。在测试的过程中也可以了解到该系统的质量情况，系统功能是否健全，系统逻辑是否顺畅。一个合格的系统测试过程完成后将大大提升系统质量和使用感。测试的目标是验证系统是否符合需求规格说明书的定义，并找出与需求规格说明书不符合或与之冲突的内容。测试过程中一定站在用户的角度考虑问题，避免一些不切实际的场景，浪费测试时间，从而可能会引起问题导致预期结果与实际结果不符。
实现思路
pages 主要页面， 其中pages文件夹中 index文件中可布局底部的tab页面，通过v-if判断显示不同的tab页
colorui 使用了color-ui样式，个人认为样式非常好看，非常感谢！
static目录： 存放静态文件
App.vue： 页面入口文件
main.js: 项目入口文件
manifest.json: 存放App信息
pages.json: 页面信息
uni.scss: 全局样式
（1）通过查阅相关的书籍搜集材料，进行需求调查。
（2）写需求分析文档，确定系统的主要模块。
（3）画出ER图，流程图等图示以用来明确模块之间的关系
（4）根据需求分析，建立数据库文档，设计表和字段。
（5）进行系统的界面设计。
（6）通过python+java+node.js+php语言和MySQL数据库实现本系统。
图书馆，导师的咨询以及论文网站文献的查阅，网络的查找等。通过相关技术论坛咨询。其中用到的技术为业界比较认可的互联网技术，可以提供更多的技术支持。
系统实现
系统实现阶段包括前台界面的UI设计和后台功能模块代码设计。要求系统界面简洁直观、系统操作流畅，后台代码采用三层架构（界面表示层、业务逻辑层、数据访问层）编写。
系统测试阶段包括界面测试和功能测试。使用系统，验证系统界面是否简洁，页面不同功能的衔接是否灵活，正确。根据实际流程，在设计的系统上进行模拟测试，查看功能是都基本满足工作的需要。从而进一步修改完善系统，提高系统的实用性和稳定性
源码获取
文章最下方名片联系我即可~
✌💗大家点赞、收藏、关注、评论啦 、查看✌💗
👇🏻获取联系方式👇🏻
扫一扫
1784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
