谷粒商城项目工具准备_谷粒商城软件

返回导航页

https://blog.csdn.net/hancoder/article/details/106922139

1、前置知识-安装虚拟机

nacos安装方式：（仓库里找吧）

https://gitee.com/coder-msc/tools

使用vagrant
先下载VirtualBOX
下载地址：https://www.virtualbox.org/wiki/Downloads
后安装vagrant
下载地址： https://www.vagrantup.com/

输入vagrant init centos/7，即可初始化一个centos7系统。（注意这个命令在哪个目录下执行的，他的Vagrantfile就生成在哪里）
修改配置文件
需要cmd看ipconfig 以太网适配器 VirtualBox Host-Only Networkz这个地址，因此192.168.33.10也可能
config.vm.network “private_network”,ip:“192.168.56.10”
vagrant up 命令是安装并启动虚拟机，
如果是第一次，它会下载对应的虚拟机镜像文件，下载完成了之后就会自动启动虚拟机，
以后再执行这个命令就是直接启动已经安装的虚拟机了。
（出现下面的报错，都是网络不好，重新下载即可）
vagrant reload 改完重启启动虚拟机环境。

虚拟机问题

使用的网络方式是网络地址转换NAT（端口转发），如果其他主机要访问虚拟机，必须由windows端口如3333断发给虚拟机端口如3306。
这样每在linux里安一个软件都要进行端口映射，不方便，（也可以在virualBox里挨个设置）。我们想要给虚拟机一个固定的ip地址
，windows和虚拟机可以互相ping通。
1
2
3

使用Xshell连接虚拟机

如何通过其他工具链接ssh

vi /etc/ssh/sshd_config

修改 PasswordAuthentication yes

systemctl restart sshd.service 或 service sshd restart

连接192.168.56.10:22端口成功，用户名root，密码vagrant

也可以通过vagrant ssh-config查看ip和端口，此时是127.0.0.1:2222
1
2
3
4
5
6
7
8
9
10
11

》

密钥路径： X:\vagrant\centos.vagrant\machines\default\virtualbox

虚拟机安装让必要软件

1、配置源

# 备份原yum源

mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
# 使用新yum源
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.163.com/.help/CentOS7-Base-163.repo
# 生成缓存
yum makecache
1
2
3
4
5
6
7

2、虚拟机安装docker

# https://docs.docker.com/engine/install/centos/


#卸载系统之前的docker 
sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-engine
                  
                  
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

sudo systemctl start docker
# 设置开机自启动
sudo systemctl enable docker

docker -v
sudo docker images

# 配置镜像加速
https://cr.console.aliyun.com/cn-qingdao/instances/mirrors

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://lrhf8l1s.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

安装mysql

sudo docker pull mysql:5.7

# --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

1
2
3
4
5
6
7
8
9
10

修改MySQL配置

docker exec -it mysql bin/bash
exit;

因为有目录映射，所以我们可以直接在镜像外执行
进入目录： 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

# 退出保存 重启
docker restart mysql
# 每次开机都启动
docker update redis --restart=always

账号密码：root root即可访问MySQL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

修改MySQL初始密码

1、使用命令，进入 docker 挂载下的 msyql 中
docker exec -it mysql /bin/bash
1
2

2、修改密码：
ALTER USER 'root'@'%' IDENTIFIED BY '<new password>' PASSWORD EXPIRE NEVER;
ALTER USER 'root'@'localhost' IDENTIFIED BY '<new password>';
# 注：这两个密码需要一样
比如改为 1234 那么如下
ALTER USER 'root'@'%' IDENTIFIED BY '1234' PASSWORD EXPIRE NEVER;

3.退出，重启 docker挂载的mysql
exit;
exit
4、重启MySQL镜像
docker restart mysql

1
2
3
4
5
6
7
8
9
10
11
12
13

安装Redis
如果直接挂载的话docker会以为挂载的是一个目录，所以我们先创建一个文件然后再挂载，在虚拟机中。

# 在虚拟机中新建文件夹、文件
mkdir -p /mydata/redis/conf
touch /mydata/redis/conf/redis.conf
# 下载镜像
docker pull redis
# 启动并挂载
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客户端。
docker exec -it redis redis-cli

// 默认是不持久化的。在配置文件中输入appendonly yes，就可以aof持久化了。
// 修改完docker restart redis，docker -it redis redis-cli

vim /mydata/redis/conf/redis.conf
# 插入下面内容
appendonly yes

保存 重启
docker restart redis

设置redis容器在docker启动的时候启动
docker update redis --restart=always
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

安装Nginx

docker pull nginx:1.10
# 随便启动一个nginx实例，只是为了复制出配置，放到docker里作为镜像的统一配置
docker run -p 80:80 --name nginx -d nginx:1.10

cd /mydata/nginx
docker container cp nginx:/etc/nginx .
然后在外部 /mydata/nginx/nginx 有了一堆文件
mv /mydata/nginx/nginx /mydata/nginx/conf
# 停掉nginx
docker stop nginx
docker rm nginx

# 创建新的nginx
docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx \
-v /mydata/nginx/conf:/etc/nginx \
-d nginx:1.10

# 注意一下这个路径映射到了/usr/share/nginx/html，我们在nginx配置文件中是写/usr/share/nginx/html，不是写/mydata/nginx/html

docker update nginx --restart=always

# 测试Nginx是否成功
cd /mydata/nginx/html/
vim index.html
随便写写
测试 http://192.168.56.10:80
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

docker安装其余用到的软件

docker安装elasticsearch 、kibana

项目架构图

项目划分图

创建项目

修改总项目的.gitignore，把小项目里的垃圾文件在提交的时候忽略掉，
**/mvnw
**/mvnw.cmd
**/.mvn
**/target/
.idea
**/.gitignore
1
2
3
4
5
6
7

详细代码
https://gitee.com/coder-msc/gilimall/blob/develop/pom.xml

创建数据库

脚本见这个
点他—> 数据库脚本文件

人人开源项目

https://gitee.com/renrenio

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

1
2
3
4
5

移动文件夹，并且加入聚合项目里

启动看看

人人开源前端

vscode下载、安装、中文
Vscode下载地址-官网
汉化
ctrl + shift + P 搜索 configure language 安装中文插件

插件安装搜索： @category:“language packs”

安装Node
参考这个大佬写的
https://blog.csdn.net/qq_34732729/article/details/105652029

跑起来项目
直接将下载的前端文件拖入VScode 在npm install
完事在 npm run dev

访问了看看

我的代码：

https://gitee.com/coder-msc/gulimall-admina
1

代码生产器

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

mybatis的小鸟，需要安装mybatisx插件就可以显示了。

测试代码

如果代码依赖有报错的，那就到renren_fast去拷贝过来，并修改JDK版本为1.8.

## 新建yml文件，设置mybatis扫描路径，数据库连接地址。
spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://192.168.56.10:3306/gulimall_pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
    driver-class-name: com.mysql.jdbc.Driver

# MapperScan
# sql映射文件位置
mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

测试通过，后续接着补充营销服务、优惠券服务等的代码。

common里引入springcloud -alibaba

<dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency>
1
2
3
4

yml配置文件写法

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://192.168.56.10:3306/gulimall_sms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
    driver-class-name: com.mysql.cj.jdbc.Driver
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
  application:
    name: gulimall-coupon



mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
      logic-delete-value: 1
      logic-not-delete-value: 0
server:
  port: 7000
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

每个服务要有远程调用能力，需要引入OpenFeign组件

<dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>
1
2
3
4

要远程调用成功，这个注解很关键

Springboot版本和springbootCloud版本问题

不要用最新版，新版取消了Ribbon会报错的，建议降低版本使用，版本依赖可以参考我的代码。

https://gitee.com/coder-msc/gilimall
1

配置中心

在coupons项目中创建/src/main/resources/bootstrap.properties ，这个文件是springboot里规定的，他优先级别application.properties高

# 改名字，对应nacos里的配置文件名
spring.application.name=gulimall-coupon
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
1
2
3

浏览器去nacos里的配置列表，点击＋号，data ID：gulimall-coupon.properties，配置

# gulimall-coupon.properties
coupon.user.name="配置中心"      
coupon.user.age=12
1
2
3

网关

创建网关项目

spring:
  application:
    name: gulimall-gateway
  cloud:
    gateway:
      routes:
        - id: test_route
          uri: https://www.baidu.com
          predicates:
            - Query=url,baidu

        - id: qq_route
          uri: https://www.qq.com
          predicates:
            - Query=url,qq

        - id: product_route
          uri: lb://gulimall-product
          predicates:
            - Path=/api/product/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}

        - id: third_party_route
          uri: lb://gulimall-third-party
          predicates:
            - Path=/api/thirdparty/**
          filters:
            - RewritePath=/api/thirdparty/(?<segment>.*),/$\{segment}

        - id: member_route
          uri: lb://gulimall-member
          predicates:
            - Path=/api/member/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}

        - id: ware_route
          uri: lb://gulimall-ware
          predicates:
            - Path=/api/ware/**
          filters:
            - RewritePath=/api/(?<segment>.*),/$\{segment}

        - id: admin_route
          uri: lb://renren-fast
          predicates:
            - Path=/api/**
          filters:  # 这段过滤器和验证码有关，api内容缓存了/renren-fast，还得注意/renren-fast也注册到nacos中
            - RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

后端初始化结束

到此为止，后端基础代码已经搭建完毕，可以使用我的代码来构建

管理后台

打开人人fast

后端


配置跨域

@Bean
    public CorsWebFilter corsWebFilter(){

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();

        // 配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**",corsConfiguration);



        return new CorsWebFilter(source);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

以后的基础代码直接copy吧，看着视频，拷着代码，一步一步来 多香。都是业务代码了。理解业务即可

做一点补充哈，少了个字段，加上就行。大约在视频P78的地方；
代码仓库也给放这了 看着拷贝吧！

https://gitee.com/coder-msc/gilimall

踩坑补充

一、
※p84 关于pubsub、publish报错，无法发送查询品牌信息的请求：
1、npm install --save pubsub-js
2、在src下的main.js中引用：
① import PubSub from ‘pubsub-js’
② Vue.prototype.PubSub = PubSub

二、
补充缺失的SQL

https://gitee.com/coder-msc/gilimall/tree/master/%E9%A1%B9%E7%9B%AE%E5%A4%87%E7%94%A8%E8%84%9A%E6%9C%AC%E7%AD%89%E6%96%87%E4%BB%B6/sql%E8%84%9A%E6%9C%AC

三、补充前端缺失代码
foreach前，必须要判空，否则会报错页面不显示