谷粒商城项目工具准备

您所在的位置:网站首页 虚拟商城软件 谷粒商城项目工具准备

谷粒商城项目工具准备

2024-07-02 00:46| 来源: 网络整理| 查看: 265

谷粒商城项目新手 返回导航页1、前置知识-安装虚拟机虚拟机问题虚拟机安装让必要软件docker安装其余用到的软件 项目架构图项目划分图创建项目创建数据库人人开源项目人人开源前端代码生产器测试代码common里引入springcloud -alibabaSpringboot版本和springbootCloud版本问题配置中心网关后端初始化结束 管理后台以后的基础代码直接copy吧,看着视频,拷着代码,一步一步来 多香。都是业务代码了。理解业务即可https://gitee.com/coder-msc/gilimall踩坑补充

返回导航页

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通。

使用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

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

在这里插入图片描述

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 数据库脚本文件 在这里插入图片描述

人人开源项目 https://gitee.com/renrenio git clone https://gitee.com/renrenio/renren-fast.git git clone https://gitee.com/renrenio/renren-fast-vue.git

在这里插入图片描述 移动文件夹,并且加入聚合项目里 在这里插入图片描述 启动看看 在这里插入图片描述

人人开源前端

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 代码生产器 git clone https://gitee.com/renrenio/renren-generator.git

在这里插入图片描述 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

在这里插入图片描述 在这里插入图片描述 测试通过,后续接着补充营销服务、优惠券服务等的代码。

common里引入springcloud -alibaba com.alibaba.cloud spring-cloud-starter-alibaba-nacos-discovery

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

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

org.springframework.cloud spring-cloud-starter-openfeign

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

在这里插入图片描述

Springboot版本和springbootCloud版本问题

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

https://gitee.com/coder-msc/gilimall 配置中心

在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

浏览器去nacos里的配置列表,点击+号,data ID:gulimall-coupon.properties,配置

# gulimall-coupon.properties coupon.user.name="配置中心" coupon.user.age=12 网关

创建网关项目

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} - id: third_party_route uri: lb://gulimall-third-party predicates: - Path=/api/thirdparty/** filters: - RewritePath=/api/thirdparty/(?.*),/$\{segment} - id: member_route uri: lb://gulimall-member predicates: - Path=/api/member/** filters: - RewritePath=/api/(?.*),/$\{segment} - id: ware_route uri: lb://gulimall-ware predicates: - Path=/api/ware/** filters: - RewritePath=/api/(?.*),/$\{segment} - id: admin_route uri: lb://renren-fast predicates: - Path=/api/** filters: # 这段过滤器和验证码有关,api内容缓存了/renren-fast,还得注意/renren-fast也注册到nacos中 - RewritePath=/api/(?.*),/renren-fast/$\{segment} 后端初始化结束

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

管理后台

打开人人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); }

在这里插入图片描述

以后的基础代码直接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前,必须要判空,否则会报错页面不显示 在这里插入图片描述 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3