当前位置:   article > 正文

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

谷粒商城软件

返回导航页

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

vagrant reload

在这里插入图片描述

密钥路径: 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前,必须要判空,否则会报错页面不显示
在这里插入图片描述
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/462413
推荐阅读
相关标签
  

闽ICP备14008679号