前后端分离技术描述

前后端分离技术描述

1、需求背景：

1.1、项目描述

2、前后台分离前置配置条件

2.1、配置

前台需要安装：nodejs 、npm 、cnpm、gulp，需要IDE：VSCode

后台：java环境、idea或eclipse、Navicat、Maven环境

数据库：Mysql

后台框架：Springboot + Mybatis + Restful..

前台：React + Vap + Antd

代码管理：Git

3、代码结构讲解

[图片上传失败...(image-f2c5a1-1621334488409)]

3.1、后台

api-base: 基础服务：包括用户、权限、资源等，相当于微服务框架里的api-admin和zuul网关服务；

api-fs:文件上传服务：上传、下载、图片

api-knowledge: edr知识库后台服务，我们开发的后台功能配置都放置在这个服务下。

api-xxx: 如果业务有需要，可扩展其他业务；

api-search:搜索服务，提供了全网搜、仪表盘、大屏、报表，提供了使用接口；

api-message:消息推送服务

3.2、前台

app-protal:前端框架入口；

app-knowledge:edr知识库平台前台部分模块；

app-search: 搜索前端模块

3.3、基础服务

vap-common:vap的后台框架，统一的使用mybatis；

vap-generator:vap的后台代码生成器，可生成基础的CRUD代码、Mapper等；

vap-modules:vap的模块定义，定义需要展示包含哪些后台模块，此处视情况而定，根据功能需求可隐藏部分modules，比如EDR三期项目就没有用到api-message和api-search两个模块，因此这两个模块可以不需要展示，只需要在vap-modules里的pom.xml文件中将这两个模块屏蔽即可；

4、EDR知识库平台系统运行操作

4.1（后台部分）

一. 代码库下载地址： 建库 api-base/base.sql 二. 进入vap-common 目录 2.1 运行 mvn install 三. 使用 intelij idea 工具，打开 vap-modules 目录 3.1 打开命令行 3.2 运行 mvn install 3.3 启动 api-base 此时可打开 http://localhost:8888/ ，但没有前端样式

4.2（前台部分）

四. 进入 app-portal 4.1 cnpm install 4.2 gulp 五. 进入 app-demo 5.1 cnpm install 5.2 gulp

5、数据库表

5.1、数据库表

表设计见《EDR知识库平台功能设计方案20210425.docx》

[图片上传失败...(image-f9279d-1621334488409)]

[图片上传失败...(image-b7cc6d-1621334488406)]

6、后台本地启动配置

6.1、api-base基础服务本地配置

第一处：改造为本地数据库地址：application.yml文件

[图片上传失败...(image-804540-1621334488409)]

第二处：api-log日志存放路径&上传的默认路径：application.yml文件

[图片上传失败...(image-ba7588-1621334488409)]

由于我本地没有D盘，因此此处改为了E盘；

6.2、api-konwledge知识库服务本地配置

application.yml文件

[图片上传失败...(image-599db1-1621334488408)]

6.3、启动api-base的BaseApplication.java文件配置

[图片上传失败...(image-877cb3-1621334488408)]

此时本地服务已经启动起来了，这时可以去配置前台相关的了；

7、Swagger的使用

7.1、swagger引入

工程中在vap-modules中引入了swagger2的jar包依赖：

<dependency>

<groupId>com.github.xiaoymin</groupId>

<artifactId>swagger-bootstrap-ui</artifactId>

<version>1.9.6</version>

</dependency>

其他的路由模块均可直接引用@Configuration @EnableSwagger2，然后Bean注入配置即可；

需要查看那个模块的接口就启动那个服务，yml或者Propertis文件中一般都配置有服务端口和上下文配置：

[图片上传失败...(image-11c436-1621334488408)]

8、后台代码结构

8.1、后台代码层级结构

[图片上传失败...(image-3e4514-1621334488408)]

8.2、junit测试

Springboot用于junit测试，相对来说比较简单，只需要对对应的类双击然后Ctrl+Shift+T变可自动的生成对应的方法类的测试文件了；

两个基础注解配置：@RunWith(SpringRuner.class)以及@SpringBootTest(classes = xxxx.class)

单元测试注解 @Test 或者根据需要可以增加@Before或者其他..

[图片上传失败...(image-54318e-1621334488408)]

可根据junit测试做项目junit覆盖率的统计，这项指标可用于项目质量管理的核验指标；

其他的代码编写属于java通用编写， Spring Boot的核心思想就是约定大于配置,一切自动完成；

所以在配置的时候只是用到了Spring的少量注解，项目Mapper层里的名称和resource的Mapper xml文件需要做到一一对应；

8.3、自动化增删改查结构

后端接口部分全部完成 , 并已经生成 swagger 文档，可以通过 /doc.html 进行接口文档的查看。同样也可以通过localhost:xxxx/swagger-ui.html查看已配置的接口包含以下四个接口；

POST /api/demo = 按条件查询DEMO列表

PUT /api/demo = 添加一个demo

PATCH /api/demo = 修改一个demo

DELETE /api/demo = 删除 demo （支持批量删除）

9、vap-generator使用

9.1、vap-generator java项目

[图片上传失败...(image-7c3110-1621334488408)]

基础的生成在build目录之下。

9.2、项目配置：

1、config.java （需要生成对应java文件的时候再更改）

/**

 * 文件所在的包

 */

public static String BASE_PACKAGE_NAME = "com.vrv.vap.knowledge";

/**

 * 代码生成目录

 */

public static final String GEN_PATH = "AutoCode";

/**

 * 数据库信息，及表前辍

 */

public static final String JDBC_DIVER_CLASS_NAME = "com.mysql.jdbc.Driver";

publicstatic final String JDBC_URL = "jdbc:mysql://localhost:3306/edrs?useUnicode=true&useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC";

public static final String JDBC_USERNAME = "root";

public static final String JDBC_PASSWORD = "";

public static final String TABLE_PREFIX = "file_";

2、Main.java

根据需要更改表名Tab(xxxx)

10、前台代码结构

10.1、app-knowledge项目架构

[图片上传失败...(image-b8f97-1621334488408)]

<u>node_modules</u>：前端开发所需要的用的组件包集合；

<u>src</u>：models和views两个模块：

<u>models</u>里存放的是所有界面的模块加载器，包含该模块与后台交互的接口定义以及预加载需要的接口便于在具体文件中进行引用；

<u>views</u> 里存放的是所有前台页面的展示效果，相当于HTML文件；

<u>gitignore</u>、<u>README.md</u>属于基础用法配置，无需赘述；

<u>gulpfile.js</u>:gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，而gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件;

<u>package.json</u>和<u>package-lock.json</u>是具体的引入文件包的版本以及组件版本的引入；

package.json记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）。package-lock.json记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息；

<u>tsconfig.json</u>: 是用于指定编译之后的文件目录；

<u>webpack.config.js</u>:打包所用， 配置出入口；

10.2、关键ts文件

index.ts: 基础配置文件

Knowledge.ts:当前edr知识库前端项目启动加载类；

11、前台页面基础用法

11.1、模型层

模型层主要用于与后台的数据交互，包括发送Ajax，以及视图上的数据处理等；

对于标准的增删改查模型，只需要两行代码即可：

<u>import { Model } from 'vap/utils';export default Model.BuildModel(</u><u>aaa</u><u>, '/api/demo', '</u><u>xxxx</u><u>', 'id', 'name')</u>

11.2、视图层

视图层主要用来页面的显示，将模型里的数据展示给用户，因此在前台所用的技术属于纯前端技术。例如Antd、React、Dva.js、vap等；

[图片上传失败...(image-347330-1621334488407)]

前端技术个人也不太熟悉，也在慢慢学习中，只能做逐步尝试。

11.3、项目常见前端问题

一、模块加载不出来：

[图片上传失败...(image-9f134b-1621334488407)]

出现这种问题，

第一步、检查当前对应的模块的ts文件，看是否和后台接口匹配；

第二步、knowledge.ts文件中是否有当前这个模块的加载和import引入；

第三部、到具体的xx.tsx文件中查看是否有方法或者类引入错误；例如Render：xxx，是否有与之对应的数据源；

第四部、查看index.ts是否配置了出口；

二、新页面上数据显示不出或者页面显示不全：

如果页面上数据显示不全

第一步：查看后台的Model对应的字段大小写或者实际数据库对应的字段是否和页面上属性id名称相匹配；

第二步：查看显示不全或不显示的字段是否有其他的关联关系，若需要关联其他的表来获取数据，则需要单独的构造一个可用的数据源，数据源通过接口来获取；

第三部：查看tsx文件，看是否是前端代码编写有误；

三、事件触发时前台报404，请求失败

出现这种问题

第一步：Debug或者Console.log将有效信息打印出来，找到问题原因，确认是什么确实或者获取失败；

第二步：查看tsx文件中触发事件是否是对应的这个页面的这个接口（add、put、delete...）;

第三步：Debug后台前后台联调查看是否后台有接口报错；

以上是基础页面在构造前期时可能会遇到的问题，如果有前端交互的问题出现，建议查看前端技术文档或者需求专家帮助；