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

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

2023-10-18 55
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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代码
Spring Boot后台
德宏大魔王
目录
相关文章
杀死一只知更鸟debug
|
2月前
|
SQL 监控 druid
springboot-druid数据源的配置方式及配置后台监控-自定义和导入stater（推荐-简单方便使用）两种方式配置druid数据源
这篇文章介绍了如何在Spring Boot项目中配置和监控Druid数据源，包括自定义配置和使用Spring Boot Starter两种方法。
杀死一只知更鸟debug
505 1
最好zzz
|
24天前
|
开发框架 前端开发 网络协议
Spring Boot结合Netty和WebSocket，实现后台向前端实时推送信息
【10月更文挑战第18天】 在现代互联网应用中，实时通信变得越来越重要。WebSocket作为一种在单个TCP连接上进行全双工通信的协议，为客户端和服务器之间的实时数据传输提供了一种高效的解决方案。Netty作为一个高性能、事件驱动的NIO框架，它基于Java NIO实现了异步和事件驱动的网络应用程序。Spring Boot是一个基于Spring框架的微服务开发框架，它提供了许多开箱即用的功能和简化配置的机制。本文将详细介绍如何使用Spring Boot集成Netty和WebSocket，实现后台向前端推送信息的功能。
最好zzz
246 1
上海龙兵兵数字科技有限公司成都分公司
|
16天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统，都有哪些功能？
在快节奏的现代生活中，家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题，如服务质量不稳定、价格不透明等，我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式，解决了私单、复购、推广和盈利四大痛点，全面提升了服务质量和用户体验，旨在成为家政行业的领导者。
上海龙兵兵数字科技有限公司成都分公司
33 1
開发-I88I9Z88OZ4
|
26天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先，我们需要明确跳绳计数小程序的核心功能：为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数，并为用户提供清晰、直观的计数展示。
開发-I88I9Z88OZ4
58 2
刘大猫.
|
14天前
|
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 的前后端分离的后台管理系统
刘大猫.
29 0
胡东旭
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
胡东旭
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序，旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建，具备丰富的注释与简洁的代码结构，非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
胡东旭
100 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
theMuseCatcher
|
3月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量，可以实现跟随系统主题的界面风格切换。
theMuseCatcher
101 0
Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）
热爱技术的小郑
|
3月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务，接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互，包括后端接口的编写、小程序获取接口数据的方法，以及数据在小程序中的展示。同时，还涉及到了使用Vue搭建后台管理系统，方便数据的查看和管理。
热爱技术的小郑
553 0
微信小程序+SpringBoot接入后台服务，接口数据来自后端
邹荣乐
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
203 3

热门文章

最新文章

  • 1
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 2
    一文搞懂阿里云服务器部署MySQL并整合Spring Boot
  • 3
    使用OkHttp在Spring Boot应用中发送HTTP请求
  • 4
    spring boot应用启动原理分析
  • 5
    springboot--SpringDataJPA生成表 crud数据
  • 6
    保姆级教程——将springboot项目部署到阿里云服务器包含环境配置（小白包会）
  • 7
    基于springboot的校园二手交易平台(程序+数据库+文档)
  • 8
    阿里开发者学院：Java Spring Boot 2.5.x开发实战课程
  • 9
    Spring Boot与Netty打造TCP服务端(解决粘包问题)
  • 10
    13.14 SpringBoot集成JSP模板引擎：JSP页面样式乱掉
  • 1
    外卖小程序实战-接单后小票机自动打印订单
    171
  • 2
    认养模式小程序系统开发|成熟技术|项目案例
    49
  • 3
    微信小程序echart图片不显示 问题解决
    61
  • 4
    小程序和vue写法的区别
    54
  • 5
    小程序和页面生命周期详解
    56
  • 6
    小程序；vue；uniapp优缺点（各5条）
    141
  • 7
    UniApp与微信小程序介绍及区别
    577
  • 8
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    548
  • 9
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    285
  • 10
    轻松学会微信小程序开发（一）
    217

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 从零搭建Spring Boot的Hello World
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    阿里云OSS设置跨域访问