前后端分离部署架构 前后端分离架构设计

目录

---

前言

一、后端项目

1、系统架构设计

2、技术细节

1）、构建模块分层

2）、模块之间引用

3）、mybatis-plus配置和引入

4）、mybatis-plus分页插件

5）、代码生成器，代码里有注释

6）、shiro框架引入

二、前端项目

1、系统架构设计

2、技术细节

---

前言

根据公司要求，搭建个前后端分离的权限系统，根据目前技术技术水平，采用以下技术栈开发，以此写一份博客记录下构架的系统框架，同时希望能帮助因搭建系统架构不怎么会的小伙伴们，废话不多说，直接列出技术栈：

前端项目: Vue2.x+element全家桶+webpack+node+vue-admin ，开发工具：HBuilderx                      

 

                                                                  

后端项目 :Springboot2.x+shiro+mybatis-plus+mysql, 开发工具：IDEA

一、后端项目

1、系统架构设计

采用主流分层多模块开发，如下图所示

2、技术细节

1）、构建模块分层

App(app请求接口全部在这里)，Web(web请求接口全部在这里)、Dao(数据层)、Model（抽象数据层）、Service（业务层）、Common（所有通用工具在这里，任何模块接口访问）

2）、模块之间引用

如下图所示：

3）、mybatis-plus配置和引入

Model模块引入maven,然后再web模块resources资源文件下的application.yml文件

spring:
  # 环境 dev:开发环境|test:测试环境|prod:生产环境
  profiles:
    active: dev #激活的配置文件
mybatis-plus:
  global-config:
    db-config:
      id-type: auto
      field-strategy: not_empty
      table-underline: true
      db-type: mysql
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
  mapper-locations: classpath*:mapper/*Mapper.xml
  #实体扫描，多个package用逗号或者分号分隔
  typeAliasesPackage: com.xxhj.dao
server:
  port: 8798

然后在生产环境和开发环境配置如下（IP、用户名和密码非真实）

spring:
  datasource:
    url: jdbc:mysql://103.205.39.182:3306/xxhjj_new?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&serverTimezone=Asia/Shanghai
    username: root
    password: xiaoxi()2109

Model模块pom文件配置如下

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.0.7.1</version>
</dependency>
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.0.7</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.11</version>
</dependency>

<!-- beetl 模板引擎 -->
<dependency>
    <groupId>com.ibeetl</groupId>
    <artifactId>beetl</artifactId>
    <version>2.9.8</version>
</dependency>

4）、mybatis-plus分页插件

@EnableTransactionManagement
@Configuration
@MapperScan("com.xxhj.dao")
public class MybatisPlusConfig {
    private final static Logger logger = LoggerFactory.getLogger(MybatisPlusConfig.class);

    /**
     * @description: 配置分页插件
     *
     * @author: gradual
     * @date: 2019/1/15 10:17
     * @param: []
     * @return: com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        logger.debug("注册分页插件");
        return new PaginationInterceptor();
    }

    /**
     * @description: SQL执行效率插件
     *
     * @author: gradual
     * @date: 20-12-229 下午8:59
     * @param: []
     * @return: com.baomidou.mybatisplus.extension.plugins.PerformanceInterceptor
     */
    @Bean
    @Profile({"test"})// 设置 dev test 环境开启
    public PerformanceInterceptor performanceInterceptor() {
        return new PerformanceInterceptor();
    }

    /**
     * 逻辑删除用，3.1.1之后的版本可不需要配置该bean，但项目这里用的是3.1.0的
     *
     * @author Guo Cheng
     *
     * @return com.baomidou.mybatisplus.core.injector.ISqlInjector
     */
    @Bean
    public ISqlInjector sqlInjector() {
        return new LogicSqlInjector();
    }

}

5）、代码生成器，代码里有注释

/**
 * MyBatis-plus 代码生成器
 */
@Configuration
public class CodeGenerator {
    public static boolean isTable = false;//true指定表名，false查询所有表
    // 数据库连接配置
    private static final String DB_URL = "jdbc:mysql://103.205.39.182:3306/xxhjj_new";
    private static final String DB_USERNAME = "root";
    private static final String DB_PASSWORD = "xiaoxi()2109";
    private static final String PACKAGE_NAME = "com.xxhj.dao";

    public static void main(String[] args) {
        System.out.println(System.getProperty("user.dir"));
        generateByTables(false, PACKAGE_NAME);
    }

    public static void generateByTables(boolean serviceNameStartWithI, String packageName) {
        AutoGenerator mpg = new AutoGenerator();  // 代码生成器
        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir(projectPath + "/Dao/src/main/java");
        //gc.setOutputDir(OUTPUT_DIR);  // 输出位置
        gc.setFileOverride(false);  // 覆盖文件
        gc.setAuthor("");
        gc.setOpen(true);
        // service 命名方式
        gc.setServiceName("%sService");
        // service impl 命名方式
        gc.setServiceImplName("%sServiceImpl");
        // 自定义文件命名，注意 %s 会自动填充表实体属性！
        gc.setMapperName("%sMapper");
        gc.setXmlName("%sMapper");
        gc.setFileOverride(true);
        gc.setActiveRecord(true);
        //不覆盖之前的代码
        gc.setFileOverride(false);
        // XML 二级缓存
        gc.setEnableCache(false);
        // XML ResultMap
        gc.setBaseResultMap(true);
        // XML columList
        gc.setBaseColumnList(false);
        mpg.setGlobalConfig(gc);

        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl(DB_URL);
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername(DB_USERNAME);
        dsc.setPassword(DB_PASSWORD);
        mpg.setDataSource(dsc);
        // 包配置
        PackageConfig pc = new PackageConfig();
        pc.setParent(packageName);
        pc.setMapper("mapper");
        pc.setXml("mapper/xml/");
        pc.setController("controller");
        pc.setEntity("model");
        mpg.setPackageInfo(pc);

        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setCapitalMode(true);  // 大写命名
        strategy.setEntityLombokModel(false); // lombok模型
        strategy.setColumnNaming(NamingStrategy.underline_to_camel); // 表名映射策略
        strategy.setNaming(NamingStrategy.underline_to_camel);  // 字段映射策略
        //strategy.setTablePrefix(TB_PREFIX);  // 表前缀
        if (isTable)
            strategy.setInclude(scanner("请输入表名，多个用英文逗号分割").split(","));
        mpg.setStrategy(strategy);

        // 模板引擎
        mpg.setTemplateEngine(new BeetlTemplateEngine());
        try {
            mpg.execute();
        } catch (Exception e) {

        }
    }

    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.isNotEmpty(ipt)) {
                scanner.close();
                return ipt;
            }
        }
        throw new MybatisPlusException("请输入正确的" + tip + "！");
    }
}

6）、shiro框架引入

在Common模块，引入shiro，如下图所示

<dependency>
    <groupId>org.apache.shiro</groupId>
    <artifactId>shiro-spring</artifactId>
    <version>1.5.3</version>
</dependency>

在这里面，Web模块配置shiro,主要用到三个类，

AjaxPermissionsAuthorizationFilter（过滤器）、ShiroConfiguration（配置）、UserRealm（权限验证），在这里面建议小伙伴们先了解下2篇文章:(shiro注解权限控制、UserRealm类重写isPermitted)

二、前端项目

1、系统架构设计

安装vue-admin框架，element-ui,如下图所示

2、技术细节

时间有限，后续再更新（本月末会把前端更新出来）