博主介绍:👉全网个人号和企业号粉丝40W+,每年辅导几千名大学生较好的完成毕业设计,专注计算机软件领域的项目研发,不断的进行新技术的项目实战👈
⭐️热门专栏推荐订阅⭐️ 订阅收藏起来,防止下次找不到🔎百套Python实战项目持续更新中~
有需求的各位可以先收藏起来,还有大家在毕设选题,开题报告有疑惑的都可以找我,帮你完成文档⚠️文末联系方式获取完整资料⚠️
本章主要讲述的是记账本小程序的设计开发结构,简单介绍了开发流程与数据库设计的原则以及数据表的关系结构图,并且详细的展示了数据表的内部结构信息与属性。
4.1 系统体系结构
系统启动后,在登录界面,输入正确的账号、密码、角色,选择进入管理员界面或用户界面,管理员界面是用来管理页面与系统的所有功能,用户界面可以正常的使用,并对支出分类、收入分类、支出信息、收入信息等进行份内的操作,系统登录结构图如图4-1所示。
图4-1 系统登录结构图
管理员模块属于是网站的后台,进入之后有大量的管理员功能,管理员也可以使用用户模块的功能,为了维护网站的稳定与页面的布局,将管理员模块的功能详细化后可以使用系统管理对页面进行布局修改,可以系统简介提示用户规范,用户模块只可以对支出分类、收入分类、支付信息、收入信息等进行查询等,并且更改个人信息,记账本小程序总体结构图如图4-2所示。
图4-2 记账本小程序总体结构图
4.2 开发流程设计
系统的开发流程设计简单的介绍了开发过程,先对任务书进行分析,根据要实现的功能对各个模块进行开发,之后再对模块一一进行测试,测试成功后将模块整合再测试整体功能,完善整体结构。开发系统流程图如图4-3所示。
图4-3开发系统流程图
4.3 数据库设计原则
数据库设计之后,根据数据库关系,可以更加清晰地了解到数据库结构,每一个数据表之间的关系,再创建数据表。快速更改和查询对应的信息,有了数据库就不用在程序和代码中寻找。
分析记账本小程序的数据结构后,在E-R图中分析管理员登录时的模式,需要输入用户名与密码,角色,管理员信息E-R如图4-4所示。
图4-4 管理员信息E-R图
收入信息信息E-R图如图4-5所示。
图4-5收入信息信息E-R图
支付信息信息E-R图如图4-6所示。
图4-6支付信息信息事E-R图
用户信息E-R图如图4-7所示。
图4-7用户信息E-R图
4.4 数据表信息
在关系数据E-R图中,分析并创建数据表,数据表用来记录信息,数据表关系由多个数据表组成,下面介绍的是数据表各个字段信息如下表所示。
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
userid | bigint | 用户id | |||
username | varchar | 100 | 用户名 | ||
tablename | varchar | 100 | 表名 | ||
role | varchar | 100 | 角色 | ||
token | varchar | 200 | 密码 | ||
addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP | ||
expiratedtime | timestamp | 过期时间 | CURRENT_TIMESTAMP |
表4-2:在线留言
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
userid | bigint | 留言人id | |||
username | varchar | 200 | 用户名 | ||
avatarurl | longtext | 4294967295 | 头像 | ||
content | longtext | 4294967295 | 留言内容 | ||
cpicture | longtext | 4294967295 | 留言图片 | ||
reply | longtext | 4294967295 | 回复内容 | ||
rpicture | longtext | 4294967295 | 回复图片 |
表4-3:收入分类
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
shouruleixing | varchar | 200 | 收入类型 |
表4-4:系统公告
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
title | varchar | 200 | 标题 | ||
introduction | longtext | 4294967295 | 简介 | ||
picture | longtext | 4294967295 | 图片 | ||
content | longtext | 4294967295 | 内容 |
表4-5:支出信息
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
zhichuleixing | varchar | 200 | 支出类型 | ||
zhichujine | int | 支出金额 | |||
xinxibeizhu | varchar | 200 | 信息备注 | ||
dengjiriqi | date | 登记日期 | |||
yonghuming | varchar | 200 | 用户名 | ||
userid | bigint | 用户id |
表4-6:收入信息
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
shouruleixing | varchar | 200 | 收入类型 | ||
shourujine | int | 收入金额 | |||
xinxibeizhu | varchar | 200 | 信息备注 | ||
dengjiriqi | date | 登记日期 | |||
yonghuming | varchar | 200 | 用户名 | ||
userid | bigint | 用户id |
表4-7:支出类型
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
zhichuleixing | varchar | 200 | 支出类型 |
表4-8:关于我们
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
title | varchar | 200 | 标题 | ||
subtitle | varchar | 200 | 副标题 | ||
content | longtext | 4294967295 | 内容 | ||
picture1 | longtext | 4294967295 | 图片1 | ||
picture2 | longtext | 4294967295 | 图片2 | ||
picture3 | longtext | 4294967295 | 图片3 |
表4-9:支出分类
表4-10:用户
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
addtime | timestamp | 创建时间 | CURRENT_TIMESTAMP | ||
yonghuming | varchar | 200 | 用户名 | ||
xingming | varchar | 200 | 姓名 | ||
mima | varchar | 200 | 密码 | ||
xingbie | varchar | 200 | 性别 | ||
shoujihao | varchar | 200 | 手机号 | ||
touxiang | longtext | 4294967295 | 头像 |
表4-11:管理员表
字段名称 | 类型 | 长度 | 字段说明 | 主键 | 默认值 |
id | bigint | 主键 | 主键 | ||
username | varchar | 100 | 用户名 | ||
password | varchar | 100 | 密码 | ||
role | varchar | 100 | 角色 | 管理员 | |
addtime | timestamp | 新增时间 | CURRENT_TIMESTAMP |
4.5 本章小结
本章具体讲述了系统的大体结构,主要包括用户和管理员两大系统模块,使其各个功能简洁明了。同时对数据库的设计原则进行分析,从而提高了小程序的效率。
第5章 系统实现
本章讲述的是系统对各个模块功能实现的效果图,对管理员功能和用户功能分别进行了展示,页面布局清晰,操作简单快捷,基本实现了对用户和管理员对系统的需求。
5.1 小程序后端管理员功能实现
小程序后端管理员登录,在登录页面选择需要登录的角色,在正确输入用户名和密码后,点击登录操作;如图5-1所示。
图5-1 管理员登录界面
管理员密码修改功能:每一个新的管理员都可以修改密码,在这里修改密码时有一定的限制要求,原密码正确,新密码以及确认新密码输入的内容必须一致,点击确认方可完成修改。二者有其一不满足要求,则修改失败。在这里新密码和确认密码都是使用的掩码,对于密码修改,目的在于,如果更换管理员时,管理员可以将密码进行修改,以保证后台的安全性,也确保网站的安全性;如图5-2所示。
图5-2 修改密码界面
管理员进入主页面,主要功能包括对首页、个人中心、支出分类管理、收入分类管理、用户管理、支付信息管理、收入信息管理、系统管理等进行操作。管理员主页面如图5-3所示:
图5-3管理员主界面
管理员点击支出分类管理:在支出分类管理页面,可以对支出分类等信息,进行查询或者新增、修改、删除支出分类信息等操作,如图5-4所示:
图5-4支出分类管理界面
管理员点击收入分类管理:在收入分类管理页面,可以对收入分类等信息,进行查询、新增或者删除收入分类信息等操作,如图5-5所示:
图5-5收入分类管理界面
管理员点击用户管理:在用户管理页面,可以对用户名、姓名、性别、手机号、头像等信息,进行查询、新增、查看评论或者删除用户信息等操作,如图5-6所示:
图5-6用户管理界面
管理员点击支付信息管理:在支付信息管理页面,可以对支出分类、金额/元、时间等信息,进行查询或者删除支付信息信息等操作,如图5-7所示:
图5-7支付信息管理界面
管理员点击收入信息管理:在收入信息管理页面,可以对收入分类、金额/元、时间等信息,进行查询、新增、查看评论或者删除收入信息信息等操作,如图5-8所示:
图5-8收入信息管理界面
管理员点击系统管理,在系统管理页面对轮播图管理、系统公告、关于我们、系统简介等信息,进行查询或新增、删除系统信息等操作,如图5-9所示:
图5-9系统管理界面
5.2 小程序前端用户功能实现
第一次使用本小程序的使用者,首先是要进行注册,点击“注册”,然后就会进入到注册的页面里面,将用户信息录入注册表,确认信息正确后,系统才会进入登录界面,用户登录成功后可使用本小程序所提供的所有功能。用户注册界面如图5-10所示。
图5-10 用户注册界面
首先双击打开小程序,连上网络之后会显示出本系统的登录界面,这是进入小程序的第初始页面“登录”,能成功进入到该登录界面则代表小程序开启是成功的,接下来就可以操作本系统所带有的其他所有的功能。用户登录界面如图5-11所示。
图5-11 用户登录界面
小程序首页是用户注册登录后进入的第一个界面,用户可通过小程序端首页的最下面的那一行导航栏中的“首页、系统简介、我的”功能等进行详细操作。小程序首页界面如图5-12所示。
图5-12 小程序首页界面图
JAVA后端代码实现
package com.controller;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Date;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.TokenEntity;
import com.entity.UserEntity;
import com.service.TokenService;
import com.service.UserService;
import com.utils.CommonUtil;
import com.utils.MD5Util;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;
/**
* 登录相关
*/
@RequestMapping("users")
@RestController
public class UserController{
@Autowired
private UserService userService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
if(user==null || !user.getPassword().equals(password)) {
return R.error("账号或密码不正确");
}
String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
return R.ok().put("token", token);
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody UserEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
if(user==null) {
return R.error("账号不存在");
}
user.setPassword("123456");
userService.update(user,null);
return R.ok("密码已重置为:123456");
}
/**
* 列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,UserEntity user){
EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/list")
public R list( UserEntity user){
EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
ew.allEq(MPUtil.allEQMapPre( user, "user"));
return R.ok().put("data", userService.selectListView(ew));
}
/**
* 信息
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") String id){
UserEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Long id = (Long)request.getSession().getAttribute("userId");
UserEntity user = userService.selectById(id);
return R.ok().put("data", user);
}
/**
* 保存
*/
@PostMapping("/save")
public R save(@RequestBody UserEntity user){
// ValidatorUtils.validateEntity(user);
if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
return R.error("用户已存在");
}
userService.insert(user);
return R.ok();
}
/**
* 修改
*/
@RequestMapping("/update")
public R update(@RequestBody UserEntity user){
// ValidatorUtils.validateEntity(user);
UserEntity u = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername()));
if(u!=null && u.getId()!=user.getId() && u.getUsername().equals(user.getUsername())) {
return R.error("用户名已存在。");
}
userService.updateById(user);//全部更新
return R.ok();
}
/**
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] ids){
userService.deleteBatchIds(Arrays.asList(ids));
return R.ok();
}
}
源码获取
大家点赞、收藏、关注 ,让更多需要的同学看到
不同开发语言专栏推荐订阅:
👇下方有我的微信名片👇