如何快速搭建一个前后端分离项目

文章目录

前言

搭建一个前后端分离的项目，以一个博客网站为例

1. 项目组成

        首先肯定需要写一个项目用（前端 + 后端）来展示这些文章相关页面 - 前台系统/博客网站，那么这些被展示的文章相关信息，肯定需要有个后台管理系统（前端 + 后端）来进行信息的发布 - 后台管理系统。

        那么我们可以得出结论，如果我们后台管理系统采用前后端分离开发模式的话，最终我们需要新建三个项目来完成这个需求：

(1). 博客网站前端  - 80
(2). 后台管理系统前端 - 8081
(3). 后端项目【后台管理系统后端 + 博客网站后端】 - 后端项目都用Java编写，所以合并了 - 8080

2. 创建项目

        因为有三个项目，所以我们这里用多模块的方式创建项目：创建一个空项目blog下创建一下一个后端Maven项目blog-server和两个前端JS项目blog-view-user和blog-view-admin。

3. 导入依赖

  <parent>
    <!--该maven工程管理着我们springboot相关的jar包和插件-->
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.5.RELEASE</version>
  </parent>

  <dependencies>
    <!-- 支持web环境，不用写版本号 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- 数据库的jar包 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <!-- SpringBoot2.2.5的版本中Mysql是mysql8.0的，需要手动导入8以下的版本。我们电脑中安装的数据库是mysql5.x的，mysql8.0启动包都不一样，所以需要手动导入5.x的版本。避免链接数据库出现问题 -->
      <version>5.1.38</version>
    </dependency>
    <!-- mybatis与springboot的整合包 -->
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>1.1.1</version>
    </dependency>

    <!-- druid连接池（德鲁伊-阿里巴巴的）-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid-spring-boot-starter</artifactId>
      <version>1.1.10</version>
    </dependency>

    <!-- pagehelper分页插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper-spring-boot-starter</artifactId>
      <version>1.2.10</version>
    </dependency>

    <!-- lombok -->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
    </dependency>

    <!-- 处理JSON的依赖 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
    </dependency>

    <!--      Spring boot 热部署 导入一个依赖即可-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
    </dependency>

    <!--swagger2的核心包-->
    <dependency>
      <groupId>io.springfox</groupId>
      <artifactId>springfox-swagger2</artifactId>
      <version>2.9.2</version>
    </dependency>
    <!--swagger2的ui界面包  底层用的thymeleaf-->
    <dependency>
      <groupId>io.springfox</groupId>
      <artifactId>springfox-swagger-ui</artifactId>
      <version>2.9.2</version>
    </dependency>
  </dependencies>

3.配置信息

3.1 自动配置-启动类

//声明当前类是一个SpringBoot项目的启动类
@SpringBootApplication
//扫描Mapper接口的包下所有的Mapper接口，生成这些接口的代理对象，供业务Service注入使用
@MapperScan("com.zcy.mapper")
public class BlogApp {
    public static void main(String[] args) {
        //使用启动类去启动或运行Spring程序
        SpringApplication.run(BlogApp.class, args);
    }
}

3.2 手动配置-yml

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource # 连接池指定 springboot2.02版本默认使用HikariCP 此处要替换成Druid
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql:///blog?serverTimezone=Asia/Shanghai&useSSL=false&characterEncoding=utf-8
    username: root
    password: root
    druid: #企业开发中可能会用到的配置
      initial-size: 5 # 初始化时建立物理连接的个数
      min-idle: 5 # 最小连接池连接数量，最小空闲数量
      max-active: 20 # 最大连接池连接数量，最大活跃连接数
      max-wait: 60000 # 配置获取连接等待超时的时间
      timeBetweenEvictionRunsMillis: 60000
      minEvictableIdleTimeMillis: 300000
      validationQuery: SELECT 1
      testWhileIdle: true
      testOnBorrow: true
      testOnReturn: false
      poolPreparedStatements: true
      maxPoolPreparedStatementPerConnectionSize: 20
      filters: stat,wall
      connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
      stat-view-servlet: # 德鲁伊连接池，内置提供一个web版的性能监控配置
        allow: 0.0.0.0 # 允许哪些IP访问druid监控界面,多个IP以逗号分隔
        login-username: admin # 设置登录帐号
        login-password: 123456 # 设置登录密码
        reset-enable: false # 是否允许重置数据
        # url-pattern: /database/* # 默认访问根路径是：/druid/；也可以自定义设置
# mybatis配置
mybatis:
  configuration:
    map-underscore-to-camel-case: true #开启驼峰字段转换，自动映射时将有下划线的字段的数据映射给驼峰字段
  type-aliases-package: com.zcy.domain #扫描实体类所在的包
logging:
  level:
    com.zcy: trace
server:
  port: 8080
  servlet:
    context-path: /

4. 数据准备

4.1 前端数据

暂无

4.2 后端数据

建立MySQL数据库，并新建需要的表格

5. 项目开发

5.1 后端模块搭建流程

domain(实体类)
query (查询)
mapper接口和mapper文件
service业务
controller接口