当前位置: 首页 > article >正文

小程序-基于java+SpringBoot+Vue的校园失物招领系统设计与实现

项目运行

1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。

2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;

3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可

4.硬件环境:windows 7/8/10 4G内存以上;或者 Mac OS;

5.是否Maven项目: 否;查看源码目录中是否包含pom.xml;若包含,则为maven项目,否则为非maven项目

6.数据库:MySql 5.7/8.0等版本均可;

7.小程序:uniapp
毕设帮助,指导,本源码分享,调试部署(见文末)

系统介绍:

校园失物招领系统旨在为高校师生提供一个信息发布和管理平台,用于发布和查询失物招领、寻物启事等信息。系统采用Java语言进行编码,使用Mysql创建数据表保存系统产生的数据,通过微信小程序技术实现用户交互,提高用户体验。
整体功能包含:

系统主要功能包括用户信息管理、失物招领管理、寻物启事管理以及论坛信息管理。
小程序端:

用户登录/注册
失物招领信息发布与查询
寻物启事信息发布与查询
论坛信息浏览与发布

后台模块:

用户信息管理
失物招领信息审核与删除
寻物启事信息审核与删除
论坛信息管理
公告信息发布与管理

功能截图:

在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码实现:

var _default = {
  data: function data() {
    return {
      username: '',
      password: '',
      codes: [{
        num: 1,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 2,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 3,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }, {
        num: 4,
        color: '#000',
        rotate: '10deg',
        size: '16px'
      }],
      options: ['请选择登录用户类型'],
      optionsValues: ['', 'yonghu'],
      index: 0,
      roleNum: 0
    };
  },
  onLoad: function onLoad() {
    var options = ['请选择登录用户类型'];
    var menus = _menu.default.list();
    this.menuList = menus;
    for (var i = 0; i < this.menuList.length; i++) {
      if (this.menuList[i].hasFrontLogin == '是') {
        options.push(this.menuList[i].roleName);
        this.roleNum++;
      }
    }
    if (this.roleNum == 1) {
      this.index = 1;
    }
    this.options = options;
    this.randomString(4);
    this.styleChange();
  },
  methods: {
    randomString: function randomString() {
      var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
      var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
      var colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
      var sizes = ['28', '30', '32', '34', '36'];
      for (var i = 0; i < len; i++) {
        // 随机验证码
        var key = Math.floor(Math.random() * chars.length);
        this.codes[i].num = chars[key];
        // 随机验证码颜色
        var code = '#';
        for (var j = 0; j < 6; j++) {
          var _key = Math.floor(Math.random() * colors.length);
          code += colors[_key];
        }
        this.codes[i].color = code;
        // 随机验证码方向
        var rotate = Math.floor(Math.random() * 30);
        var plus = Math.floor(Math.random() * 2);
        if (plus == 1) rotate = '-' + rotate;
        this.codes[i].rotate = 'rotate(' + rotate + 'deg)';
        // 随机验证码字体大小
        var size = Math.floor(Math.random() * sizes.length);
        this.codes[i].size = sizes[size] + 'rpx';
      }
    },
    styleChange: function styleChange() {
      this.$nextTick(function () {
        // document.querySelectorAll('.uni-yaoxianStyle .uni-yaoxianStyle-yaoxianStyle').forEach(el=>{
        //   el.style.backgroundColor = this.loginFrom.content.yaoxianStyle.backgroundColor
        // })
      });
    },
    onRegisterTap: function onRegisterTap(tableName) {
      uni.setStorageSync("loginTable", tableName);
      this.$utils.jump('../register/register');
    },
    onForgetTap: function onForgetTap() {
      this.$utils.jump('../forget/forget');
    },
    onLoginTap: function onLoginTap() {
      var _this = this;
      return (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
        var res;
        return _regenerator.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (_this.optionsValues[_this.index]) {
                  _context.next = 3;
                  break;
                }
                _this.$utils.msg("请选择登陆人类型");
                return _context.abrupt("return");
              case 3:
                if (true) {
                  _context.next = 6;
                  break;
                }
                _this.$utils.msg("请输入正确的验证码");
                return _context.abrupt("return");
              case 6:
                _context.next = 8;
                return _this.$api.login("".concat(_this.optionsValues[_this.index]), {
                  username: _this.username,
                  password: _this.password
                });
              case 8:
                res = _context.sent;
                uni.setStorageSync("token", res.token);
                uni.setStorageSync("nickname", _this.username);
                uni.setStorageSync("nowTable", "".concat(_this.optionsValues[_this.index]));
                _context.next = 14;
                return _this.$api.session("".concat(_this.optionsValues[_this.index]));
              case 14:
                res = _context.sent;
                uni.setStorageSync("userid", res.data.id);
                if (res.data.vip) {
                  uni.setStorageSync("vip", res.data.vip);
                }
                uni.setStorageSync("role", "".concat(_this.options[_this.index]));
                _this.$utils.tab("../index/index");
              case 19:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))();
    },
    optionsChange: function optionsChange(e) {
      this.index = e.target.value;
    }
  }
};

源码获取:

大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻


http://www.kler.cn/a/398908.html

相关文章:

  • 【windows】05-windows系统级深度隐藏文件方法
  • JAVA-链表
  • C++网络编程之SSL/TLS加密通信
  • [ 网络安全介绍 3 ] 网络安全事件相关案例有哪些?
  • Go 语言切片初始化与性能优化:使用 cap 参数的重要性
  • 人工智能训练师 综合测试题库一
  • outlook邮箱关闭垃圾邮件——PowerAutomate自动化任务
  • TCP实现网络通信(多进程与多线程版本)
  • 正则表达式语法详解(python)
  • Area-Composition模型部署指南
  • vue 中使用rem布局
  • Pytest-Bdd-Playwright 系列教程(10):配置功能文件路径 优化场景定义
  • AB矩阵秩1乘法,列乘以行
  • AWD脚本编写_1
  • JQuery 基础知识学习(详尽版)2024.11.17
  • 内联函数与普通函数有什么区别?如何定义和使用内联函数?
  • Thinkphp6视图介绍
  • oracle19c开机自启动
  • 洛谷刷题日记||基础篇8
  • HarmonyOs DevEco Studio小技巧31--卡片的生命周期与卡片的开发
  • uni-app快速入门(八)--常用内置组件(上)
  • 人机界面中的数据、信息、知识、算法分层
  • UE5遇到问题记录—在sequence制作时如何让角色隐藏/显示?
  • 数据结构_图的遍历
  • springboot整合elasticsearch,并使用docker desktop运行elasticsearch镜像容器遇到的问题。
  • 游戏引擎学习第14天