如何快速分析并将一个简单的前后端分离项目跑起来

一、前言

主要是前一段时间有小伙伴问我说自己刚入坑学后端不久，在开源网站上找了个简单的前后端分离项目，但是自己不会跑起来，让我给他说说，介于这玩意三两句话不是很好说清楚，而且不清楚那个小伙伴的知识到何种地步，可能是大学生想找个项目应付一下期末考试吧。毕竟笔者以前也干过这种事，找个开源项目当课程设计啥的~

所以抽空简单对这方面的分析方法以及必须具备的一个基础知识点简单说一下。。。

二、必备基础知识点

这里主要以前后端分离技术栈为Java和Vue为例。至于有的兄弟学Go，Pyhton和react啥的我就不说了，老铁我也是个菜鸟，没那么丰富的学识。下面是一些必备基础点说明：

基础点	版本	说明
jdk	8+	java开发工具及运行环境，不多解释。现在一般开源可能大多数都是8或者17及以上了，这个根据自己已安装的环境来找对应开源项目就行了。
maven	3.6.1	java依赖管理工具。适配tomcat9就差不多了。
nodejs	尽量最新	js运行基础环境，也不多解释了。
npm	尽量最新	前端的包管理工具
数据库		类似于mysql、redis啥的，多少得知道点。
git		拉取开源项目的，如果不会也行。

大致就这么点，如果你是学后端的那么jdk和maven这个是必不可少的。除此以外数据库也很重要，但是如果你只是应付课程设计找个项目运行，那只要会导入数据库脚本就ok了。如果实在不会，或者前端Vue的一些环境不会配置下载啥的，可以找我以前的博客，后者去搜菜鸟教程 (runoob.com)了解，都比较详细。另外最好会点Docker，因为可以偷懒创建项目必要的数据库、中间件环境啥的~但是不强求，这里就不多扯了。

三、拉取开源项目

这里可以通过git去gitee或者github上拉取，如果不会就直接下载zip安装包即可。这里我们以gitee为例。这里找到一个开源的商城系统，然后将他下载下来。直接点击“克隆下载”：

如果已有git环境可以复制地址后直接克隆项目：

没有 git就直接下载zip解压到本地即可。

四、分析项目结构构建本地环境

一般来说，稍微专业点的项目都会有一个项目结构说明，或者运行说明。比如这个项目上的：

这类都会有一些简单的技术栈介绍或者运行说明。当然大多数也可能没有，当然只要你没踩着有坑的项目就没啥问题，一般有坑的就是，他的项目压根运行不了或者有各种bug，或者有项目没有数据库(sql)文件的，这种就不用看了，下载下来也没用。所以建议选一些star较高的项目。

（1）前端模块分析

一般到手后可以先分析前端的，因为流程比较简单。

像我刚拉取的这个项目他前端主要用的是Vue3建立的一个vite项目，且有运行说明，照着他说的注释掉package.json上的pnpm相关代码，用我们已有的npm包管理工具即可去安装项目依赖，运行前端项目了。

一般来说，如果是没有项目运行说明的Vue项目的话，我们可以先看一下前端文件夹下的package.json文件，它相当于前端的依赖配置文件，好比SpringBoot中的pom文件。它定义了这个项目所需要的各个模块信息和版本，以及整个项目的配置信息，例如项目的名称，版本，描述等等信息。

这里主要关心的是它上面定义的运行方式及依赖信息，运行上可以研究scripts上这一段，这些脚本是命令行应用程序。可以通过调用 npm run XXXX 或 yarn XXXX 来运行它们，其中 XXXX 是命令的名称。例如：npm run dev。

一般如果是使用vue-cli创建的项目，那么默认是npm run serve。这里这个项目它定义了一个dev的命令，所以他可通过npm run dev运行。所以我们一般进入到这个前端文件根目录终端后，运行npm install 命令去安装项目依赖，一般顺利的话就会在在根目录生成一个node_modules文件：

这个就是依赖的主要存放地，如果中间报错，可以看一下结合package.json文件下的devDependencies参数信息检查是不是存在依赖冲突或者其他问题。必须确保项目依赖安装完成，不会影响项目运行。然后运行npm run serve 或者npm run dev 运行项目（Vue的项目一般就是这两个命令）。

运行成功后根据本地地址访问就能进入项目前端界面了：

当然这时候是没法直接登录进去的，毕竟我们后端还没运行呢，所以下一步要准备后端运行环境。

（2）后端运行模块分析

后端项目一般需要结合SpringBoot项目结构进行分析，首先推荐在IntelliJ IDEA 中将后端跟目录文件打开，如果有小伙伴用的eclipse，后面这块就不用看了，可以提前退出群聊。因为我基本没咋用过那款软件，所以不咋了解，如果没有IntelliJ IDEA 可以找资源好吧。下面直接进入后端运行分析流程：

Step1：配置Maven加载依赖

在IDEA中打开后端文件后第一件事要配置Maven环境，如果用IDEA自带的maven加载依赖会很慢，一般推荐由我们自己配置的Maven来加载项目依赖。

按照上图流程配置完成后点击根目录的pom.xml文件，一般IDEA就会自动加载项目依赖了，或者在pom文件下右键单击选择maven后重新加载项目：

直到pom文件内的依赖加载完成就可以进行下一步了。如果其中有些模块爆红没有完全加载，我们可以看一下，比如像这个log4j-core的日志依赖，不会影响项目直接运行的，可以选择性忽视即可。

如果是Mybatis依赖或者驱动啥的比较核心切直接影响系统使用的就得注意了，必须下载完对应依赖才行。

Step2：找到启动文件，查看配置文件

一般来说，如果用IDEA打开SpringBoot项目文件，在加载完项目依赖后代码文件就可以正常显示了（如果没加载完依赖，代码段会各种报红），IDEA弹出会识别到项目服务的提示，然后再下面导航栏将项目的运行模块启动类加载出来：

单击对应的启动类之后就能找到该服务了，比如这里可以看到我们这个项目有两个启动文件模块。如果没有识别出来也可以在文件中找就行了。

这个后面可以通过启动类进行运行。但是找这个启动类并不是唯一目的，我们需要根据这个启动类找到启动模块的配置文件，也就是这两个模块中对应的applicaiton.yml文件，一般在resources下打开就行了。

这里这个项目就很清楚了，核心配置就在applicaiton.yml下，然后各有三个不同环境下使用的配置文件，分别是dev、docker、prod。也就是用于开发阶段、容器化部署、生产阶段的配置。进入其中一个application.yml文件看一下：

spring:
  # 环境 dev|test|prod
  profiles:
    active: dev
  #文件上传设置
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB
      enabled: true
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
# mybaits-plus配置
mybatis-plus:
  # MyBatis Mapper所对应的XML文件位置
  mapper-locations: classpath*:/mapper/*Mapper.xml
  global-config:
    # 关闭MP3.0自带的banner
    banner: false
    db-config:
      # 主键类型 0:数据库ID自增 1.未定义 2.用户输入 3 id_worker 4.uuid 5.id_worker字符串表示
      id-type: AUTO
      #字段策略 0:"忽略判断",1:"非 NULL 判断"),2:"非空判断"
      field-strategy: NOT_NULL
      # 默认数据库表下划线命名
      table-underline: true
sa-token:
  # token名称 (同时也是cookie名称)
  token-name: Authorization
  # 是否允许同一账号并发登录 (为true时允许一起登录, 为false时新登录挤掉旧登录)
  is-concurrent: true
  # 在多人登录同一账号时，是否共用一个token(不共用，避免登出时导致其他用户也登出)
  is-share: false
  # token风格(默认可取值：uuid、simple-uuid、random-32、random-64、random-128、tik)
  token-style: uuid
  # 是否输出操作日志
  is-log: false

这里很明显他默认的环境是开发环境dev，所以我们找到applicaiton-dev.yml去配置需要的配置信息即可。

#application-dev.yml
server:
  port: 8085
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/yami_shops?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.zaxxer.hikari.HikariDataSource
    hikari:
      minimum-idle: 0
      maximum-pool-size: 20
      idle-timeout: 10000
      auto-commit: true
      connection-test-query: SELECT 1
  data:
    redis:
      host: 127.0.0.1
      port: 6379
      database: 0
logging:
  config: classpath:logback/logback-dev.xml
xxl-job:
  accessToken: default_token
  logPath: /data/applogs/xxl-job/jobhandler
  admin:
    addresses: http://localhost:8080/xxl-job-admin

这里就可以清晰的看到这个项目所用的数据库，中间件信息了。首先就是一个本地的mysql数据库，然后还有本地的redis（缓存），还有一个分布式任务调度平台xxl-job。所以我们将这些配置信息换成我们自己的本地信息就可以了。

Step3：准备并配置数据库/中间件环境

对于这种项目我们一般有两种方式配置所需的环境，第一就是在本地下载好mysql数据库，redis和xxl-job。然后填入对应的本地信息就可以了。有点条件的可以用docker容器去创建数据库/中间件环境。比如我这块就直接用docker创建这3个容器了：

root@young-virtual-machine:~/桌面# docker ps -f name=mall4j
CONTAINER ID   IMAGE                         COMMAND                   CREATED        STATUS         PORTS                                                  NAMES
a699de0cfec8   mall4j-mysql                  "docker-entrypoint.s…"   21 hours ago   Up 7 minutes   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp   mall4j-mysql
32c51afd9354   redis:latest                  "docker-entrypoint.s…"   21 hours ago   Up 7 minutes   0.0.0.0:6379->6379/tcp, :::6379->6379/tcp              mall4j-redis
6a46a19481b3   xuxueli/xxl-job-admin:2.4.1   "sh -c 'java -jar $J…"   3 weeks ago    Up 7 minutes   0.0.0.0:8088->8088/tcp, :::8088->8088/tcp              mall4j-xxl-job

然后将数据库文件，也就是这个项目db目录下的yami_shop.sql文件导入数据库。一般如果一个开源的项目没有sql文件的话，特别是对于后端，就不用clone了，这类项目就算运行起来也无济于事。

docker可以直接通过命令导入，本地化可以用命令或者用可视化工具比如Navicat Premium 16导入也行。导入成功后稍微确认一下是不是确实导入了：

root@young-virtual-machine:/opt# docker exec -it mall4j-mysql mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 435
Server version: 8.0.27 MySQL Community Server - GPL

Copyright (c) 2000, 2021, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| yami_shops         |
+--------------------+
5 rows in set (0.44 sec)

mysql> use yami_shops;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> show tables;
+-----------------------+
| Tables_in_yami_shops  |
+-----------------------+
| tz_area               |
| tz_attach_file        |
| tz_basket             |
| tz_brand              |
| tz_category           |
| tz_category_brand     |
| tz_category_prop      |
| tz_delivery           |
| tz_hot_search         |
| tz_index_img          |
| tz_message            |
| tz_notice             |
| tz_order              |
| tz_order_item         |
| tz_order_refund       |
| tz_order_settlement   |
| tz_pick_addr          |
| tz_prod               |
| tz_prod_comm          |
| tz_prod_favorite      |
| tz_prod_prop          |
| tz_prod_prop_value    |
| tz_prod_tag           |
| tz_prod_tag_reference |
| tz_shop_detail        |
| tz_sku                |
| tz_sms_log            |
| tz_sys_config         |
| tz_sys_log            |
| tz_sys_menu           |
| tz_sys_role           |
| tz_sys_role_menu      |
| tz_sys_user           |
| tz_sys_user_role      |
| tz_transcity          |
| tz_transcity_free     |
| tz_transfee           |
| tz_transfee_free      |
| tz_transport          |
| tz_user               |
| tz_user_addr          |
| tz_user_addr_order    |
| tz_user_collection    |
+-----------------------+
43 rows in set (0.01 sec)

导入成功后就可以将我们的配置信息更新到本地的开源项目中了：

server:
  port: 8085
spring:
  datasource:
    #url: jdbc:mysql://localhost:3306/yami_shops?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true
    url: jdbc:mysql://192.168.100.128:3306/yami_shops?allowMultiQueries=true&useSSL=false&useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&zeroDateTimeBehavior=convertToNull&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.zaxxer.hikari.HikariDataSource
    hikari:
      minimum-idle: 0
      maximum-pool-size: 20
      idle-timeout: 10000
      auto-commit: true
      connection-test-query: SELECT 1
  data:
    redis:
#      host: 127.0.0.1
      port: 6379
      database: 9
      host: 192.168.100.128
logging:
  config: classpath:logback/logback-dev.xml
xxl-job:
  accessToken: default_token
  logPath: /data/applogs/xxl-job/jobhandler
  admin:
    addresses: http://192.168.100.128:8088/xxl-job-admin

像我这个项目就得将两个Application模块中dev配置里的mysql、redis、xxl-job信息分别更新为自己的本地地址。另外需要说明的是，如果用的容器化数据库记得在Linux系统中开放防火墙/安全组策略，最后就可以运行后端项目了。