小程序-基于java+SpringBoot+Vue的网上花店微信小程序设计与实现

devtools/2024/11/27 7:33:45/

项目运行

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
毕设帮助,指导,本源码分享,调试部署(见文末)

系统介绍:

网上花店微信小程序是一个基于微信平台的电子商务应用,旨在为用户提供便捷的鲜花购买和管理服务。该系统分为管理员和用户两个权限,管理员可以管理用户的基本信息内容,管理公告信息以及鲜花信息,能够与用户进行相互交流等操作,用户可以查看鲜花信息,可以查看公告以及查看管理员回复信息等操作。
整体功能包含:

管理员功能:用户信息管理、公告信息管理、鲜花信息管理、订单管理、客服聊天管理等。
用户功能:查看鲜花信息、查看公告、提交订单、查看订单状态、与管理员进行交流等。

前台模块:

用户登录/注册
鲜花浏览与搜索
购物车管理
订单提交与管理
公告信息浏览
客服聊天

后台模块:

管理员后台:用户信息管理、公告信息管理、鲜花信息管理、订单管理、客服聊天管理。

功能截图:

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

代码实现:

javascript">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.ppmy.cn/devtools/137337.html

相关文章

Java【多线程】(1)进程与线程

目录 1.前言 2.正文 2.1什么是进程 2.2PCB&#xff08;进程控制块&#xff09; 2.2.1进程id 2.2.2内存指针 2.2.3文件描述符表 2.2.4进程状态 2.2.4.1就绪状态 2.2.4.2阻塞状态 2.2.5进程优先级 2.2.6进程上下文 2.2.7进程的记账信息 2.3CPU操作进程的方法 2.4什…

鸿蒙学习自由流转与分布式运行环境-价值与架构定义(1)

文章目录 价值与架构定义1、价值2、架构定义 随着个人设备数量越来越多&#xff0c;跨多个设备间的交互将成为常态。基于传统 OS 开发跨设备交互的应用程序时&#xff0c;需要解决设备发现、设备认证、设备连接、数据同步等技术难题&#xff0c;不但开发成本高&#xff0c;还存…

C++设计模式之组合模式中适用缓存机制提高遍历与查找速度

在组合设计模式中&#xff0c;为了提高反复遍历和查找的速度&#xff0c;可以引入缓存机制。缓存机制可以通过存储已经遍历过的子组件或计算过的结果来减少重复操作的开销。以下是一个示例&#xff0c;展示了如何在组合模式中使用缓存机制来提高性能。 示例&#xff1a;组合设…

云原生世界的多面体:K8s、容器云、裸金属与云原生的深度解析

目录 引言Kubernetes&#xff08;K8s&#xff09; K8s 的定义与架构K8s 的优势与局限 容器云 容器云的定义与核心功能容器云与 Kubernetes 的关系 裸金属 裸金属的定义与应用场景裸金属与虚拟化的比较 云原生 云原生的核心理念云原生与 K8s、容器云、裸金属的关系 技术对比与应…

通过指令导入/导出vscode扩展插件

导出扩展&#xff1a; 打开VSCode终端&#xff1a; 在VSCode中&#xff0c;你可以通过菜单栏的“终端”选项打开终端&#xff0c;或者使用快捷键Ctrl &#xff08;反引号&#xff0c;通常在键盘左上角&#xff09;。运行导出命令&#xff1a; 在终端中&#xff0c;输入以下命…

MyBatis 操作数据库(进阶)

1. 动态 SQL 动态 SQL 是 MyBatis 的强大特性之一&#xff0c;能够完成不同条件下不同的 SQL 拼接 官方文档&#xff1a;动态 SQL_MyBatis中文网 1.1 <if> 标签 在注册用户的场景中&#xff0c;注册可能会分为两种字段&#xff1a;必填字段和非必填字段 如&#xff…

一个高度可扩展的 Golang ORM 库【GORM】

GORM 是一个功能强大的 Golang 对象关系映射&#xff08;ORM&#xff09;库&#xff0c;它提供了简洁的接口和全面的功能&#xff0c;帮助开发者更方便地操作数据库。 1. 完整的 ORM 功能 • 支持常见的关系模型&#xff1a; • Has One&#xff08;一对一&#xff09; • …

Spring Boot 整合 ELK 全面指南:实现日志采集、分析与可视化

一、ELK简介 1.1 什么是ELK&#xff1f; ELK 是三个开源工具的组合&#xff1a; Elasticsearch&#xff1a;一个分布式全文搜索和分析引擎&#xff0c;用于存储和查询日志数据。Logstash&#xff1a;一个数据处理管道工具&#xff0c;用于收集、解析和处理日志数据。Kibana&…