后端项目搭建

克隆远程仓库项目

新建仓库

在 github 上新建一个仓库,生成.gitignore文件。

克隆项目

在 idea 中新建项目:

  • file -> new -> project from version control
  • 在 idea 中输入仓库地址

配置 .gitignore

### IntelliJ IDEA ###
.idea
**/mvnw
**/mvnw.cmd
**/.gitignore
**/.mvn
**/target/

创建微服务模块

  1. 在项目中用 springboot 分别创建各个项目模块(商品模块,优惠券模块,会员模块,订单模块,仓库模块)。
模块 描述
electricity-coupon 优惠券模块
electricity-member 会员模块
electricity-order 订单模块
electricity-product 商品模块
electricity-ware 仓库模块
  1. 聚合模块

在项目根目录下新建一个pom.xml文件,将各个模块聚合在一起。

<groupId>com.laughing.electricity</groupId>
<artifactId>electricity</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>electricity</name>
<description>聚合服务</description>
<packaging>pom</packaging>
<modules>
<module>electricity-coupon</module>
<module>electricity-member</module>
<module>electricity-order</module>
<module>electricity-product</module>
<module>electricity-ware</module>
</modules>

创建数据库

  1. 在 docker 中安装的数据库中创建数据库。
数据库 描述
electricity_oms 订单数据库
electricity_pms 商品数据库
electricity_sms 优惠券数据库
electricity_ums 会员数据库
electricity_wms 仓库数据库
  1. 生成各个数据库的表

根据 sql 文件生成各个数据库的表。

搭建后台管理系统

下载开源脚手架

在码云上下载人人开源的renren-fast后台管理系统脚手架。

git clone git@gitee.com:renrenio/renren-fast.git

配置脚手架

将下载的工程导入到项目的根目录,然后聚合到项目中,更新 maven,下载项目中的依赖。

<modules>
<module>renren-fast</module>
</modules>

创建数据库

根据renren-fast项目下的 sql 文件创建数据库,并修改 application-dev.yml 文件中的数据库连接信息 。

验证项目配置

项目配置完成后,在RenrenApplication类上点击运行项目。如果项目运行时报错,缺少 jar 包,就将缺少的包导入到项目中。

项目启动成功后,在浏览器访问:

http://localhost:8080/renren-fast/

返回结果是 401 则表明后台部分搭建成功,这里返回 401 是因为这个脚手架是前后端分离的,需要再搭建前端才能正确的访问项目。

前端项目搭建

下载开源脚手架

在码云上下载人人开源的renren-fast-vue后台管理系统脚手架。

git clone git@gitee.com:renrenio/renren-fast-vue.git

安装配置 node.js

下载安装node.js,然后设置 npm 国内镜像。

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

npm config set registry "https://registry.npm.taobao.org"

下载项目依赖的插件

以管理员身份打开 vscode, 然后再打开项目,在 vscode 控制台输入npm install安装插件。

npm install

安装 nvm 管理 node

上面的方法或者其他方法无法安装成功,可能是 node 版本过高的问题。如果安装的 node.js 版本过高,可以降低 node.js 的版本再试试。

通过nvm工具可以管理 node 的版本。

  • 下载安装 nvm
https://github.com/coreybutler/nvm-windows/releases
  • 管理 node 版本
# 查看当前系统已安装的 node 版本
nvm list

# 安装 10.16.3 版本的 node
nvm install v10.16.3

# 使用 12.18.0 版本的 node
nvm use v12.18.0

# 查看所有命令
nvm -h
  • 安装 npm

安装多个版本时,npm 不会自动安装。所以需要手动安装 node 对应版本的 npm。

淘宝镜像下载 npm,然后解压到 node 目录下的 node_modules文件夹,把 bin 目录下的文件复制到这个版本 node 的根目录。

或者可以不用 nvm 安装不同版本的 node,直接去node 官网下载 node,解压后复制到 nvm 根目录,把 node 目录名改成 v 加版本号,例如:v12.18.0

  • 启动前端项目
npm run dev

启动后前端登录页面如果没有验证码,需要注意几点:

  1. 先启动后端renren-fast项目,再启动前端renren-fase-vue项目;
  2. 修改/static/config/index.js目录文件中 window.SITE_CONFIG['baseUrl'] = '本地api接口请求地址';
  3. 修改/config/dev.env.js目录文件中OPEN_PROXY: true开启代理;
  4. 修改/config/index.js目录文件中proxyTable对象target: '代理api接口请求地址',填本机renren-fast地址;
  5. 如果 springboot 版本较高,需要将CorsConfig类中的.allowedOrigins替换成.allowedOriginPatterns

逆向工程

下载开源脚手架

在码云上下载人人开源的renren-fast-generator后台管理系统脚手架。

配置脚手架

  • 将下载的工程导入到项目的根目录,然后聚合到项目中,更新 maven,下载项目中的依赖。
<modules>
<module>renren-fast-generator</module>
</modules>
  • resources/template目录下的Controller.java.vm文件中 shiro 相关的注解注释掉,后面用 spring security
// 相关的注解注释掉
//@RequiresPermissions("${moduleName}:${pathName}:info")
  • 新建 electricity-common 模块

新建 electricity-common 模块,在 pom 文件中导入 mybatis-plus 和 lombok 的 maven 依赖。

<dependencies>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3.1</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
</dependencies>

生成逆向工程

  • 配置逆向工程信息

将配置文件application.ymlgenerator.properties中的数据库和包名等信息修改成要生成逆向工程要的模块数据库和包名。

  • 生成逆向工程代码

启动 renren-fast-generator 模块,打开前端页面,点击生成代码。代码生成后,将生成的代码复制到对应的模块包下面。生成的文件中会提示缺少引用的类(PageUtils,Query,R,Constant,HTMLFilter,SQLFilter),从 renren-fast 模块中直接复制到 electricity-common模块,并导入相关 maven 依赖。

<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpcore</artifactId>
<version>4.4.14</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.17</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>

CRUD 测试

逆向工程配置完成后,通过增删改查来验证下是否配置正确。

  • 导入 mybatis-plus 依赖

上面的步骤中已经导入过了。

  • 配置 mysql 数据驱动信息

mysql 的依赖上面也导入过了,只需要在 application.yml 文件中配置连接 mysql 的数据源信息。

spring:
datasource:
username: root
password: root
url: jdbc:mysql://192.168.56.101:3306/electricity_pms
driver-class-name: com.mysql.jdbc.Driver
  • 配置扫描 dao 类

在启动类上添加扫描 dao 相关类的扫描注解

@MapperScan("com.laughing.electricity.product.dao")
  • 配置 mybatis-plus 文件扫描

在 application.yml 中配置 mybatis-plus mapper 扫描

mybatis-plus:
mapper-locations: classpath*:/mapper/**/*.xml
global-config:
db-config:
id-type: auto
  • 测试

在测试类中编写数据库增删改查操作

@SpringBootTest
class ElectricityProductApplicationTests {
@Autowired
BrandService brandService;

@Test
void contextLoads() {
BrandEntity brandEntity = new BrandEntity();
brandEntity.setName("斯伯丁");
brandService.save(brandEntity);

brandEntity.setBrandId(1L);
brandEntity.setDescript("NBA比赛专用篮球");
brandService.updateById(brandEntity);
List<BrandEntity> list = brandService.list(new QueryWrapper<BrandEntity>().eq("name", "斯伯丁"));
list.forEach(System.out::println);
}

}

测试通过后,剩下的几个模块按照上面的步骤,生成逆向工程代码即可。