生鲜商城-单商户（kxmall）开发指南
目录

本地启动部署教程

# 一、准备

本地环境必须要有：

  • ☑️ JDK 1.8
  • ☑️ IntelliJ IDEA
  • ☑️ Git
  • ☑️ Node.js（Vue开发脚手架）
  • ☑️ MySQL服务
  • ☑️ Redis服务
  • ☑️ HBuilderX（小程序/APP开发工具）
  • ☑️ 微信开发者工具

# 辅助工具

  • Navicat（数据库可视化）
  • RedisDesktopManager（Redis可视化）

📥 工具下载：蓝奏云 (opens new window) 密码: fnot

# 服务器推荐

# SQL脚本

开源版本脚本请加QQ群（群文件）：838613833（执行最新全量脚本）
⭐ 先点个星星支持：Gitee仓库 (opens new window)

# 服务器启动

# 1.启动redis服务

# ①修改redis配置文件

img.png

说明：将redis的密码策略打开，将密码设置成redis,供启动服务器使用

# ②启动指定配置文件的redis服务器

新建批处理文件（后缀名.bat）

img.png

生成如图所示图标

img_1.png

# ③启动成功效果-测试连接

启动成功效果图

img_2.png

测试连接效果图

img_3.png

# 2.启动本地mysql服务

数据库使用 mysql 5.7

# ①确认本地mysql服务器启动

使用Navicat工具测试连接

img_4.png

# ②新建数据库、导入群文件脚本

img_5.png img_6.png

说明：选中脚本文件，即可

# 3.导入项目启动服务程序

# ①使用git拉去代码

（路径）https://gitee.com/zhengkaixing/kxmall.git

img_7.png

填入git地址拉去代码。

# ②等待maven下载需要的jar包

# ③IDEA安装lombok插件

img_8.png

说明:项目中使用了省略bean的set get 方法，使用注解@Data形式自动生成。

# ④项目中数据库和redis连接对应上。

# ⑤启动项目

启动成功。(不少同学有问，为什么有红色日志，是不是报错。不是的哈，那是sql的执行日志)

测试连接，验证是否启动成功。 (接口文档)

http://localhost:8585/doc.html

# 三、前端服务器启动

# 推荐大家安装nvm 。是对nodejs的版本控制，非常好用。

提示

推荐大家安装nvm 。是对nodejs的版本控制，非常好用

如果安装nvm。下面的安装步骤就可以省略了。可直接nvm install 指定版本

当前电脑的node和npm版本截图给大家参考一下

# 1.安装nodeJs

# 安装包下载

官网下载https://nodejs.org/en/

# 运行msi文件

我存在E盘下nodejs文件夹下

img_13.png

# 设置nodejs prefix（全局）和cache（缓存）路径

在nodejs安装路径下，新建node_global和node_cache两个文件夹

img_14.png

设置缓存文件夹

进入到Windows dos界面，进入nodejs文件夹目录下。执行下方命令

npm config set cache "E:\nodejs\node_cache"

npm config set prefix "E:\nodejs\node_global"

img_15.png

# 基于 Node.js 安装cnpm（淘宝镜像）

说明：由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue。淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

进入到Windows dos界面，进入nodejs文件夹目录下。执行下方命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

img_16.png

# ⑤ 设置环境变量（非常重要，方便以后使用）

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

1.鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

2.修改系统变量PATH

img_17.png

3.新增系统变量NODE_PATH

img_18.png 温馨提示：

记得点击保存，否则环境变量无法生效。

另外dos界面需要关闭重新开启，全局变量方可生效！

# 2.安装VUE

# 安装vue框架

进入到Windows dos界面，执行下方命令

cnpm install vue -g

img_19.png

# ② 安装vue命令行工具，即vue-cli 脚手架

进入到Windows dos界面，执行下方命令

cnpm install vue-cli -g

img_20.png

# 3.打开项目启动前端服务器程序

# 启动前，建议先安装一下 （idea 安装设置开发vue项目环境）

https://blog.csdn.net/qq_38377190/article/details/106207211

# ①使用idea打开项目

img_21.png

img_22.png

说明:我将前端代码和后端代码都放一起了。你们选中单独选中前端代码即可。

# ②安装vue插件

img_25.png

# ③安装脚手架(如果安装nvm,直接到这里)

执行命令

npm install

img_26.png

# ④启动前端项目

执行命令

npm run dev

img_27.png

效果如下图

提示

package.json 中的脚本 set是Windows下的命令，macOS下要用export

# 四、小程序、APP启动

# 1.配置appId

https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html

访问上方链接，申请测试账号。

img_29.png

获取

img_31.png

# 2.导入项目启动小程序

打开HBuilder导入kxmall-app-ui项目

img_33.png img_34.png

填入上方申请的测试账号。

运行项目

img_35.png

选择微信开发者工具路径

img_36.png

下载微信开发者工具

img_37.png

点击ok，编译报错

img_38.png

下载插件

Less 和 sass 插件

img_39.png

再次启动，又报这个错

img51.png

解决：打开微信开发者工具，选择设置==》安全 将服务端口打开

img52.png

再次启动

微信开发者工具报这个错误。

img_42.png

解决方式

img_43.png

img_44.png

勾选即可。

程序如果出现下面的问题

在hbuilder 的控制台中运行中

要安装 dayjs，请运行以下命令：

npm install dayjs --registry=https://registry.npmmirror.com

# 五、h5启动

# HBuilder 运行 kxmall-app-ui 项目指南

# 操作步骤

  1. 打开项目

    • 启动 HBuilder
    • 导入 kxmall-app-ui 项目
      项目导入界面

  2. 运行项目

    • 点击运行按钮
      运行按钮位置
    • 成功启动后将在本地运行 H5 版本

# 常见问题处理

如果运行时出现以下错误：
运行报错示例

请执行以下命令解决： 解决方案命令

# 六、app打包

打开HBuilder导入kxmall-app-ui项目

先配置好配置项

img_47.png![img](file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml4128\wps54.jpg)

配置app图片

img_48.png

注意：上传一张照片。点击自动生成即可。

img_49.png

即生成apk安装包

介绍
目录结构

← 目录结构→

Theme by Vdoing | Copyright © 2024-2025 zhixing | MIT License