课题-健康上报小程序

课题-健康上报小程序

本文所涉及所有资源均在传知代码平台可获取

Table of Contents

• 课题-健康上报小程序
• 概述
• 用到的技术及框架
• 开发工具
• 附录资源截图
• 演示效果
• 前端
• 后端
• 核心逻辑
• 需求分析
• 接口设计
• 统一返回接口
• 登录接口设计
• 注册用户接口设计
• 功能页面
• 后台
• 小程序
• 部署方式
• 后台管理系统
• 接口端
• 小程序端
• 下载方式

概述

这几天接到了个学生的需求，大概就是做一个在校常态化管理的小程序，该项目可以满足基本的增删查改，搭建简单适合学生课题作业

用到的技术及框架

• Spring boot
• element
• node
• mysql 5.6
• Vue2

开发工具

• IntelliJ IDEA
• 微信小程序

附录资源截图

演示效果

前端

后端

核心逻辑

需求分析

接口设计

统一返回接口

新建base包

新建Result类

import lombok.Data;

import java.io.Serializable;


@Data
public class Result implements Serializable {

    private Integer code;

    private String message;

    private Object data;

    public Result(ResultCode resultCode,Object data){
        this.code = resultCode.getCode();
        this.message = resultCode.getMsg();
        this.data = data;
    }
}

新建ResultCode类

package com.example.minipro_cov.base;
public enum ResultCode {

    SUCCESS(200, "成功"),
    FAILLER(100,"失败"),
    ;

    private Integer code;

    private String msg;

    public Integer getCode() {
        return this.code;
    }

    public String getMsg() {
        return this.msg;
    }

    ResultCode(Integer code, String msg) {
        this.code = code;
        this.msg = msg;
    }
}

使用方法，在控制器里面返回

return Result result = new Result(ResultCode.SUCCESS,"你的数据");

测试结果

程序运行演示测试结果

登录接口设计

新建userController.java

//登录接口
    @RequestMapping("/login")
    public Result login(@RequestParam("username") String username, @RequestParam("password") String password){
        QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
        userQueryWrapper.select("id","nickname","uname","pwd").like("uname" , username).like("pwd",password);
//把select()放在最后面也可以，但我一般喜欢放在最前面，和sql语法保持一致
        List<User> userList = userMapper.selectList(userQueryWrapper);
if (!userList.isEmpty()){
    Result result = new Result(ResultCode.SUCCESS,userList);
    return result;

}else{
    Result result = new Result(ResultCode.FAILLER,userList);
    return result;

}

    }

注册用户接口设计

//    注册用户
    @RequestMapping("/regidt")
    public Result regidt(@RequestParam String nickname, @RequestParam String uname, @RequestParam String pwd){
    User user=new User();
    user.setNickname(nickname);//设置昵称
    user.setUname(uname);//设置学号、工号
    user.setPwd(pwd);//设置密码
    int result= userMapper.insert(user);

   if (result==1){
       return new Result(ResultCode.SUCCESS,result);
   }
else{
       return new Result(ResultCode.FAILLER,result);
   }
    }

功能页面

后台

用户管理

打卡管理

小程序

个人信息修改
可以进行修改编辑自己的个人信息和登录密码

我的打卡
含有打卡记录轨迹

部署方式

后台管理系统

打开【后台管理系统】文件夹，通过

npm i

进行安装，安装结束后，输入下方代码完成运行

  npm run serve

浏览器访问localhost:8080即可

  账户 admin 
  密码 123

接口端

导入后端代码（文件夹名：Springboot后端服务）到idea ，配置数据库连接，依赖文件，运行run即可

小程序端

通过微信开发者工具打开【健康上报小程序】文件夹，运行即可

TIPS：
如果需要发布小程序到外部使用，修改前端requests.js文件里面的const baseURL = ‘http://127.0.0.1:8088’ 打包即可

下载方式

点击底部附件即可完成下载

文章代码资源点击附件获取