/gulimall

谷粒商城

Primary LanguageJavaScriptApache License 2.0Apache-2.0

谷粒商城简介

前言

gulimall` 项目致力于打造一个完整的电商系统,采用现阶段流行技术来实现,采用前后端分离继续编写。

学习项目

项目API接口文档

项目介绍

gulimall(谷粒商城) 项目是一套电商项目,包括前台商城系统以及后台管理系统,基于 SpringCloud + SpringCloudAlibaba + MyBatis-Plus实现,采用 Docker 容器化部署。前台商城系统包括:用户登录、注册、商品搜索、商品详情、购物车、下订单流程、秒杀活动等模块。后台管理系统包括:系统管理、商品系统、优惠营销、库存系统、订单系统、用户系统、内容管理等七大模块。

项目演示

前台部分功能演示效果

UUvLAU.png

UUv7n0.png

后端登录界面

UUvXh4.png

主页面

UUv51s.png

后台部分功能

UUvoXq.th.pngUUvONF.th.pngUUvHBV.th.pngUUvIcn.th.png

组织结构

gulimall
├── gulimall-common -- 工具类及通用代码
├── renren-generator -- 人人开源项目的代码生成器
├── gulimall-auth-server -- 认证中心(社交登录、OAuth2.0、单点登录)
├── gulimall-cart -- 购物车服务
├── gulimall-coupon -- 优惠卷服务
├── gulimall-gateway -- 统一配置网关
├── gulimall-order -- 订单服务
├── gulimall-product -- 商品服务
├── gulimall-search -- 检索服务
├── gulimall-seckill -- 秒杀服务
├── gulimall-third-party -- 第三方服务
├── gulimall-ware -- 仓储服务
├── gulimall-member -- 会员服务
├── renren-fast-vue -- 前端项目
└── resources -- 项目资源文件,例如:mysql、nginx配置、页面等等
		├── mydata -- 数据文件,包含elasticsearch、nginx完整配置以及数据
		├── gulimall.host -- 本地端口映射,存放gulimall.com域名映射规则
		├── gulimall_product.es_mapping.json -- elasticsearch商品映射
		└── sql -- 所有数据库文件

技术选型

后端技术

技术 说明 官网
SpringBoot 容器+MVC框架 https://spring.io/projects/spring-boot
SpringCloud 微服务架构 https://spring.io/projects/spring-cloud
SpringCloudAlibaba 一系列组件 https://spring.io/projects/spring-cloud-alibaba
MyBatis-Plus ORM框架 https://mp.baomidou.com
renren-generator 人人开源项目的代码生成器 https://gitee.com/renrenio/renren-generator
Elasticsearch 搜索引擎 https://github.com/elastic/elasticsearch
RabbitMQ 消息队列 https://www.rabbitmq.com
Springsession 分布式缓存 https://projects.spring.io/spring-session
Redisson 分布式锁 https://github.com/redisson/redisson
Docker 应用容器引擎 https://www.docker.com
OSS 对象云存储 https://github.com/aliyun/aliyun-oss-java-sdk

前端技术

技术 说明 官网
Vue 前端框架 https://vuejs.org
Element 前端UI框架 https://element.eleme.io
thymeleaf 模板引擎 https://www.thymeleaf.org
node.js 服务端的js https://nodejs.org/en

架构图

系统架构图

UUvRAS.png

业务架构图

UUvb7T.png

环境搭建

开发工具

工具 说明 官网
IDEA 开发Java程序 https://www.jetbrains.com/idea/download
RedisDesktop redis客户端连接工具 https://redisdesktop.com/download
SwitchHosts 本地host管理 https://oldj.github.io/SwitchHosts
X-shell Linux远程连接工具 http://www.netsarang.com/download/software.html
Navicat 数据库连接工具 http://www.formysql.com/xiazai.html
PowerDesigner 数据库设计工具 http://powerdesigner.de
Postman API接口调试工具 https://www.postman.com
Jmeter 性能压测工具 https://jmeter.apache.org
Typora Markdown编辑器 https://typora.io

开发环境

工具 版本号 下载
JDK 1.8 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
Mysql 5.7 https://www.mysql.com
Redis Redis https://redis.io/download
Elasticsearch 7.6.2 https://www.elastic.co/downloads
Kibana 7.4.2 https://www.elastic.co/cn/kibana
RabbitMQ 3.9.13 http://www.rabbitmq.com/download.html
Nginx 1.10 http://nginx.org/en/download.html

注意:以上的除了jdk都是采用docker方式进行安装

搭建步骤

Mac OS环境部署

  • 修改本机的host文件,映射域名端口
# 谷粒商城域名映射
172.16.156.128 gulimall.com
172.16.156.128 order.gulimall.com
172.16.156.128 item.gulimall.com
172.16.156.128 search.gulimall.com
172.16.156.128 auth.gulimall.com
172.16.156.128 cart.gulimall.com
172.16.156.128 member.gulimall.com
172.16.156.128 seckill.gulimall.com
以上端口换成自己Linux的ip地址
  • 修改Linux中Nginx的配置文件
1、在nginx.conf中添加负载均衡的配置    
upstream gulimall {
		server 172.16.156.1:88;
}
2、在gulimall.conf中添加如下配置
server {
    listen       80;
    # *.natappfree.cc 是natapp内网穿透地址,用于完成支付宝支付
    server_name gulimall.com  *.gulimall.com *.natappfree.cc;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    #配置静态资源的动态分离
    location /static/ {
        root /usr/share/nginx/html;
    }

    #支付异步回调的一个配置
    location /alipay/success {
        proxy_pass http://gulimall;
        # 由于内网穿透域名问题,手动设置host,不让请求头丢失
        proxy_set_header Host order.gulimall.com;
    }

    location / {
        proxy_pass http://gulimall;
        #不让请求头丢失
        proxy_set_header Host $host;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}


  • 前端项目是 /gulimall/renren-fast-vue,使用 yarn dev 或者 npm run dev注意该项目使用nodejs 10-12的版本
  • /gulimall/renren-fast 是后台管理系统