AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Springboot健康上报小程序: element后台管理系统(完整代码)

2023-10-18 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Springboot健康上报小程序: element后台管理系统(完整代码)

这几天接到了个学生的需求，挺简单的，大概就是按照她的需求做一个疫情期间常态化管理的小程序，由于我对java不熟悉，基本上是边做边学，这里我将对本次项目做个记录

✨✨欢迎订阅本专栏或者关注我，大家一起努力每天一题算法题✨✨

❤️❤️❤️ 最后，希望我的这篇文章能对你的有所帮助！

愿自己还有你在未来的日子，保持学习，保持进步，保持热爱，奔赴山海！ ❤️❤️❤️

快速预览：

前端gif

后端gif

目录

需求分析

数据库设计

接口设计

统一返回接口

新建base包

新建Result类

package com.example.minipro_cov.base;
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;
/**
 * @Description:
 * @author: 夜七天
 * @create: 2021/08/07 15:07
 */
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);
   }
    }

小程序设计

请求封装

在utils文件夹里面，新建requests.js

代码：

const GET = 'GET';
const POST = 'POST';
const baseURL = 'http://127.0.0.1:8080';  // 接口请求地址
function request(method, url, data) {
  wx.showLoading({
    title: '请求中..',
  })
  console.log(baseURL + url)
    return new Promise(function(resolve, reject) {
        let header = {
            'content-type': 'application/json'
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === POST ? JSON.stringify(data) : data,
            header: header,
            success(res) {
              console.log(res.data);
              //请求成功返回数据
              resolve(res.data);
              wx.hideLoading()
          },
          fail(err) {
            wx.hideLoading()
              //请求失败
              reject(err)
              console.log(err);
          },
             complete: function () {
                // 配对使用（loading消失）
                wx.hideLoading();
             }
        })
    })
}
const API = {
  // 登录
  login: (data) => request(GET, `/login`, data)
};
module.exports = {
  API: API
}

在需要用的login.js里面引用

const $api = require('../../utils/request').API;

使用方法（登录）

//登录请求封装
    $api.login(params).then(res => {
      console.log(res);
})

首页

登录

登录页面制作

app.json里面新建

“pages/login/login”

login.js

const $api = require('../../utils/request').API;
Page({
  /**
   * 页面的初始数据
   */
  data: {
username:'',
password:''
  },
  content:function(ee){
    let that=this;
console.log(ee.detail.value);
that.setData({
  username:ee.detail.value
})
  },
  goadmin:function(){
    let that=this;
    let params = {
      username: that.data.username,
      password: that.data.password
    }
//登录请求封装
    $api.login(params).then(res => {
      console.log(res);
      if (res.code==200) {
       wx.showToast({
          title: '登录成功',
          icon:'none'
        })
      } else {
        wx.showToast({
          title: '登录失败',
          icon:'none'
        })
      }
})
//登录请求封装
  },
  password:function(ee){
    let that=this;
    console.log(ee.detail.value);
    that.setData({
      password:ee.detail.value
    })
      },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

login.wxml

<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
 <!-- v2父容器  子view使用绝对布局 -->
   <view class="v2">
     <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登录</view>
     <!-- 手机号 -->
     <view class="phoneCs">
       <!-- <image src="/images/zhang.png" class="ph"></image> -->
       <input placeholder="请输入账号" type="number" bindinput="content" />
     </view>
     <!-- 密码 -->
     <view class=passwordCs">
       <!-- <image src="/images/mi.png" class="ps"></image> -->
       <input placeholder="请输入密码" type="password" bindinput="password" />
     </view>
     <!-- 登录按钮 -->
     <view class="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">登录</button>
     </view>
   </view>
 </view>

login.wxss

/* pages/login/login.wxss *//* 最大的父元素 */
.v1{
  display: block;
  position:absolute;
  width: 100%;
  background-color: rgb(250, 248, 248);
}
/* 白色区域 */
.v1 .v2{
  position: relative;
  margin-top: 150rpx;
  left: 100rpx; 
  width: 545rpx;
  height: 600rpx;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
  margin-top: 50rpx;
  position: absolute;
  margin-left:50rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
  margin-top: 200rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:480rpx ;
  height: 90rpx ;
  background-color: white;
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
  margin-top: 350rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:480rpx ;
  height: 90rpx ;
  background-color: white;
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
  margin-top: 5rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
  width: 480rpx;
  height: 80rpx;
  position: absolute;
  margin-top:515rpx;
  margin-left:25rpx;
}
/* 登录按钮 */
.v1 .v2 .denglu button{
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 5rpx;
}

打卡

姓名和学号不可修改，可以在用户管理修改

在app.json里面加入 “pages/ls_recod/ls_recod”，开发工具就会生成目录

ls_recod.wxml

<view>
 <block wx:for="{{healthy_data}}" wx:key="index">
  <tui-card>
    <view slot="body" class="tui-default" style="height: 80rpx;display: flex;flex-direction: row;align-items: center;">
    <image src="{{avatarUrl}}" mode="widthFix" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;"/>
     <text style="margin-left: 10rpx;">{{name}}</text>
     <text style="margin-left: 10rpx;">{{sno_id}}</text>
    </view>
    <view slot="body" class="tui-default" style="display: flex;flex-direction: column;">
      <text>地点：{{item.address}}</text>
      <text wx:if="{{item.state=='1'}}">身体状况：健康</text>
      <text wx:if="{{item.state=='0'}}">身体状况：不适</text>
      <text wx:if="{{item.sp=='0'}}" style="color: #24B1F9;">未审批</text>
      <text wx:if="{{item.sp=='1'}}" style="color: #3CDE6D;">审批通过</text>
      <text wx:if="{{item.sp=='2'}}" style="color: red;">审批不通过</text>
      <textarea value="申请理由：{{item.reason}}" style="height: 120rpx;"/>
    </view>
    <view slot="footer" class="tui-default">
      <tui-tag type="light-green" size="small" tui-tag-class="tui-inline">{{item.creatTime}}</tui-tag>
    </view>
  </tui-card>
 </block>
</view>

ls_recod.js

const $api = require('../../utils/request').API;
Page({
  data: {
   name:'',
   sno_id:'',
   healthy_data:[],
   avatarUrl:'',
  },
  onLoad: function (options) {
    let that=this;
    that.get_usernfo();
  },
  get_usernfo:function(){
    let that=this;
    var user_list=wx.getStorageSync('user')||[];
    if (user_list=='') {
      console.log("kong");
      wx.showToast({
        title: '请先登录.',
        icon:'none'
      })
      setTimeout(function(){
        wx.navigateTo({
          url: '/pages/login/login'
        })
    },1100)
    } else {
      console.log("bu kong");
      that.setData({
        name:user_list[0]['nickname'],
        sno_id:user_list[0]['uname']
      })
      that.setData({
        avatarUrl:wx.getStorageSync('avatarUrl')||'/static/denglu-copy.png',
      })
      that.get_healthy_mydata();
    }
  },
  get_healthy_mydata(){
let that=this;
let params = {
  sno_id: that.data.sno_id
}
//登录请求封装
$api.query_leavschool(params).then(res => {
  console.log(res);
  if (res.code==200) {
   wx.showToast({
      title: '数据获取成功',
      icon:'none'
    })
    that.setData({
      healthy_data:res.data
    })
  } else {
    wx.showToast({
      title: '数据获取失败',
      icon:'none'
    })
  }
})
//登录请求封装
  },
})

个人信息修改

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

我的打卡

含有打卡记录轨迹

离校申请

离校申请记录

部分相关代码

ls_recod.wxml

<view>
 <block wx:for="{{healthy_data}}" wx:key="index">
  <tui-card>
    <view slot="body" class="tui-default" style="height: 80rpx;display: flex;flex-direction: row;align-items: center;">
    <image src="{{avatarUrl}}" mode="widthFix" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;"/>
     <text style="margin-left: 10rpx;">{{name}}</text>
     <text style="margin-left: 10rpx;">{{sno_id}}</text>
    </view>
    <view slot="body" class="tui-default" style="display: flex;flex-direction: column;">
      <text>地点：{{item.address}}</text>
      <text wx:if="{{item.state=='1'}}">身体状况：健康</text>
      <text wx:if="{{item.state=='0'}}">身体状况：不适</text>
      <text wx:if="{{item.sp=='0'}}" style="color: #24B1F9;">未审批</text>
      <text wx:if="{{item.sp=='1'}}" style="color: #3CDE6D;">审批通过</text>
      <text wx:if="{{item.sp=='2'}}" style="color: red;">审批不通过</text>
      <textarea value="申请理由：{{item.reason}}" style="height: 120rpx;"/>
    </view>
    <view slot="footer" class="tui-default">
      <tui-tag type="light-green" size="small" tui-tag-class="tui-inline">{{item.creatTime}}</tui-tag>
    </view>
  </tui-card>
 </block>
</view>

后端管理设计

这个项目用到的技术都是我第一次接触的，可能会存在不规范的情况，大佬勿喷哈，用到的技术vue2 +element

登录

用户管理

打卡管理

离校管理

相关代码

handleDelete(row,ee){
      //驳回操作
      console.log(row);
      console.log(ee);
      const params = {
              id: ee.id,
          sp:2
          };
      this.$http({
            url: 'http://localhost:8088/edit_shenpi_lea',params
          }).then((res)=>{
            console.log('res',res.data);
            this.tableData=res.data.data;
          this.$message({
            message: '驳回成功',
            type: 'success'
          });
          },(err)=>{
            this.$message('网络请求失败');
            console.log('err',err);
          });
    },

编辑用户信息

相关代码

edit_submit(){
      // this.$message(this.tableData[0].id);
      //提交数据
      this.$message({
          message: '编辑成功',
          type: 'success'
        });
    this.dialogFormVisible=false;
    const params = {
            id: this.id,
            nickname: this.nickname,
            uname: this.uname, 
        pwd:this.pwd
        };
    this.$http({
          url: 'http://localhost:8088/user_edit',params
        }).then((res)=>{
          console.log('res',res.data);
          this.tableData=res.data.data;
        this.$message('修改成功');
        },(err)=>{
          this.$message('网络请求失败');
          console.log('err',err);
        });
    },

退出登录

相关代码

quit(){
      this.$message({
        message: '退出中',
        type: 'success'
      });
      sessionStorage.clear();
      this.login_=false;
      location.reload()//刷新一次
    },

运行部署方法

  1. 1、倒入后端java代码到idea ，配置数据库连接，下载依赖文件，运行run
  2. 2、hbuilderx打开后端管理系统文件夹，执行 npm install 然后执行npm run serve，访问localhost:8080即可默认 账户密码admin 123

  3. 3、部署小程序代码，修改requests.js文件里面的const baseURL = ‘http://127.0.0.1:8088’; 运行即可

文章标签：
小程序
Java
数据安全/隐私保护
数据库
算法
关键词：
Spring Boot系统
Spring Boot小程序
springboot小程序
Spring Boot代码
Spring Boot后台
德宏大魔王
目录
相关文章
胡东旭
|
17天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
40 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
rbvb2ms5saimy
|
7天前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码，包括电商系统、同城拼车、博客等多种应用，涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例，适合初学者和开发者参考学习。提取码：8888，代码效果参考：http://www.603393.com/sitemap.xml。
rbvb2ms5saimy
23 2
北桥苏
|
25天前
|
小程序 API PHP
零成本搭建个人 APP 和小程序后台
虽然网上也有很多人介绍这俩平台的玩法，但都是 2024 年以前的文章，有些平台最新的修改，和自己踩到的坑而别人没提到的细节，我还是想记录一下。
北桥苏
40 9
胡东旭
|
17天前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序，旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建，具备丰富的注释与简洁的代码结构，非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
胡东旭
38 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
theMuseCatcher
|
18天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量，可以实现跟随系统主题的界面风格切换。
theMuseCatcher
35 0
Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）
热爱技术的小郑
|
28天前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务，接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互，包括后端接口的编写、小程序获取接口数据的方法，以及数据在小程序中的展示。同时，还涉及到了使用Vue搭建后台管理系统，方便数据的查看和管理。
热爱技术的小郑
142 0
微信小程序+SpringBoot接入后台服务，接口数据来自后端
热爱技术的小郑
|
28天前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会，分享了学习基础知识、实战项目开发的过程，以及小程序开发的易上手性和开发周期的简短。
热爱技术的小郑
45 0
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
如夜了我衣衫太薄便归家靠路灯
|
1月前
|
小程序 安全 Java
springboot 微信小程序 实现获取手机号登录
springboot 微信小程序 实现获取手机号登录
如夜了我衣衫太薄便归家靠路灯
157 3
如夜了我衣衫太薄便归家靠路灯
|
1月前
|
小程序 Java API
springboot 微信小程序整合websocket，实现发送提醒消息
springboot 微信小程序整合websocket，实现发送提醒消息
如夜了我衣衫太薄便归家靠路灯
57 3
如夜了我衣衫太薄便归家靠路灯
|
1月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付（代码和注释很详细）
微信小程序实现微信支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
405 0

热门文章

最新文章

  • 1
    通过JMX监控Spring Boot应用
  • 2
    Spring框架（SpringBoot）中redis报错（Could not get a resource from the pool、java.net.SocketTimeoutException）
  • 3
    springboot+druid+mybatis plus的多数据源配置
  • 4
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 5
    SpringBoot前后端分离项目，打包、部署到服务器详细图文流程
  • 6
    Spring Boot 中文乱码问题解决方案汇总
  • 7
    基于SpringBoot的文件在线预览神器，支持99%的文件在线预览
  • 8
    详解Spring、SpringBoot、SpringCloud三者的联系与区别
  • 9
    SpringBoot运行出现 Lookup method resolution failed； nested exception is java.lang.IllegalStateException
  • 10
    Springboot多模块配置详细教程+源码案例+所遇到的坑
  • 1
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    366
  • 2
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    161
  • 3
    轻松学会微信小程序开发（一）
    178
  • 4
    使用阿里云短信+微信短链接跳转微信小程序
    294
  • 5
    【专栏】小程序图片合成就绪渲染的转变，从异步并发渲染到同步阻塞渲染
    63
  • 6
    微信小程序开发1
    120
  • 7
    选课小程序
    52
  • 8
    python背单词小程序
    42
  • 9
    关于抖音小程序数据加载速度优化
    88
  • 10
    抖音小程序开发中遇见的坑点
    105

    • 相关课程

    更多
  • IoT小程序框架课程
  • 微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）
  • SpringBoot实战教程
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Springboot项目云开发快速迁移

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    基于LNMP搭建WordPress