快速搭建前后端分离项目框架
Posted Xin Deng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了快速搭建前后端分离项目框架相关的知识,希望对你有一定的参考价值。
文章目录
前言:归因于学校的工程实践,要求小组完成一个项目,包括项目的开题报告、需求分析、数据库设计、概要设计、原型设计、详细设计、项目编码、功能测试、项目集成。作为组长,我想先为项目搭好整体的框架,包括后端的模块划分、依赖版本统一、技术栈,前端界面布局设计以及整体的一个风格等等。并且团队内开发采用gitee进行版本控制,这样做的好处是方便最后的整合,节省开发时间,并且为以后大家在公司内开发奠定基础,以后可能就是一个人负责一个或几个模块。当然让我自己写一个框架肯定是不行的,我一开始的想法就是使用网上大佬写的开源框架,然后对里面的代码进行修改和删减,“变成”我们自己的。我认为不论是在接外包还是完成学校的一些项目任务,都是可以使用一些开源框架的,比如易优、人人开源等,在修改和改错的过程中也是能学到技巧和知识的。多的不说,我就拿本次实践项目为例子从头开始搭建。
项目设计到vue和Spring Cloud技术,请提前安装Node和nacos
效果展示
选择模板
这次我就选择人人开源作为模板,我会使用到它的renren-fast-vue和renren-fast,其他的大家有兴趣可以点击去看看,特别是renren-generator——代码生成器,自动生成前和后端的代码,除了一般的controller层、service层等一些后端代码,还有对应的vue代码。
测试后端
将renren-fas下载或者git拉取都可,打开项目,导入相关依赖。
根据db文件夹下的文件创建数据库,是mysql就是拿MySQL,其他拿其他。
修改项目配置文件
启动没问题说明后端代码和环境没问题
测试前端
初次打开项目会提示npm install
下载相干依赖,先别点击,先修改package.json
文件中的个别依赖版本号,避免某些依赖因为版本号冲突导不进去。
将原来的dependencies部分用下面的代码替换
"dependencies":
"axios": "0.17.1",
"babel-plugin-component": "0.10.1",
"babel-polyfill": "6.26.0",
"element-ui": "^2.8.2",
"gulp": "4.0.2",
"gulp-concat": "2.6.1",
"gulp-load-plugins": "2.0.5",
"gulp-replace": "1.0.0",
"gulp-shell": "0.8.0",
"lodash": "4.17.5",
"node-sass": "^6.0.0",
"npm": "^6.9.0",
"pubsub-js": "^1.8.0",
"sass-loader": "6.0.6",
"svg-sprite-loader": "3.7.3",
"vue": "2.5.16",
"vue-cookie": "1.1.4",
"vue-router": "3.0.1",
"vuex": "3.0.1"
,
替换完后,再点击npm install
。
只要控制台中没有出现error
,说明依赖全部下载完成,控制台中输入npm run dev
运行
由于我搭建的团队框架中只使用了项目中的菜单管理模块,并且我删除按钮的操作,目录的添加相当于一整个大模块,而菜单则是模块下的各个服务,添加成功后我们只需要在它的项目文件夹view下的modules创建目录(可参照它的项目结构),这符合项目的模块化开发,我觉得这一块对于我们开发vue的开发节省了较多的时间,比较方便,其他功能后面需要可以参照它的后端代码实现,大家根据需求适当删减。
创建后端项目
这是我们组决定的项目以及模块划分,大家可根据自身情况创建。
服务模块划分
-
zuke-data(数据模块)
-
zuke-hotel(酒店模块)
-
zuke-order(订单模块)
-
zuke-product(商品模块)
-
zuke-department(部门模块)
-
zuke-admin(管理员模块)
-
zuke-consumer(消费模块)
-
zuke-monitor(监控模块)
-
zuke-common(存放工具类,公共返回对象,全局异常等相关类和工具包。简言之每一个服务都需要的东西都
放在common里面) -
zuke-gateway(网关)
首先创建一个maven
空项目作为父项目,作为聚合
接着在父项目下创建各个模块(服务),举个例子:
tips:版本号后期可以通过pom进行修改,因为我们项目是分模块开发的,也就是各个服务分开,后端的端口可能很多,所以这里使用到了Spring Cloud相关依赖,如果是单模块(后端只有一个端口),完全不用导入Spring Cloud相关依赖。
整个后端项目结构:
搭建目前我只用到了4个模块:
- common(公共)
- gateway(网关)
- admin(登录)
- system(菜单管理)
也可以像人人开源一样,将登录和菜单管理放在一个模块。大家搭建的时候创建这4个模块即可。
除了gateway模块,其他3个模块里面的内容基本和renren-fast中的差不多,不同的是删除了登录时需要的验证码、用户权限,下面我将改好的部分代码贴出,大家根据结构复制renren-fast中的代码即可。涉及到的数据库表只有sys_admin和sys_menu,可以单独创建一个数据库将这两张表的数据和结构复制到新数据库中
common
存放工具类,公共返回对象,全局异常等相关类和工具包
结构
pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>zuke</artifactId>
<groupId>com.kt.zuke</groupId>
<version>0.0.1-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<description>存放工具类,公共返回对象,全局异常等相关类和工具包</description>
<artifactId>zuke-common</artifactId>
<dependencies>
<!-- Mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>
<!-- lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
<!-- Mysql驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.24</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.75</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.2.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.2.0.Final</version>
</dependency>
<!--服务的注册发现-->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency>
<!--配置中心来做配置管理-->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-alibaba-dependencies</artifactId>
<version>2.1.2.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
</project>
以下皆与renren-fast中对应类或接口相同,大家复制即可。
GlobalException.class
Constant.class
PageUtil.class
Result.class
AddGroup.interface
UpdateGroup.interface
gateway
需要在启动类ZukeGatewayApplication.class中加上@EnableDiscoveryClient注解
结构:
pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.12.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.cuit.zuke</groupId>
<artifactId>zuke-gateway</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>zuke-gateway</name>
<description>API网关</description>
<properties>
<java.version>1.8</java.version>
<spring-cloud.version>Hoxton.SR12</spring-cloud.version>
</properties>
<dependencies>
<dependency>
<groupId>com.kt.emall</groupId>
<artifactId>emall-common</artifactId>
<version>0.0.1-SNAPSHOT</version>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</exclusion>
<exclusion>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-gateway</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>$spring-cloud.version</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
CrosConfig
/**
* @program: zuke
* @description: 解决跨域
* @author: KamTang
* @create: 2022-04-02 09:03
**/
@Configuration
public class CorsConfig
@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);
application
server:
port: 9000
spring:
application:
name: zuke-gateway
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848
gateway:
routes:
- id: zuke-system
uri: lb://zuke-system
predicates:
- Path=/zukeApi/sys/**
filters:
- RewritePath=/zukeApi/(?<segment>.*),/$\\segment
- id: zuke-admin
# lb 负载均衡到zuke-admin服务
uri: lb://zuke-admin
# 断言规则
predicates:
- Path=/zukeApi/admin/**
filters:
- RewritePath=/zukeApi/(?<segment>.*),/$\\segment
admin
需要在启动类ZukeAdminApplication.class中加上@EnableDiscoveryClient注解开启服务注册功能,将服务注册到注册中心
结构:
AdminController
/**
* @program: zuke
* @description: 管理员
* @author: KamTang
* @create: 2022-04-01 18:46
**/
@RestController
@RequestMapping("/admin")
public class AdminController extends AbstractController
@Autowired
AdminService adminService;
@GetMapping("/list")
public Result list (@RequestParam Map<String, Object> params)
return Result.ok().put("page", adminService.queryPage(params));
/**
* 获取登录的用户信息
*/
@GetMapping("/info")
public Result info()
return Result.ok().put("user", getAdmin());
LoginController
/**
* @program: zuke
* @description: 登录
* @author: KamTang
* @create: 2022-04-01 19:29
**/
@RestController
@RequestMapping("/admin")
public class LoginController
@Autowired
private AdminService adminService;
@Autowired
private TokenService tokenService;
/**
* 登录
*/
@PostMapping("/login")
public Map<String, Object> login(@RequestBody LoginVO loginVO)
//用户信息
AdminEntity admin = adminService.queryByUserName(loginVO.getUsername());
//账号不存在、密码错误
if(admin == null || !admin.getPassword().equals(new Sha256Hash(loginVO.getPassword(), admin.getSalt()).
前后端分离项目快速搭建【后端篇】
数据库准备
data_test.sql:
/*
SQLyog Enterprise v12.08 (64 bit)
MySQL - 5.7.31 : Database - data_test
*********************************************************************
*/
/*!40101 SET NAMES utf8 */;
/*!40101 SET SQL_MODE=''*/;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`data_test` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `data_test`;
/*Table structure for table `user` */
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(50) CHARACTER SET utf8 NOT NULL COMMENT '账号',
`password` varchar(50) CHARACTER SET utf8 NOT NULL COMMENT '密码',
`user_state` varchar(10) CHARACTER SET utf8 NOT NULL DEFAULT '1' COMMENT '状态,逻辑删除',
PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;
/*Data for the table `user` */
LOCK TABLES `user` WRITE;
insert into `user`(`user_id`,`user_name`,`password`,`user_state`) values (1,'keafmd','keafmd','1'),(3,'21312321','123','0'),(11,'213','213','1'),(12,'keafmd','666','0');
UNLOCK TABLES;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
后端搭建
1、快速创建个SpringBoot项目
第一步:Spring Initializr
第二步:Spring Initializr Project Settings
第三步:添加个Lombok工具
第四步:Finish
初始化的样子:
2、引入依赖
此处贴上整个pom.xml,部分依赖可能对于简单需求而言是多余的,可以自行舍弃。
pom.xml代码:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.4.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.keafmd</groupId>
<artifactId>springboot-server</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-server</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>20.0</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.3.2</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
<version>2.3.31</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.github.yedaxia</groupId>
<artifactId>japidocs</artifactId>
<version>1.4.3</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.73</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-beanutils/commons-beanutils -->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.9.4</version>
</dependency>
<!-- 解密程序 https://mvnrepository.com/artifact/org.bouncycastle/bcprov-jdk15on -->
<dependency>
<groupId>org.bouncycastle</groupId>
<artifactId>bcprov-jdk15on</artifactId>
<version>1.68</version>
</dependency>
<!--JWT 依赖 -->
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>3.4.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
3、编写代码快速生成代码
因为此代码为辅助代码,放在test包下即可,相关的数据库信息以及包信息需要和你们自己的保持一致,自行修改,如何包命名和我一致,只需要修改数据库相关信息即可。
CodeGenerator:
package com.keafmd.mp;
import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;
/**
* Keafmd
*
* @ClassName: CodeGenerator
* @Description: 代码生成器
* @author: 牛哄哄的柯南
* @Date: 2021-04-29 17:06
* @Blog: https://keafmd.blog.csdn.net/
*/
public class CodeGenerator {
/**
* <p>
* 读取控制台内容
* </p>
*/
public static String scanner(String tip) {
Scanner scanner = new Scanner(System.in);
StringBuilder help = new StringBuilder();
help.append("请输入" + tip + ":");
System.out.println(help.toString());
if (scanner.hasNext()) {
String ipt = scanner.next();
if (StringUtils.isNotBlank(ipt)) {
return ipt;
}
}
throw new MybatisPlusException("请输入正确的" + tip + "!");
}
public static void main(String[] args) {
// 代码生成器
AutoGenerator mpg = new AutoGenerator();
// 全局配置
GlobalConfig gc = new GlobalConfig();
String projectPath = System.getProperty("user.dir");
// System.out.println("projectPath = " + projectPath);
gc.setOutputDir(projectPath + "/src/main/java");
// gc.setOutputDir("D:\\\\test");
gc.setAuthor("关注公众号:牛哄哄的柯南");
gc.setOpen(false);
// gc.setSwagger2(true); 实体属性 Swagger2 注解
gc.setServiceName("%sService");
mpg.setGlobalConfig(gc);
// 数据源配置
DataSourceConfig dsc = new DataSourceConfig();
dsc.setUrl("jdbc:mysql://127.0.0.1:3306/data_test?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=UTC");
// dsc.setSchemaName("public");
dsc.setDriverName("com.mysql.jdbc.Driver");
dsc.setUsername("root");
dsc.setPassword("18044229");
mpg.setDataSource(dsc);
// 包配置
PackageConfig pc = new PackageConfig();
pc.setModuleName(null);
pc.setParent("com.keafmd");
mpg.setPackageInfo(pc);
// 自定义配置
InjectionConfig cfg = new InjectionConfig() {
@Override
public void initMap() {
// to do nothing
}
};
// 如果模板引擎是 freemarker
String templatePath = "/templates/mapper.xml.ftl";
// 如果模板引擎是 velocity
// String templatePath = "/templates/mapper.xml.vm";
// 自定义输出配置
List<FileOutConfig> focList = new ArrayList<>();
// 自定义配置会被优先输出
focList.add(new FileOutConfig(templatePath) {
@Override
public String outputFile(TableInfo tableInfo) {
// 自定义输出文件名 , 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化!!
return projectPath + "/src/main/resources/com/keafmd/mapper/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
}
});
cfg.setFileOutConfigList(focList);
mpg.setCfg(cfg);
// 配置模板
TemplateConfig templateConfig = new TemplateConfig();
templateConfig.setXml(null);
mpg.setTemplate(templateConfig);
// 策略配置
StrategyConfig strategy = new StrategyConfig();
strategy.setNaming(NamingStrategy.underline_to_camel);
strategy.setColumnNaming(NamingStrategy.underline_to_camel);
strategy.setEntityLombokModel(true);
strategy.setRestControllerStyle(true);
strategy.setInclude(scanner("表名,多个英文逗号分割").split(","));
strategy.setControllerMappingHyphenStyle(true);
strategy.setTablePrefix("m_");
mpg.SpringBoot+Vue+AntDesign搭建的前后端分离后台管理系统