SSM+微信小程序+VUE项目实战:商城系统

实训时小组写的一个项目,有2个使用端,用户端是微信小程序,后台管理端是vue写的网页,后端统一是一个项目Spring+SpringMVC+Mybatis。

文章目录

    • 项目仓库
    • 项目截图
    • 需求描述
    • 功能分析
    • 开发环境
    • 数据库设计
    • 小程序页面
    • 后端
      • 难点
      • 技术选型
    • 管理端

项目仓库

  • 小程序:https://github.com/GrapevineLin/WSLLShopping
  • 后端: https://github.com/GrapevineLin/WSLL-spring
  • 后台管理端: https://github.com/GrapevineLin/WSLL-Admin

项目截图

   
   
   

需求描述

  1. 前台系统的功能设计
    前台管理是为用户提供友好的操作界面,供用户进行商品浏览、购物和生成订单等操作。
    而当用户使用购物车时,首先进行登录身份验证。如果为新用户,需要进行注册。
  2. 用户注册和登录
    用户在进行购物之前,需要先进行登录,这样用户结束购物时,通过登录账号来进行结账。对于新用户,可以通过绑定微信信息进行注册。
  3. 商品浏览与搜索
    商品浏览是网上购物系统网站提供给用户的一个基本功能。用户可以根据商品的类别来分类浏览商品。在系统的主页面上,能够对所有商品类别进行列表,用户可以通过单击商品类别名称,来浏览商品,查看商品的图片和价格等最基本的信息,在浏览的过程中,可以将满意的商品添加到购物车中。
    用户也可以通过使用系统提供的收索功能对商品进行收索,查找自己需要的商品。
  4. 购物车
    用户在浏览商品的过程中,可以将所满意的商品通过单击“购买”按钮添加到购物车中。浏览结束或者在浏览的过程中可以查看购物车里放置商品的情况,并且可以查看所购买商品的名称、价格、描述、购买数量、单价等信息。
    在购物车中可以通过单价“移除”按钮将不想购买的商品删除,也可以任意更改购买商品的数量。
  5. 产生订单
    在用户购物结束后,进行结账时,需要填写相关的信息和确认购买商品的信息。用户确认后开始填写订单信息,包括号码、类型、送货的详细地址。填写完毕之后,用户就可以提交订单了。用户可以在下次登录后查看自己订单和发货情况。
  6. 用户留言功能
    为了能够及时了解用户的需求和意见,本网站增加了留言薄功能,以便本网站及时了解用户需求并即使改进不足,以便可以更好地为用户服务。
  7. 后台管理的功能设计
    后台管理的功能主要是为了网站的管理员提供对商品信息、订单信息的管理。
  8. 商品信息管理
    在商品信息管理模块中,管理员可以添加新的商品,设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。
  9. 订单管理
    在订单管理模块中,实现管理员对用户提交的订单进行查看,也可以对交易完成后保存一定时间的订单信息进行删除。同时管理员的一项重要工作就是设置用户购买商品的发货状态。如果设置了用户订单已经发货,则当用户查看订单时,可以看到订单交易的情况。

功能分析


可实现需求具体分析
登录及权限用户在进行购物之前,需要先进行登录,这样用户结束购物时,通过登录账号来进行结账。后台管理系统只有拥有管理员权限的用户才能登陆。
商品浏览与搜索用户登录后在商城主页可以查询和浏览商城信息,可以在分类页面对商品的类别进行选择。
购物车用户在浏览商品的过程中,可以将所满意的商品通过单击“购买”按钮添加到购物车中。
产生订单在购物车中点击付款,输入订单收获地址,核实商品相关信息,点击生成订单,可在用户页面查看订单信息。
商品信息管理在商品信息管理模块中,管理员可以添加新的商品,设置商品的类型、名称、价格等信息。也可以对已添加的商品信息进行修改和删除。
订单管理在订单管理模块中,实现管理员对用户提交的订单进行查看,也可以对交易完成后保存一定时间的订单信息进行删除。

开发环境

IDE: Idea VS Code
JDK: JDK1.8.x
Maven: 3.6.0
SQL: MySQL 5.7.x
Node: Node 10.16.0
NPM:6.9.0

数据库设计

一共9张表:商品,订单,用户,管理员,购物车,订单商品,商品类别,评论信息,地址

  1. 用户表(user)
    这里user表有个坑很值得注意一下,因为我们是获取微信用户的昵称,有的人昵称含有emoji表情,如果我们使用utf8则存储不了 ,因为utf8只能存储3个字节的数据,标准的emoji表情是4个字节,所以我们选择utf8mb4的字符集.
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (`openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,`nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,`avatarUrl` varchar(400) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,PRIMARY KEY (`openid`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;
  1. 地址表(address):
DROP TABLE IF EXISTS `address`;
CREATE TABLE `address`  (`address_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`region` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`detail` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`defaulted` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,PRIMARY KEY (`address_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  1. 管理员表(admin)
DROP TABLE IF EXISTS `admin`;
CREATE TABLE `admin`  (`username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,`password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,`user_id` bigint(10) NOT NULL AUTO_INCREMENT,PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
  1. 购物车表(cart)
DROP TABLE IF EXISTS `cart`;
CREATE TABLE `cart`  (`cart_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',`openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户id',`goods_id` int(11) NULL DEFAULT NULL COMMENT '商品id',`total_num` int(11) NULL DEFAULT NULL COMMENT '商品数量',`file_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`goods_price` decimal(10, 2) NULL DEFAULT NULL,`goods_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,PRIMARY KEY (`cart_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 74 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  1. 评论表(comment)
DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment`  (`id` int(11) NOT NULL AUTO_INCREMENT,`openid` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,`order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '订单id',`starIndex` int(11) NULL DEFAULT NULL,`comment` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,PRIMARY KEY (`id`) USING BTREE,INDEX `orderid1`(`order_id`) USING BTREE,CONSTRAINT `orderid1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON DELETE CASCADE ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
  1. 商品类目表(g_type)
DROP TABLE IF EXISTS `g_type`;
CREATE TABLE `g_type`  (`type_id` varchar(10) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '类目id',`type_name` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目名称',`type_describe` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目描述',`type_enable` varchar(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否启用  \"1\"为启用  “0”为不启用',`type_sup` int(10) NULL DEFAULT NULL COMMENT '上级类目ID',`type_level` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '类目级别',`type_file_path` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图片路径',PRIMARY KEY (`type_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  1. 商品表(goods)
DROP TABLE IF EXISTS `goods`;
CREATE TABLE `goods`  (`goods_id` int(10) NOT NULL AUTO_INCREMENT COMMENT '商品编号',`goods_type` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品类目',`goods_name` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品名称',`goods_describe` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '商品描述',`goods_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '商品金额',`goods_validity` date NULL DEFAULT NULL COMMENT '即购买后多长时间内有效',`goods_enable` varchar(1) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '是否启用  \"1\"为启用  “0”为不启用',`goods_browse` int(10) NULL DEFAULT NULL COMMENT '库存',`goods_buy` int(10) NULL DEFAULT NULL COMMENT '购买数',`goods_picture_path` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '图片文件路径',`goods_create_time` date NULL DEFAULT NULL COMMENT '商品添加时间',PRIMARY KEY (`goods_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 64 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  1. 订单表(order_goods)
DROP TABLE IF EXISTS `order_goods`;
CREATE TABLE `order_goods`  (`id` int(10) NOT NULL AUTO_INCREMENT,`order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '订单id',`goods_id` int(10) NULL DEFAULT NULL COMMENT '商品id',`num` int(10) NULL DEFAULT NULL COMMENT '成交数量',PRIMARY KEY (`id`) USING BTREE,INDEX `orderid`(`order_id`) USING BTREE,CONSTRAINT `orderid` FOREIGN KEY (`order_id`) REFERENCES `orders` (`order_id`) ON DELETE CASCADE ON UPDATE RESTRICT
) ENGINE = InnoDB AUTO_INCREMENT = 64 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  1. 订单状态表(order)
DROP TABLE IF EXISTS `orders`;
CREATE TABLE `orders`  (`order_id` varchar(16) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'id',`openid` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '用户id\r\n',`pay_status` varchar(12) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '支付状态 待付款 代发货',`create_time` datetime(0) NULL DEFAULT NULL COMMENT '订单创建时间',`pay_price` decimal(10, 2) NULL DEFAULT NULL COMMENT '商品总价',PRIMARY KEY (`order_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

小程序页面

小程序一共有4个tabbar:首页,分类,购物车,我的.商品的展示这一块在多个地方使用,比如首页和分类都有,因此可以将其组件化,方便复用.
技术选型:
小程序:2.8.1
小程序组件:iView 2.0.0

由于代码量巨大,所以不在这里贴出来,可以去github查看.

后端

后端采用java的SSM编写.

难点

  1. 跨域CORS:因为是前后端分离的项目,所以会产生跨域的问题,解决方案可以有前端也可以是后端解决;最后是采用了后端配置跨域解决了问题,当然跨域的办法很多,不止局限这一种。
<filter><filter-name>encoding</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param>
</filter>
<filter-mapping><filter-name>encoding</filter-name><url-pattern>*.action</url-pattern>
</filter-mapping>
  1. Token:token的使用就是为了数据安全,原理是前端登录,后端生成token给前端,前端存储token然后在后续请求头加上token,后端对之后的每次请求都会验证token是否有效。
    Token的具体实现可以查看这篇文章

技术选型

视图框架:SpringMVC 5.x
持久层框架:Mybatis 3.x
数据库连接池:Druid 1.x

管理端

用Vue写的一个及其简易的后台管理系统.
技术选型:
前端框架:Vue.js 2.x
页面组件:Element 2.x
后台交互:Axios 0.18.0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/35359.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记爬虫一个网站图片,反反爬虫破解一个图片加密算法

目录 一、初遇拦路虎 二、破解加密 1、详细分析 2、分析js代码 三、转化为python爬虫代码 四、全部代码 心血来潮想玩下最近比较火的AI绘画&#xff0c;于是想要搞点图片丢到模型上训练 一、初遇拦路虎 随便找个外国的图片网站来爬点图片&#xff0c;随手f12打开、检视…

鸿蒙系统文件删除怎么恢复,鸿蒙系统升级后会删除东西吗?鸿蒙系统游戏数据互通吗?...

鸿蒙系统无疑是这段时间最大的热点了&#xff0c;也因为太过于火爆&#xff0c;花粉俱乐部已经在维护修理了&#xff0c;不过很多小伙伴还在担忧鸿蒙系统游戏和安卓系统通用吗&#xff1f;鸿蒙系统升级后会丢失数据吗&#xff1f;下面一起来看看升级鸿蒙系统的注意事项。 鸿蒙系…

华为鸿蒙系统HarmonyOS学习之七:鸿蒙Harmony给IoT带来新的契机

华为鸿蒙系统HarmonyOS学习之七&#xff1a;鸿蒙Harmony给IoT带来新的契机 一、物联网将带来生产生活方式的变革 物联网是新一代信息技术的高度集成和综合运用&#xff0c;对产业变革和经济社会绿色、智能、可持续发展具有重要意义。 自从国家把物联网列入重点发展领域以来…

HarmonyOS系统内核中GPIO控制方法

大家好&#xff0c;今天主要和大家聊一聊&#xff0c;如何使用鸿蒙系统控制开发板去点亮LED灯。 目录 第一&#xff1a;鸿蒙外设GPIO简介 第二&#xff1a;鸿蒙外设接口说明 GPIO使用流程图&#xff1a; ​编辑 第三&#xff1a;鸿蒙系统中API分析 第四&#xff1a;硬件设计…

harmonyos鸿蒙系统开发者工具 DevEco Studio详解安装

文章适合新手了解DevEco Studio开发工具。文章在编写过程中难免有疏漏和错误&#xff0c;欢迎大佬指出文章的不足之处&#xff1b;更多内容请点进&#x1f449; Lino_White &#x1f448;查看。 未来的世界充满着各式各样的数据&#xff0c;我们该怎么好好利用起来呢&#xff1…

我的HarmonyOS实战——鸿蒙系统初定义

【本文正在参与“有奖征文 | HarmonyOS征文大赛” 】活动链接 鸿蒙系统介绍 1 官方定义 鸿蒙是一个全场景&#xff0c;面向未来的操作系统。 解释&#xff1a; 鸿蒙并不是一个单纯的手机操作系统&#xff0c;而是手机智能设备的总称。可以安装在包括手机、手表、无人机等很…

我的HarmonyOS实战——鸿蒙系统开发入门学习

1.为什么要学习鸿蒙开发&#xff1f; 开发者的角度&#xff1a; 安卓操作系统连接外部设备时&#xff0c;发现&#xff0c;配对&#xff0c;连接&#xff0c;组合&#xff0c;验证每一步都不能少。连接上了之后才能调用控制第三方设备。换一个设备之后&#xff0c;所有的代码…

HarmonyOS系统中内核实现MQTT协议开发的方法

大家好&#xff0c;今天主要来聊一聊&#xff0c;如何使用鸿蒙开始实现MQTT协议开发的方法 第一&#xff1a;MQTT基本原理 在MQTT协议通讯中&#xff0c;有两个最为重要的角色。它们分别是服务端和客户端。首先我们来初步了解一下它们。 MQTT服务端 MQTT服务端通常是一台…

荣耀30能用鸿蒙系统吗,华为荣耀30 Pro开始测试使用鸿蒙OS系统!

据系统之家了解 最近荣耀30 Pro手机已经开始测试使用鸿蒙OS系统。虽然之前因为多方原因&#xff0c;华为不得已将荣耀转让出去&#xff0c;但是就目前来说两者联系还是非常的大的。 此外&#xff0c;他还透露荣耀 30 系列、V30 系列、Play4 Pro 下个月将升级到华为鸿蒙系统。 荣…

HarmonyOS系统中内核实现UART串口通信方法

大家好&#xff0c;今天主要聊一聊&#xff0c;如何使用鸿蒙系统实现UART数据的读写方法。 目录 第一&#xff1a;串口通信基本原理 第二&#xff1a;鸿蒙UART API分析 第三&#xff1a;硬件设计 第四&#xff1a;软件设计 第五&#xff1a;编译调试 第六&#xff1a…

HarmonyOS鸿蒙开发入门 :鸿蒙系统介绍

系统定位 HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 在传统的单设备系统能力基础上&#xff0c;HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念&#xff0c;能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备&#xff0c;提供全…

鸿蒙系统(HarmonyOS)体验怎么样

华为鸿蒙系统体验几天后&#xff0c;真的非常好用&#xff0c;首先华为比较聪明的地方&#xff0c;没有改变人们使用习惯。当然被竞争对手吐槽&#xff0c;说界面和安卓一样。这些喷子们以为华为用户都是菜鸟吗&#xff1f;里面很多都是懂手机的人&#xff0c;很多都是第一代玩…

鸿蒙系统是否可以用来做服务器,小米手机也能使用鸿蒙系统?国内厂商使用鸿蒙热情高涨...

原标题:小米手机也能使用鸿蒙系统?国内厂商使用鸿蒙热情高涨 自从6月2日HarmonyOS 2正式发布以来,国内针对鸿蒙系统的热议一直不减。对于新买的华为手机用户来说,能第一批次使用上国产的手机系统,也确实过了一把瘾。本次手机系统更新,华为采用分批次更新。 一是因为手机系…

为什么要学习鸿蒙,HarmonyOS不只是操作系统

前些天发现了十分不错的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;没有广告&#xff0c;分享给大家&#xff0c;大家可以自行看看。&#xff08;点击跳转人工智能学习资料&#xff09; 前言 对于IT行业&#xff0c;头部力量或者已经形成生态的东西…

华为HarmonyOS鸿蒙系统介绍,华为鸿蒙OS系统怎么样 华为HarmonyOS鸿蒙系统介绍

华为鸿蒙OS系统怎么样?华为在8月9日的2019华为开发者大会上正式发布了华为HarmonyOS鸿蒙系统,大家知道这个系统具体是用在哪些产品上的吗?有哪些功能呢?能兼容别的系统吗?下面小编为大家带来了华为HarmonyOS鸿蒙系统介绍,一起来看看吧。 华为HarmonyOS鸿蒙系统介绍 在8月…

华为鸿蒙系统HarmonyOS学习之十:鸿蒙HarmonyOS微内核技术

华为鸿蒙系统HarmonyOS学习之十&#xff1a;鸿蒙HarmonyOS微内核技术 一、前言 把操作系统中更多的成分和功能放到更高的层次&#xff08;即用户模式&#xff09;中去运行&#xff0c;而留下一个尽量小的内核&#xff0c;用它来完成操作系统最基本的核心功能&#xff0c;称这种…

鸿蒙存储系统文件系统,鸿蒙liteWearable操作文件系统的正确姿势

10月20号我在官方论坛提了一个问题&#xff0c;请问文件存储接口的根路径是什么&#xff1f; 原因是在看官方文档学习时测试文件存储的API 作为一个有经验(一点点)的开发人员&#xff0c;把代码贴到onShow()中直接执行。最终报错301&#xff0c;文件不存在。报错了那一定是我没…

华为鸿蒙harmony操作系统 安装使用及下载地址

目录 鸿蒙harmony系统 安装方式 选择我已复制该虚拟机 登录系统 系统界面 下载地址 鸿蒙harmony系统 鸿蒙系统是华为基于Ubuntu linux发行版定制化开发的一款操作系统&#xff0c;将主要应用于Android系统的定制化开发。 已将鸿蒙系统在VMware虚拟机上成功进行了安装&a…

华为鸿蒙系统HarmonyOS学习之十四:方舟编译器

华为鸿蒙系统HarmonyOS学习之十四&#xff1a;方舟编译器 方舟编译器是华为自研的一个支持多种编程语言&#xff0c;多种芯片平台的联合编译编程平台&#xff0c;而经过方舟编译器编译适配后的APP&#xff0c;运行效率会大大提高&#xff0c;拥有更为流畅的体验&#xff0c;足以…

念一句咒语 AI 就帮我写一个应用,我人麻了...

原文链接&#xff1a;https://forum.laf.run/d/232 作为人类&#xff0c;我们时常会有自己独特的想法和脑洞大开的创意。然而&#xff0c;这些想法往往因为成本过高而无法实现&#xff0c;毕竟每个人的能力和精力都是有限的&#xff0c;尤其是对于程序员而言&#xff0c;不可能…