这篇文章给我们带来我自己写的开源项目【wayn商城】的本地开发攻略,协助各位朋友在本地快速运转【wayn商城】,避免踩坑,削减不必要的精力在软件下载装置上。
waynboot-mall 是一套悉数开源的 H5 商城项目,实现了一套完整的商城前后台业务,有主页展现、产品分类、产品概况、sku 概况、产品查找、加入购物车、结算下单、支付宝/微信支付、订单列表、产品评论等一系列功用 。
技术上依据最新得 Spring Boot3.1、Mybatis Plus、Spring Security,整合了 Mysql、Redis、RabbitMQ、ElasticSearch 等常用中间件,依据我多年线上项目实战经验总结开发而来不断优化、完善。
前置预备
后端装置
- Jdk17,装置包下载地址 download.oracle.com/java/17/arc…
- Maven,压缩包下载地址 dlcdn.apache.org/maven/maven…
- IDE 东西,推荐运用 IntelliJ IDEA ,官网下载地址 www.jetbrains.com/idea/
- 本地数据库 MySql,装置教程 bbs.huaweicloud.com/blogs/32690…
- 本地缓存 Redis,装置教程 www.cnblogs.com/yyee/p/1583…
- MySql 客户端,推荐运用 Navicat Premium16,装置教程 learnku.com/articles/67…
- Redis 客户端,推荐运用 AnotherRedisDesktopManager,下载地址 github.com/qishibo/Ano…
- Elasticsearch7,官网下载地址 www.elastic.co/cn/download…
- Git,官网下载地址 git-scm.com/download/wi…
- 商城图片压缩包下载,在我的大众号【程序员 wayn】,回复 wayn 商城材料 收取。
前端装置
- nodejs v16.20.1 版本,装置包下载地址 nodejs.org/download/re…
- IDE 东西,推荐运用 vscode,官网地址 code.visualstudio.com/
以上软件装置包我现已下载好放在百度云盘中,我们能够在我的大众号【程序员 wayn】,回复 wayn 商城材料 即可收取。
商城图片压缩包也放在了百度云中。
本地发动前后端项目
发动前后端项现在,默许我们现已将上述软件悉数装置发动成功。
后端项目
克隆 waynboot-mall 项目
- git 地址:git clone git@github.com:wayn111/waynboot-mall.git
- gitee 地址:git clone git@gitee.com:wayn111/waynboot-mall.git
导入项目依靠
将 waynboot-mall 目录用 idea 打开,导入 maven 依靠
导入 sql 文件
在项目根目录下,找到wayn_shop_*.sql
文件,新建 mysql 数据库 wayn_shop,编码挑选 utf8mb4,导入其间
图片部署
将商城图片压缩包中所有图片解压缩部署到 D:waynshopwebp 目录下
修正 Mysql、Redis、RabbitMQ、Elasticsearch 衔接装备
找到 waynboot-common 模块下的 application-dev.yml
文件以及 waynboot-consumer 模块下的 application.yml
文件,修正 MySQL、Redis、RabbitMQ、Elasticsearch 的衔接装备相关信息
发动项目
-
后台 api 发动:进入 waynboot-admin-api 子模块,找到 AdminApplication 文件,右键
run AdminApplication
,发动后台项目 -
顾客发动:进入 waynboot-message-consumer 子模块,找到 MessageApplication 文件,右键
run MessageApplication
,发动顾客 -
h5 商城 api 发动:进入 waynboot-mobile-api 子模块,找到 MobileApplication 文件,右键
run MobileApplication
,发动 h5 商城项目
前端项目
克隆商城前台项目
- git 地址:git clone git@github.com:wayn111/waynboot-mobile.git
- gitee 地址:git clone git@gitee.com:wayn111/waynboot-mobile.git
进入项目目录
cd waynboot-mobile
装置依靠
npm install
建议不要直接运用 cnpm 装置依靠,会有各种怪异的 bug。能够通过如下操作处理 npm 下载速度慢的问题
npm install –registry=registry.npm.taobao.org
发动服务
npm run dev
克隆商城后台项目
- git 地址:git clone git@github.com:wayn111/waynboot-admin.git
- gitee 地址:git clone git@gitee.com:wayn111/waynboot-admin.git
进入项目目录
cd waynboot-admin
装置依靠
npm install
建议不要直接运用 cnpm 装置依靠,会有各种怪异的 bug。能够通过如下操作处理 npm 下载速度慢的问题
npm install –registry=registry.npm.taobao.org
发动服务
npm run dev
最后聊两句
【wayn商城】项目我打算出一个实战教育专栏,包含系统规划、本地开发攻略、技术选型、基础设施、模块划分、服务器部署、日志以及监控系统集成等内容。
本项目的方针人群有大学生、初中级开发者、转全栈开发、缺少项目实战经验者,如果你也喜爱能够关注我,我会在后续继续更新。