谷粒商城基础篇

最新推荐文章于 2024-07-05 14:54:19 发布

hzc246

最新推荐文章于 2024-07-05 14:54:19 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/hzc246/article/details/116203365

版权

本文档详述了谷粒商城的搭建过程，包括项目架构、数据库设计、Linux环境准备、开发环境配置、微服务组件整合及前端基础。涵盖了商品库、用户库、优惠库、订单库和库存库的表设计，以及Linux环境中的CentOS-7、Docker、MySQL和Redis的准备。在开发环境中，介绍了IDEA、VSCode和Chrome的准备，以及Git的SSH免密设置。文章还涉及了微服务组件如Nacos、OpenFeign和API网关的配置，并讲解了Vue的基础知识，包括ES6特性、Vue的MVVM模式、组件化和生命周期。最后，文中讨论了开发中的关键功能实现，如路由配置、跨域处理、文件上传、异常处理和数据库设计。

摘要由CSDN通过智能技术生成

第一章项目简介

1.1 架构图

1.2 微服务划分图

1.3 表设计

1.3.1 商品库

pms_category类别表，如上图，用来展示首页三级分类。

pms_brand品牌表，每个商品都属于某个品牌，用来存品牌的名字和logo等。

pms_category_brand_relation类别和品牌关联表，某个品牌可以属于多个类别。

pms_attr_group属性分组表，如上图，主体为一个属性分组。

pms_product_attr_value，商品属性值表，记录某个商品某个属性的值，如上图中的2020年。

pms_attr属性表，用来记录一共有哪些属性，这个属性一共可以有哪些值，属于哪个类别。

pms_attr_attrgroup_relation属性与属性分组关联表，一个属性分组可以有多个属性。

pms_sku_sale_attr_balue商品SKU销售属性表记录某个sku某个属性的具体值。比如1号sku颜色是白色，CPU型号是A14。

pms_spu_info，用来记录一个spu的名字、描述、类别、品牌等。

pms_spu_info_desc，以图片的方式记录一个spu的具体介绍。

pms_spu_images，记录一个spu的图库。

pms_sku_info，用来记录一个sku的名字、描述、类别、品牌、标题、价格等。

1.3.2 用户库

ums_member会员表，记录姓名、手机号、密码、昵称、会员等级等等信息。

ums_member_level会员等级表，记录一共有哪些等级。

ums_member_receive_address会员收货地址表，记录某个会员的收货地址信息。

1.3.3 优惠库

sms_member_price 记录某个sku对应某个会员等级的价格。

sms_sku_full_reduction 满减信息表，记录某个sku满多少减多少。

sms_sku_ladder 打折信息表，记录某个sku满多少件打几折。

sms_seckill_session 秒杀场次表，记录某个秒杀场次的开始时间和结束时间。

sms_seckill_sku_relation 记录某个秒杀场次某个sku的秒杀价格、秒杀数量、限购数量。

1.3.4 订单库

oms_order订单表，记录某个订单的订单号、会员id、创建时间、订单总额、应付总额、运费金额、支付方式、订单状态、支付时间、发货时间、确认收货时间、评价时间、收货人信息物流信息等等。

oms_order_item，记录某个订单买的所有商品的详细信息。

oms_payment_info支付信息表，记录某个订单对接其他支付的流水号、金额、状态、回调内容、回调时间等。

1.3.5 库存库

wms_ware_info库存信息表，记录仓库的名字、地址等信息。

wms_ware_sku记录某个仓库某个sku一共有多少库存、已锁定的库存。

wms_ware_order_task库存工作单表，为一个订单创建一个库存工作单。

wms_ware_order_task_detail库存工作单详情表，记录某个工作单中的某个sku的购买个数、仓库id、以及锁定状态。用来实现分布式锁库存的最终一致性。

第二章 Linux环境准备

2.1 CentOS-7

虚拟机安装CentOS-7

2.2 Docker

 sudo yum install -y yum-utils

 sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo

 sudo yum install docker-ce docker-ce-cli containerd.io

 #启动docker
 sudo systemctl start docker

 #开机自启docker
 sudo systemctl enable docker

#镜像加速
sudo mkdir -p /etc/docker

sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://lp2olewb.mirror.aliyuncs.com"]
}
EOF

sudo systemctl daemon-reload

sudo systemctl restart docker

2.3 MySQL

sudo docker pull mysql:5.7

# 运行mysql容器
# --name指定容器名字 -v目录挂载 -p指定端口映射  -e设置mysql参数 -d后台运行
sudo docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

#修改mysql配置
vi /mydata/mysql/conf/my.conf

[client]
default-character-set=utf8
[mysql]
default-character-set=utf8
[mysqld]
init_connect='SET collation_connection = utf8_unicode_ci'
init_connect='SET NAMES utf8'
character-set-server=utf8
collation-server=utf8_unicode_ci
skip-character-set-client-handshake
skip-name-resolve

#重启mysql
docker restart mysql

#进入mysql容器
docker exec -it mysql bin/bash

2.4 Redis

docker pull redis

mkdir -p /mydata/redis/conf

touch /mydata/redis/conf/redis.conf

docker run -p 6379:6379 --name redis \
-v /mydata/redis/data:/data \
-v /mydata/redis/conf/redis.conf:/etc/redis/redis.conf \
-d redis redis-server /etc/redis/redis.conf

#redis持久化
vi /mydata/redis/conf/redis.conf
appendonly yes

docker restart redis

# 设置我们要用的容器每次都是自动启动
sudo docker update redis --restart=always
sudo docker update mysql --restart=always

第三章开发环境准备

3.1 IDEA准备

安装JDK1.8。

plugin里安装插件lombok，mybatisX。

配置maven。

3.2 VSCode准备

安装插件Auto Close Tag、Auto Rename Tag、Chinese、ESlint、HTML CSS Support、HTML Snippets、JavaScript ES6、Live Server、open in brower、Vetur、Vue 3 Snippets

Code-首选项-用户片段中增加代码模板:

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "Log output to console"
    },
    "http-get请求": {
        "prefix": "httpget",
        "body": [
            "this.\\$http({",
            "url:this.\\$http.adornUrl(''),",
            "method:'get',",
            "params:this.\\$http.adornParams({})",
            "}).then(({data})=>{",
            "})"
        ],
        "description": "httpGET请求"
    },
    "http-post请求": {
        "prefix": "httppost",
        "body": [
            "this.\\$http({",
            "url:this.\\$http.adornUrl(''),",
            "method:'post',",
            "data: this.\\$http.adornData(data, false)",
            "}).then(({data})=>{ })"
        ],
        "description": "httpPOST请求"
    },
}

3.3 Chrome浏览器准备

安装Vue.js devtools插件，在插件设置中勾选允许访问文件网址。

3.4 Git设置ssh免密

git config --global user.name "huangzc"
git config --global user.email "540955198@qq.com"

ssh-keygen -t rsa -C "540955198@qq.com"

cat ~/.ssh/id_rsa.pub
#登录码云后，个人头像上点设置--ssh公钥

#测试免密
ssh -T git@gitee.com

3.5 码云创建商城项目

在码云新建仓库，仓库名gulimall，选择语言java，在.gitignore选中maven，许可证选Apache-2.0，勾选使用readme初始化，开发模型选生成/开发模型，创建。

3.6 IDEA导入商城项目

IDEA里面导入刚才创建的仓库。

3.7 创建商城模块

New Module–Spring Initializer–com.hzc.gulimall ， Artifact填 gulimall-product，选Spring web和 openFeign。

依次创建商品服务product、存储服务ware、订单服务order、优惠券服务coupon、用户服务member

注意springboot版本不要太高，本项目选2.1.8.RELEASE。

3.7.1 聚合服务

根目录添加pom.xml，聚合所有服务。

3.7.2 git忽略版本控制

根目录下的.gitignore添加以下规则。

**/mvnw
**/mvnw.cmd
**/.mvn
**/target/
.idea
**/.gitignore

3.8 数据库初始化

3.8.1 建数据库

CREATE SCHEMA `gulimall-oms` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;
CREATE SCHEMA `gulimall-pms` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;
CREATE SCHEMA `gulimall-sms` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;
CREATE SCHEMA `gulimall-ums` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;
CREATE SCHEMA `gulimall-wms` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;
CREATE SCHEMA `gulimall-admin` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ;

3.8.2 执行SQL语句

gulimall_oms.sql

gulimall_pms.sql

gulimall_sms.sql

gulimall_ums.sql

gulimall_wms.sql

注意pms_attr表中少了value_type字段

alter pms_attr add value_type column tinyint(4)

3.9 前后端分离后台管理项目

3.9.1 renren-fast后台

git clone https://gitee.com/renrenio/renren-fast.git

根目录pom.xml聚合renren-fast。

在数据库中执行mysql.sql。

3.9.2 renren-fast-vue前端

git clone https://gitee.com/renrenio/renren-fast-vue.git

下载node.js 12版本，设置镜像仓库。

npm config set registry http://registry.npm.taobao.org/

VScode打开fast-vue项目，package.json里面版本修改为 "node-sass": "4.14.1",

终端中输入 npm install。（mac下需要先安装Xcode软件），npm run dev启动项目。

3.10 逆向工程

拉取逆向工程项目。

git clone https://gitee.com/renrenio/renren-generator.git

以gulimall-product为例，其余模块方法同理。

3.10.1 修改renren-generator中的application.yml

配置mysql的地址，以及库名称。

url: jdbc:mysql://100.68.126.249:3306/gulimall-pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai

3.10.2 修改Controller.java.vm文件里

把Shiro有关的注解先注释掉。

 //   @RequiresPermissions("${moduleName}:${pathName}:update")

3.10.3 修改generator.properties

更改mainPath,package,moduleName,author,email,tablePrefix

mainPath=com.hzc
#包名
package=com.hzc.gulimall
moduleName=product
#作者
author=huangzc
#Email
email=540955198@qq.com
#表前缀(类名不会包含表前缀)
tablePrefix=pms_

3.10.4 生成代码

启动RenrenApplication.java，访问http://localhost:80/，点击生成代码。把main放到gulimall-product的同级目录下。

3.10.5 创建gulimall-common模块

创建gulimall-common模块解决类报错问题，pom.xml添加

    <dependencies>
        <!-- mybatisPLUS-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.2</version>
        </dependency>
        <!--简化实体类，用@Data代替getset方法-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>

最低0.47元/天解锁文章

hzc246

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
谷粒商城基础篇

第一章项目简介1.1 架构图1.2 微服务划分图1.3 表设计1.3.1 商品库pms_category类别表，如上图，用来展示首页三级分类。pms_brand品牌表，每个商品都属于某个品牌，用来存品牌的名字和logo等。pms_category_brand_relation类别和品牌关联表，某个品牌可以属于多个类别。pms_attr_group属性分组表，如上图，主体为一个属性分组。pms_product_attr_value，商品属性值表，记录...
复制链接

扫一扫