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

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

2023-10-18 32
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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后台
德宏大魔王
目录
相关文章
源码星辰
|
6天前
|
Web App开发 编解码 Java
B/S基层卫生健康云HIS医院管理系统源码 SaaS模式 、Springboot框架
基层卫生健康云HIS系统采用云端SaaS服务的方式提供，使用用户通过浏览器即能访问，无需关注系统的部署、维护、升级等问题，系统充分考虑了模板化、配置化、智能化、扩展化等设计方法，覆盖了基层医疗机构的主要工作流程，能够与监管系统有序对接，并能满足未来系统扩展的需要。
源码星辰
56 4
源码星辰
|
6天前
|
运维 监控 安全
云HIS医疗管理系统源码——技术栈【SpringBoot+Angular+MySQL+MyBatis】
云HIS系统采用主流成熟技术，软件结构简洁、代码规范易阅读，SaaS应用，全浏览器访问前后端分离，多服务协同，服务可拆分，功能易扩展；支持多样化灵活配置，提取大量公共参数，无需修改代码即可满足不同客户需求；服务组织合理，功能高内聚，服务间通信简练。
源码星辰
40 4
源码宝
|
1天前
|
监控 NoSQL Java
java云MES 系统源码Java+ springboot+ mysql 一款基于云计算技术的企业级生产管理系统
MES系统是生产企业对制造执行系统实施的重点在智能制造执行管理领域，而MES系统特点中的可伸缩、信息精确、开放、承接、安全等也传递出：MES在此管理领域中无可替代的“王者之尊”。MES制造执行系统特点集可伸缩性、精确性、开放性、承接性、经济性与安全性于一体，帮助企业解决生产中遇到的实际问题，降低运营成本，快速适应企业不断的制造执行管理需求，使得企业已有基础设施与一切可用资源实现高度集成，提升企业投资的有效性。
源码宝
27 5
源码宝
|
3天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力，建立一个全面的、集成的、稳定的制造物流质量控制体系；对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进，满足精细化、透明化、自动化、实时化、数据化、一体化管理，实现企业柔性化制造管理。
源码宝
25 3
源码世界
|
4天前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统，全套源码，多端展示（app、小程序、H5、台后管理端）
一开始接触MES系统，很多人会和博主一样，对MES细节的应用不了解，这样很正常，因为MES系统相对于其他系统来讲应用比较多!
源码世界
16 1
JAVA智慧工厂制造生产管理MES系统，全套源码，多端展示（app、小程序、H5、台后管理端）
周盛欢
|
6天前
|
小程序 Java API
微信小程序和springboot实现微信支付
微信小程序和springboot实现微信支付
周盛欢
18 0
周盛欢
|
6天前
|
小程序
外卖小程序-购物车模块表结构设计和后端代码
外卖小程序-购物车模块表结构设计和后端代码
周盛欢
14 0
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
小蜗牛耶
51 4
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
小蜗牛耶
62 3
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
小蜗牛耶
32 1

热门文章

最新文章

  • 1
    体验版小程序为何无法访问云端服务器后端接口（请求失败...（已完美解决附加图片））？
  • 2
    Java语言开发的AI智慧导诊系统源码springboot+redis 3D互联网智导诊系统源码
  • 3
    [AIGC] 在Spring Boot中指定请求体格式
  • 4
    Spring Boot整合canal实现数据一致性解决方案解析-部署+实战
  • 5
    基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
  • 6
    SpringBoot之三层架构的详细解析
  • 7
    SpringBoot自动装配原理之@Import注解解析
  • 8
    【Spring Boot系列】通过OpenAPI规范构建微服务服务接口
  • 9
    基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
  • 10
    B/S基层卫生健康云HIS医院管理系统源码 SaaS模式 、Springboot框架
  • 1
    SpringBoot启动后出现Please sign in页面
    59
  • 2
    Spring Boot的定时任务与异步任务
    59
  • 3
    SpringBoot整合Mybatis连接Oracle数据库
    84
  • 4
    通用Shell脚本执行Spring Boot项目Jar包
    43
  • 5
    【SpringBoot系列】SpringBoot集成Fast Mybatis
    183
  • 6
    Spring Boot集成Redis启动失败【Caused by: java.lang.ClassNotFoundException: org.apache.commons.pool2.impl.G】
    96
  • 7
    【二十二】springboot整合拦截器实战并对比过滤器
    40
  • 8
    【二十一】springboot整合过滤器实战
    20
  • 9
    【二十】springboot整合ElasticSearch实战（万字篇）
    245
  • 10
    【十八】springboot实现自定义全局异常处理
    39

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 1分钟SAE部署Web在线游戏
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考