Springboot+shiro+mybatis-plus+vue前后端分离项目架构设计

5 篇文章 0 订阅
3 篇文章 0 订阅

目录


前言

一、后端项目

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、技术细节

时间有限,后续再更新(本月末会把前端更新出来)

  • 14
    点赞
  • 90
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
### 回答1: Spring Boot Vue系统架构图包括以下组件: 1. 前端Vue框架:Vue.js是一款轻量级的JavaScript框架,用于构建用户界面。它提供了一些基本的组件和API,使开发人员可以快速构建交互式的Web应用程序。 2. 后端Spring Boot框架:Spring Boot是一个基于Spring框架的快速开发Web应用程序的框架。它提供了一些基本的组件和API,使开发人员可以快速构建高效的Web应用程序。 3. 数据库:系统需要使用数据库来存储数据。常见的数据库包括MySQL、Oracle、PostgreSQL等。 4. RESTful API:系统需要提供RESTful API接口,用于前端和后端之间的数据交互。RESTful API是一种基于HTTP协议的API设计风格,它使用HTTP方法(GET、POST、PUT、DELETE等)来操作资源。 5. 前端组件库:系统需要使用一些前端组件库来构建用户界面。常见的前端组件库包括Element UI、Ant Design、Bootstrap等。 6. 服务器:系统需要部署在服务器上,常见的服务器包括Tomcat、Jetty、Nginx等。 以上是Spring Boot Vue系统架构图的主要组件。在实际开发中,还需要考虑安全性、性能优化、日志记录等方面的问题。 ### 回答2: Spring Boot是一款用于构建Java Web应用程序的框架。它使用约定大于配置的理念来简化应用程序的开发并提高开发效率。Vue.js是一款流行的JavaScript前端框架,用于构建交互式Web用户界面。Spring Boot和Vue.js的结合可以构建出高效的Web系统。 系统架构图包括前端、后端、中间层和数据层。前端部分由Vue.js框架实现,实现页面渲染和用户交互。后端部分通过Spring Boot框架实现,提供服务接口和逻辑实现。中间层连接前后端,完成数据传递和逻辑控制。数据层负责数据存储和访问。 具体来说,前端部分主要包括Vue.js框架、Vue Router、Vuex、Axios等组件。Vue.js框架实现了MVVM架构,通过数据绑定、组件化和异步更新等特性,实现了高效的前端页面渲染和用户交互。Vue Router实现了前端路由控制,使得每个页面都对应一个固定的URL地址。Vuex实现了前端状态管理,方便了组件之间的数据传递和共享。Axios实现了前后端数据交互,支持HTTP请求和响应等操作。 后端部分主要包括Spring Boot框架、Spring MVC、Spring Security等组件。Spring Boot框架实现了应用程序的构建和运行,支持自动配置、约定大于配置等机制。Spring MVC实现了服务接口的管理和请求响应处理,支持RESTful风格的接口开发。Spring Security实现了安全管理,提供了登录认证、权限控制等功能。 中间层主要包括跨域请求封装和数据转换。跨域请求封装解决了前后端跨域访问的问题,保证了应用程序的安全性。数据转换实现了前后端数据格式的统一和转换,使得前后端数据互通。 数据层主要包括数据库和mybatis等组件。数据库负责数据存储和管理,支持主从复制、读写分离等特性。mybatis实现了对象关系映射,实现了Java对象和数据库表之间的转换。 在Spring Boot和Vue.js协作的系统架构中,前端、后端、中间层、数据层之间都有紧密的联系和协作,实现了高效的Web应用程序开发和响应。 ### 回答3: Spring Boot和Vue.js是现代Web应用程序中最流行的开发框架之一。它们被广泛应用于企业应用程序、电子商务网站、在线社区、社交媒体、在线运营、内容管理和在线学习等领域。 Spring Boot是一种基于Java的开源框架,用于构建微服务应用。它旨在简化配置和部署过程,提高生产效率。从根本上讲,Spring Boot使用Spring框架的灵活性和功能来简化开发过程,而不会牺牲灵活性和可扩展性。 Vue.js是一个使用JavaScript进行编写的前端框架。它提供了构建可复用组件的方法,可以轻松地集成到任何现代Web应用程序中。Vue.js提供了一种现代的工作方式,能够提高Web应用程序的开发速度和效率。 Spring Boot和Vue.js可以配合使用,构建现代化Web应用程序的系统架构如下: 前端(Vue.js):Vue.js作为前端框架,提供了构建Web应用程序的所有工具和组件。Vue.js的数据双向绑定和虚拟DOM技术,使得应用程序可以实现高效的性能。 后端(Spring Boot):Spring Boot提供了大量的API和工具,用于构建包括RESTful API和WebSocket等在内的API接口。Spring Boot还可以与其他Java框架(如Hibernate)集成,以实现数据访问、事务管理和安全等方面的功能。 数据库:Web应用程序所需的所有数据都存储在数据库中。可以使用任何一种数据库管理系统,如MySQL、PostgreSQL或MongoDB等。Spring Boot具有与多种数据库管理系统的集成能力,可以帮助开发人员快速地连接到数据库系统。 Web服务器:可以使用任何一款Java Web服务器,如Apache Tomcat、Jetty或Undertow。Spring Boot为这些Web服务器提供了自动配置和自动部署功能,让开发人员可以简单地集成这些服务器到应用程序中。 整体架构:整个系统的架构可以基于微服务架构来实现,将不同的组件独立地部署在不同的服务器上。这将提高系统的可扩展性和中断容忍性,从而确保系统的高容错性和性能。 总之,Spring Boot和Vue.js的结合可以帮助开发人员快速地搭建现代化Web应用程序。这种结合发挥了两个框架的优势,提高了开发效率和系统性能,使得Web应用程序的开发过程更加简单、快捷和可靠。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昨夜剑客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值