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

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

2023-10-18 60
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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后台管理系统
Spring Boot后台管理
Spring Boot代码
德宏大魔王
目录
相关文章
杀死一只知更鸟debug
|
3月前
|
SQL 监控 druid
springboot-druid数据源的配置方式及配置后台监控-自定义和导入stater（推荐-简单方便使用）两种方式配置druid数据源
这篇文章介绍了如何在Spring Boot项目中配置和监控Druid数据源，包括自定义配置和使用Spring Boot Starter两种方法。
杀死一只知更鸟debug
762 1
最好zzz
|
2月前
|
开发框架 前端开发 网络协议
Spring Boot结合Netty和WebSocket，实现后台向前端实时推送信息
【10月更文挑战第18天】 在现代互联网应用中，实时通信变得越来越重要。WebSocket作为一种在单个TCP连接上进行全双工通信的协议，为客户端和服务器之间的实时数据传输提供了一种高效的解决方案。Netty作为一个高性能、事件驱动的NIO框架，它基于Java NIO实现了异步和事件驱动的网络应用程序。Spring Boot是一个基于Spring框架的微服务开发框架，它提供了许多开箱即用的功能和简化配置的机制。本文将详细介绍如何使用Spring Boot集成Netty和WebSocket，实现后台向前端推送信息的功能。
最好zzz
625 1
最好zzz
|
1月前
|
缓存 监控 Java
春日里的代码诗篇：14个SpringBoot性能优化技巧
【10月更文挑战第28天】
最好zzz
145 4
java冯坚持
|
2月前
|
Java 数据库连接 Maven
mybatis使用一：springboot整合mybatis、mybatis generator，使用逆向工程生成java代码。
这篇文章介绍了如何在Spring Boot项目中整合MyBatis和MyBatis Generator，使用逆向工程来自动生成Java代码，包括实体类、Mapper文件和Example文件，以提高开发效率。
java冯坚持
156 2
mybatis使用一：springboot整合mybatis、mybatis generator，使用逆向工程生成java代码。
潇洒洒
|
1月前
|
缓存 监控 Java
Spring Boot优化小妙招，让你的代码如诗般优雅
【10月更文挑战第20天】
潇洒洒
138 3
nanshaws
|
2月前
|
前端开发 Java Apache
Springboot整合shiro，带你学会shiro，入门级别教程，由浅入深，完整代码案例，各位项目想加这个模块的人也可以看这个，又或者不会mybatis-plus的也可以看这个
本文详细讲解了如何整合Apache Shiro与Spring Boot项目，包括数据库准备、项目配置、实体类、Mapper、Service、Controller的创建和配置，以及Shiro的配置和使用。
nanshaws
580 1
Springboot整合shiro，带你学会shiro，入门级别教程，由浅入深，完整代码案例，各位项目想加这个模块的人也可以看这个，又或者不会mybatis-plus的也可以看这个
java冯坚持
|
2月前
|
Java BI API
spring boot 整合 itextpdf 导出 PDF，写入大文本，写入HTML代码，分析当下导出PDF的几个工具
这篇文章介绍了如何在Spring Boot项目中整合iTextPDF库来导出PDF文件，包括写入大文本和HTML代码，并分析了几种常用的Java PDF导出工具。
java冯坚持
682 0
spring boot 整合 itextpdf 导出 PDF，写入大文本，写入HTML代码，分析当下导出PDF的几个工具
明弟有理想
|
2月前
|
JSON NoSQL Java
springBoot:jwt&redis&文件操作&常见请求错误代码&参数注解 (九)
该文档涵盖JWT（JSON Web Token）的组成、依赖、工具类创建及拦截器配置，并介绍了Redis的依赖配置与文件操作相关功能，包括文件上传、下载、删除及批量删除的方法。同时，文档还列举了常见的HTTP请求错误代码及其含义，并详细解释了@RequestParam与@PathVariable等参数注解的区别与用法。
明弟有理想
33 2
刘大猫.
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
刘大猫.
50 0
武子康
|
2月前
|
消息中间件 Java 大数据
大数据-56 Kafka SpringBoot与Kafka 基础简单配置和使用 Java代码 POM文件
大数据-56 Kafka SpringBoot与Kafka 基础简单配置和使用 Java代码 POM文件
武子康
79 2

热门文章

最新文章

  • 1
    【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？
  • 2
    【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？
  • 3
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
  • 4
    【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？
  • 5
    【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
  • 6
    为什么不加盟线下陪玩APP小程序平台，而是自建平台？
  • 7
    【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数01
  • 8
    【一步步开发AI运动小程序】十、姿态动作相似度比较
  • 9
    uni-app开发AI康复锻炼小程序，帮助肢体受伤患者康复！
  • 1
    springboot 启动原理、启动过程、启动机制的介绍
    526
  • 2
    springboot实现文件防盗链设计
    129
  • 3
    Spring Boot中一般如何使用线程池？
    778
  • 4
    Spring Boot 源码面试知识点
    103
  • 5
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    260
  • 6
    深入探索Spring Boot Web应用源码及实战应用
    112
  • 7
    ruoyi-nbcio从spring2.7.18升级springboot到3.1.7，java从java8升级到17（二）
    365
  • 8
    springboot数据库回滚失败原因
    64
  • 9
    springboot全局自定义异常
    45
  • 10
    springBoot+rabbit消息获取和消息确认
    133

    • 相关课程

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

    • 相关电子书

    更多
  • 小程序 云开发
  • 15分钟打造你自己的小程序
  • 十分钟上线-使用函数计算构建支付宝小程序服务

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 从零搭建Spring Boot的Hello World
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)