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

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

2023-10-18 56
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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后台
德宏大魔王
目录
相关文章
游客z6tsdnmvpjgcg
|
4天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元？是的，就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题，实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
游客z6tsdnmvpjgcg
31 8
yxybox
|
7天前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
yxybox
42 8
疯狂的猿
|
22天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
疯狂的猿
48 3
上海龙兵兵数字科技有限公司成都分公司
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统，都有哪些功能？
在快节奏的现代生活中，家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题，如服务质量不稳定、价格不透明等，我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式，解决了私单、复购、推广和盈利四大痛点，全面提升了服务质量和用户体验，旨在成为家政行业的领导者。
上海龙兵兵数字科技有限公司成都分公司
53 1
開发-I88I9Z88OZ4
|
2月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先，我们需要明确跳绳计数小程序的核心功能：为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数，并为用户提供清晰、直观的计数展示。
開发-I88I9Z88OZ4
72 2
chnjames
|
2月前
|
开发框架 小程序 JavaScript
小程序代码丢失！反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而，现在的小程序开发框架采用像 Babel 这样的打包工具，将 JavaScript 逻辑代码混合在一个文件中并进行转编译，使其变得难以理解。
chnjames
51 0
小程序代码丢失！反编译找回
diygwcom
|
2月前
|
小程序 数据可视化 数据管理
小程序可视化设计工具-支持一键导出小程序，WebApp及后台管理
小程序可视化设计工具-支持一键导出小程序，WebApp及后台管理
diygwcom
44 3
rbvb2ms5saimy
|
3月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码，包括电商系统、同城拼车、博客等多种应用，涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例，适合初学者和开发者参考学习。提取码：8888，代码效果参考：http://www.603393.com/sitemap.xml。
rbvb2ms5saimy
72 2
众所周知
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
172 1
众所周知
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，创建并配置 Spring Boot 项目，实现后端 API；然后，使用 Ant Design Pro Vue 创建前端项目，配置动态路由和菜单。通过具体案例，展示了如何快速搭建高效、易维护的项目框架。
众所周知
111 62

热门文章

最新文章

  • 1
    SpringBoot3整合SpringSecurity，实现自定义接口权限过滤（一）
  • 2
    SpringBoot整合Druid数据源并配置监控
  • 3
    Springboot 使用设计模式- 策略模式
  • 4
    定义全局异常处理器 | 带你读《SpringBoot实战教程》之十三
  • 5
    SpringBoot集成OAuth2.0的四种授权方式
  • 6
    Spring Boot 2.0 新特性（一）：配置绑定 2.0 全解析
  • 7
    解决 Spring Boot 和 Gradle Java 版本兼容性问题:A problem occurred configuring root project ‘demo1‘. ＞ Could n
  • 8
    SpringBoot中定时任务入门(@Scheduled )详解
  • 9
    Spring Boot功能实战
  • 10
    Spring Secure在SpringBoot中的集成
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    138
  • 2
    微信小程序用户登陆和获取用户信息功能实现
    124
  • 3
    uniapp-微信小程序-上拉和下拉触底刷新
    149
  • 4
    外卖小程序实战-接单后小票机自动打印订单
    183
  • 5
    微信小程序和springboot实现微信支付
    245
  • 6
    外卖小程序实战
    55
  • 7
    微信小程序-微信支付
    74
  • 8
    微信小程序调试、断点调试
    193
  • 9
    外卖小程序-购物车模块表结构设计和后端代码
    64
  • 10
    微信小程序-分包
    72

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解