Mall3s快速开发平台

快速启动 #

目标：使用 vs 2019 工具，将单机版开发环境运行起来。

整个过程非常简单，预计 1h内就可以完成，取决于大家的网速。

1. 开发工具安装 #

友情提示：若您还未安装开发工具，请参考以下教程依次安装：

  1. Sourcetree是git项目代码管理工具，强烈推荐您使用。
  2. HeidiSQL是一个免费的数据库管理工具，推荐您使用。
  3. 其他开发工具都需要用到。
工具 说明 是否必须 版本 地址
Visual Studio Code 用于前端开发web编辑器 是 安装教程 (opens new window)
Visual Studio 2019 c#开发编程工具 是 安装教程 (opens new window)
Node.js 前端编辑器 是 >=v16.13.1 安装教程 (opens new window)
git git代码管理工具 是 安装教程 (opens new window)
sourcetree git flow管理工具 否 安装教程 (opens new window)
HeidiSQL heidisql是一个免费sql管理工具 否 安装教程 (opens new window)
HBuilderX 用于移动端前端开发编辑器 否 安装教程 (opens new window)

2. 克隆代码 #

使用SourceTree克隆我们的代码仓库代码，您也可以使用其他git工具。我们的代码仓库地址：代码仓库

友情提示：如果您不知道SourceTree怎么使用，请前往:代码仓库

分别克隆前端项目、后端项目、微服务环境仓库项目，克隆完成后，分别做好git工作流分支初始化（develop分支和master分支）。

image-20230227222540369

友情提示：若您还不清楚项目结构以及项目的每个模块的作用，可见《项目结构》文档。

3. 基础设施（必选) #

本小节的基础设施【必须】安装，否则项目无法启动。我们推荐您使用云服务器来建设，尽量开发环境最小化依赖，即使部署单机版项目也采用dev+ops来指导开发。

首先，您需要买一台云服务器用于容器化部署以及一台mysql数据库。如果您不清楚具体需要如何搭建基础设置可参考：

3.1 购买服务器及数据库 #

具体购买教程及账户初始化设置过程请参考以下文档：

  1. 服务器购买及初始化

  2. 数据库购买及初始化

3.2 腾讯云持续集成 #

我们需要借助于腾讯云k8s来完成项目绑定及持续集成，首先，您需要搭建gitlab代码仓库，请参考《gitlab代码仓库搭建》,您也可以绑定您的gitee或者github来完成代码托管及持续集成。

具体教程请参考《腾讯云镜像服务绑定gitlab代码仓库》

3.3 初始化Nacos #

项目使用 Nacos 作为注册中心和配置中心，在单机版中，我们主要用nacos来作为配置中心使用，我们建议您搭建外网环境用于开发调试，本地无需搭建nacos，参考 《nacos安装部署》文章进行安装。

安装完成之后，需要创建 dev，test,pro三个 命名空间,分别代表开发环境、测试环境、生产环境，您也可以通过我们提供的nacos mysql脚本来初始化。具体教程已经在 《nacos安装部署》有所讲述。

如下图所示：

image-20230224010840000

Nacos 拓展学习资料：

3.4 初始化 MySQL #

友情提示？如果你是 PostgreSQL、Oracle、SQL Server 等其它数据库，也是可以的。

作者主要技术栈使用MySQL 居多，项目使用 MySQL 存储数据，所以需要启动一个 MySQL 服务，建议使用 5.7 版本。

  1. 创建一个名字为mall3s_system_test 数据库，执行对应数据库类型的Mall3s.Cloud · GitLab (opens new window)目录下的 SQL 文件，进行初始化。

对于mysql命名规范及项目规范，建议您参考《mall3s项目规范》。

  1. 新建数据库名称mall3s,密码为：xxxxx。

  2. 在《nacos教程中》我们创建了数据库nacos_config数据库。然后我们就在线上环境中修改数据库链接。

    打开nacos-》配置列表-》dev-》netcore-datasource.json配置文件，将数据库链接配置修改您的外网数据库地址。

    "ConnectionStrings": {
        "ConfigId": "mall3s_system",
        "DBName": "mall3s_system_test",
        "DBType": "MySql",
        "DefaultConnection": "server=xxxxxxx;port=20597;uid=mall3s;pwd=xxxxx;database={0}"
},

    注意：nacos不允许写注释。

    如下图所示：

    image-20230227231739309

3.5 初始化 Redis #

项目使用 Redis 缓存数据，所以需要启动一个 Redis 服务,我们建议您搭建外网环境用于开发调试，本地无需搭建redis。

一定要使用 5.0 以上的版本，项目使用 Redis Stream 作为消息队列。

不会安装的同学，建议您参考《《redis安装部署》》。

我们同样需要在nacos中配置公共redis地址，我们就在线上环境中修改redis链接。

打开nacos-》配置列表-》dev-》netcore-datasource.json配置文件，将redis链接配置修改您部署的地址。

"Cache": {
        "CacheType": "RedisCache",
        "RedisConnectionString": "xxxxx:30379,defaultDatabase=9",
        "IsSentinel": false
    },

注意：nacos不允许写注释。这里仅仅演示，实际上您的开发环境建议您强制要求密码验证，生产环境走内网。

如下图所示：

image-20230227231739309

  • https://github.com/YunaiV/SpringBoot-Labs/tree/master/labx-01-spring-cloud-alibaba-nacos-discovery)

4. 基础设施（可选） #

本小节的基础设施【可选】安装，不影响项目的启动，可在项目启动后再安装。

其他微服务中间件主要用于微服务部署，单机版为可选项。您可以自行探索或者参考我们《微服务版本搭建教程》，参考教程如下：

微服务：开发环境 | Mall3s快速开发平台 (opens new window)

5. 启动后端项目 #

5.1 安装SDK #

下载安装微软官方SDK，代码地址：https://dotnet.microsoft.com/download

5.2 打开项目 #

使用Visual Studio 2019打开 Mall3s.Server.sln

5.3 修改配置 #

在 ASP.NET Core 应用程序启动时默认加载appsettings.json作为应用配置。同时还支持不同的运行环境加载对应的配置文件，如：

  • 开发环境Development对应 appsettings.Development.json
  • 测试环境Development对应 appsettings.Testing.json
  • 部署环境Production对应 appsettings.Production.json

注意：我们主要通过配置中心nacos来读取，因此本地只有一个配置，连接nacos的地址，您只需要检查本地的设置是否为nacos地址，其他无需任何改动。

您主要需要修改2个地方：

  1. appsettings.Development.json修改nacosconfig地址，改为开发环境地址。
  2. appsettings.json 修改nacos的账户密码，nacos注册的服务名即可。

开发环境配置：

image-20230227232926660

公共配置说明：

image-20230227233213112

5.5 编译运行 #

使用visualstudio生成解决方案。 注：首次启动时，visual studio会启动nuget还原第三方依赖包，请保持网络通畅，并等待一段时间

启动Mall3s.WebApi.System项目即可。

5.6 启动 Mall3s.WebApi.System 服务 #

启动成功后，您可以看到swagger 的api文档以及控制台的日志信息。

image-20230227233552032

5.7 启动 Mall3s.WebApi.Tenant 服务 #

Tenant主要用于租户管理，当您需要提供多个租户，需要启动租户管理API接口，您可以看到swagger 的api文档以及控制台的日志信息。

该接口专门用于租户管理以及为租户创建单独的数据库。

image-20230307220006123

6. 启动前端 Vue2 管理后台 #

Mall3s.Server.Web是管理后台的前端项目。

① 使用 sourcetree克隆 mall3s-group / Mall3s.Server.Web · GitLab (opens new window)仓库的最新代码。

友情提示？

微服务项目，和单体项目，使用同一套前端代码，所以前端统一放在mall3s-group / Mall3s.Server.Web · GitLab (opens new window)目录下，都是兼容的噢！

② 在 mall3s.web 目录下，执行如下命令，进行启动：

# mall3s-web 
## 环境要求
- Node.js 最新版本
- git
## 使用说明
### 安装依赖
```bash
npm i
# 如果下载速度比较慢，可通过以下方式解决
npm i --registry=https://registry.npm.taobao.org
```
### 开发环境
- 打开`src/defaultProxyTable.js`,修改接口地址
```bash
  // 开发环境接口配置
   '/gateway': {
     target: 'http://localhost:5000',  //改成您本地端口
     changeOrigin: true,
     pathRewrite: {
     '^/gateway/system': ''
     }
   }
```
- 运行前端项目(默认会自动打开浏览器)
```bash
npm run dev
```

### 测试生产发布
```bash
# 构建测试环境,对应.env.staging文件配置
npm run build:staging

# 构建生产环境，对应.env.production文件配置
npm run build
```

image-20230227234404986

友情提示：可能胖友本地没有安装 Node.js 的环境，导致报错。可以参考如下文档安装：

注意，Node 请使用 16 的版本！！！

③ 启动完成后，浏览器会自动打开 http://localhost:3000 (opens new window) (opens new window)地址，可以看到前端界面。

image-20230227234542992

默认密码为：admin/123456

image-20230227234636144

7、启动租户管理项目 #

Mall3s.Tenant.Web是管理后台的前端项目。

① 使用 sourcetree克隆http://110.41.156.31/mall3s-group/mall3s.tenant.git仓库的最新代码。

友情提示？

微服务项目，和单体项目，使用同一套前端代码，所以前端统一放在http://110.41.156.31/mall3s-group/mall3s.tenant.git (opens new window)目录下，都是兼容的噢！

② 在 mall3s.web 目录下，执行如下命令，进行启动：

# mall3s-web-tenant(多租户前端)

## 环境要求

- Yarn(需先安装`Node.js`)

## 使用说明
### 安装依赖
```bash
yarn
```
### 开发环境

- 打开`src/utils/define.js`,修改接口地址

```bash

  // 开发环境接口配置
  const APIURl = 'http://localhost:32204'

```
- 运行前端项目
```bash
yarn dev
```

### 测试生产发布
```bash
# 构建测试环境
yarn build:staging

# 构建生产环境
yarn build
```

image-20230307221408435

友情提示：可能胖友本地没有安装 Node.js 的环境，导致报错。可以参考如下文档安装：

注意，Node 请使用 16 的版本！！！

③ 启动完成后，浏览器会自动打开 http://localhost:3000 (opens new window) (opens new window)地址，可以看到前端界面。

image-20230307221650410

默认密码为：admin/123456

image-20230307221714490

8. 启动前端 uni-app 管理后台 #

[mall3s.app.web 是前端 uni-app 项目,使用sourcetree克隆代码仓库mall3s-group / Mall3s.App.Web · GitLab (opens new window)。

① 下载 HBuilder (opens new window) (opens new window)工具，并进行安装。

② 点击 HBuilder 的 [文件 -> 导入 -> 从本地项目导入...] 菜单，选择项目的 mall3s.app.web 目录

③ 执行如下命令，安装 npm 依赖：

# 进入项目目录
cd Mall3s.App.Web

# 安装 npm 依赖
npm i

④ 点击 HBuilder 的 [运行 -> 运行到内置浏览器] 菜单，使用 H5 的方式运行。成功后，界面如下图所示：

image-20230227235049118

若您提示页面端口号错误，请检查utils/define.js目录中本地环境api地址是否有误！

若您遇到前端项目跨域问题以下错误：

Access to XMLHttpRequest at 'http://localhost:5000/api/oauth/Login?client_id=admin&client_secret=123456&scope=all&grant_type=password' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

8.1 本地启动项目跨域报错 #

该问题主要因为跨域产生，我们可以直接打开nacos，并在dev环境变量中找到“netcore-oauth.json”,在“CorsAccessorSettings”节点的“WithOrigins”中添加您本地的环境端口即可。请参考如下截图

image-20230227235536814

666. 彩蛋 #

至此，我们已经完成了项目mall3s单体项目的启动。

您可以根据自己的兴趣，阅读相关源码。

后面作者会会花大量的时间，继续优化这个项目。同时，输出与项目匹配的技术博客，方便更好的学习与理解。

后端基础入门