整合Springboot+Vue(基础框架)

初期技术栈计划:Springboot2.13 + Vue + Mybatis + Postgresql + redies + FreeMarker(这个不一定会用到)
整合配置:Logback日志管理 + Shiro权限管理 + activiti流程引擎
前期准备:
Vue安装:查看node.js 和npm是否安装,这需要注意一点默认npm版本很低,需要自己upgrade下:
在这里插入图片描述
我这里npm的版本已经很高了:
npm update常用命令使用
一、更新
  1. npm-check检查更新
   npm install -g npm-check
   npm-check
  2. npm-upgrade更新
   npm install -g npm-upgrade
   npm-upgrade
  3. 更新全局包:
   npm update -g
  4. 更新生产环境依赖包:
   npm update --save
  5. 更新开发环境依赖包:
   npm update --save-dev
开始安装Vue安装(cls清空dos界面内容后):
日志及命令:

// 安装脚手架vue-cli
G:\>npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\zy962\AppData\Roaming\npm\vue -> C:\Users\zy962\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\zy962\AppData\Roaming\npm\vue-list -> C:\Users\zy962\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\zy962\AppData\Roaming\npm\vue-init -> C:\Users\zy962\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
updated 1 package in 2.074s

// 安装webpack模块打包器
G:\>npm install -g webpack
C:\Users\zy962\AppData\Roaming\npm\webpack -> C:\Users\zy962\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.33.0
added 324 packages from 199 contributors in 35.083s

//初始化webpack
G:\>vue init webpack ZYVue

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name vu
? Project description A Vue.js project
? Author zhouyi
? Vue build standalone
? Install vue-router? Yes
// 这一步如果是大项目需要,作用是:在写代码过程中,它会进行很严格的检查,比如缩进,
//空格问题都非常的敏感,加入报错。但是相反编写会很烦。所以这里不要。
? Use ESLint to lint your code? No 
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "ZYVue".


# Installing project dependencies ...
# ========================

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
> chromedriver@2.46.0 install G:\ZYVue\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:\Users\zy962\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path G:\ZYVue\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at G:\ZYVue\node_modules\chromedriver\lib\chromedriver\chromedriver.exe

> core-js@2.6.9 postinstall G:\ZYVue\node_modules\core-js //这里可以看到位置
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> uglifyjs-webpack-plugin@0.4.6 postinstall G:\ZYVue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1518 packages from 1065 contributors and audited 31274 packages in 129.427s
found 84 vulnerabilities (65 low, 8 moderate, 10 high, 1 critical)
 run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

 cd ZYVue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

G:\>  cd ZYVue
G:\ZYVue>  npm run dev // 运行命令,运行结果如下

> vu@1.0.0 dev G:\ZYVue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

12% building modules 21/31 modules 10 active ...template&index=0!G:\ZYVue\src\App.vue{ parser: "babylon" } is depre 95% emitting

 DONE  Compiled successfully in 2274ms                                                       22:31:51

 I  Your application is running here: http://localhost:8080

在浏览器上运行上面的命令:(如下图,则成功)
在这里插入图片描述
任务结束命令:
ctrl+c,选择Y即可停止项目的运行(关于这个命令有时是ctrl+v)

 DONE  Compiled successfully in 2274ms                                                       22:31:51

 I  Your application is running here: http://localhost:8080                             终止批处理操 作吗(Y/N)? y

G:\ZYVue>

去G盘查看自己创建ZYVue

打开webstream打开该文件,可看到目录如下(并附上解释):
在这里插入图片描述
那么Vue的运行过程:(个人认为这个过程你懂了后面写Vue理解更加深刻)
在这里插入图片描述
测试Vue(其实你只需要模仿HelloWorld一套流程即可):
1.在从components下新建test的Directory目录用于测试,并建一个Test.vue,模板植入,运行。
在这里插入图片描述
访问http://localhost:8080/test但是始终没有得到我想要的效果
于是我修改了HelloWord
在这里插入图片描述
访问成功。这显然无法完成后续的开发工作。于是去解决上面,访问始终都是hello界面的问题。
仔细看了代码,发现并没有问题,但是终于看到图片是在App.vue中就引入了,删除得到预想的结果:(给出不删除的结果)
在这里插入图片描述
到此我们Vue环境就配置好了,其实配置什么,你真的没做什么,只不过,你要搞清楚这一套流程。

关于SpringBoot项目的创建,就更简单了直接maven创建或者去官网Spring Initializr下载demo.zip即可。
创建一个SpringBoot项目,后建议个controller里面编写一个测试类:

package com.cun.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class TestController {


 @RequestMapping("/testSpringBoot")
 @ResponseBody
 public String testSpringBoot() {
 return "恭喜您!测试成功,您可以开心的编写代码了,码农哥哥!";
}
}

运行结果:(到此,我们就完成了,前后端的请求是能够处理的)
在这里插入图片描述
接下来就是SpringBoot的常用配置。
1,Logback日志管理配置。这也是Springboot默认的日志管理。我们只需要级别输出即可。
在resources下新建logback.xml(官方推荐使用logback-spring.xml)

<?xml version="1.0" encoding="UTF-8"?>  
<configuration scan="true" scanPeriod="60 seconds" debug="false">  
<!-- 定义日志文件 输入位置 -->  
<property name="log_dir" value="G:/logs" />  
<!-- 日志最大的历史 30天 -->  
<property name="maxHistory" value="30"/>  

<appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">  
<encoder>  
    <pattern>%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger -%msg%n</pattern>  
</encoder>  
</appender>  

<appender name="ERROR" class="ch.qos.logback.core.rolling.RollingFileAppender">  
<filter class="ch.qos.logback.classic.filter.LevelFilter">  
    <level>ERROR</level>  
    <onMatch>ACCEPT</onMatch>  
    <onMismatch>DENY</onMismatch>  
</filter>  
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">  
    <fileNamePattern>${log_dir}/%d{yyyy-MM-dd}/error-log.log</fileNamePattern>  
    <maxHistory>${maxHistory}</maxHistory>  
</rollingPolicy>  
<encoder>  
    <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger - %msg%n</pattern>  
</encoder>  
</appender>  

<appender name="INFO" class="ch.qos.logback.core.rolling.RollingFileAppender">  
<filter class="ch.qos.logback.classic.filter.LevelFilter">  
    <level>INFO</level>  
    <onMatch>ACCEPT</onMatch>  
    <onMismatch>DENY</onMismatch>  
</filter>  
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">  
    <fileNamePattern>${log_dir}/%d{yyyy-MM-dd}/info-log.log</fileNamePattern>  
    <maxHistory>${maxHistory}</maxHistory>  
</rollingPolicy>  
<encoder>  
    <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger - %msg%n</pattern>  
</encoder>  
</appender>  

<appender name="DEBUG" class="ch.qos.logback.core.rolling.RollingFileAppender">  
<filter class="ch.qos.logback.classic.filter.LevelFilter">  
    <level>DEBUG</level>  
    <onMatch>ACCEPT</onMatch>  
    <onMismatch>DENY</onMismatch>  
</filter>  
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">  
    <fileNamePattern>${log_dir}/%d{yyyy-MM-dd}/debug-log.log</fileNamePattern>  
    <maxHistory>${maxHistory}</maxHistory>  
</rollingPolicy>  
<encoder>  
    <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger - %msg%n</pattern>  
</encoder>  
</appender>  

<logger name="com.cun" level="debug"/>

<root level="debug">  
<appender-ref ref="STDOUT" />  
<appender-ref ref="ERROR" />  
<appender-ref ref="INFO" />  
<appender-ref ref="DEBUG" />  
</root>
</configuration>  

还需要/vsCode/src/main/resources/application.yml或application.properties中配置
在这里插入图片描述
运行项目请求上面的测试类:(先清空,在请求,可以看到日志打印出)
在这里插入图片描述
查看我们配置目录:(也可以看到日志写入文件)
在这里插入图片描述
到此,日志管理就配置完成。(这里特意说明一点配置debug的配置可以考虑不要,其次还可以优化具体导指定的包,比如这里我偷懒logger name=“com.cun” level="debug"直接配了总体包,其实完全可以具体指定哪里输出)

2,Mybatis的整合。(这里就采用springboot 2.0 默认连接池Hikari)
在我们上面配置的日志后,测试。依赖你有但是没用到,就可以看到console中很多配置信息,需要加载和怎么条件下加载。里面就涉及到数据库信息。
在这里插入图片描述
那么进入主题,整合Mybatis + Postgresql。
在pom.xml中导入mybatis和postgresql依赖:

	<!-- 为了数据能够显出,引入对象互转json形式依赖 -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>
    
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.9.8</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.9.8</version>
    </dependency>
    <!-- 数据库+Mybatis依赖 -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.0.1</version>
    </dependency>
    <dependency>
        <groupId>org.postgresql</groupId>
        <artifactId>postgresql</artifactId>
        <version>42.2.5</version>
    </dependency>
    <!-- 这里引入lombok来简化代码,不过本地你也必须保证要添加配置,详细请看lombok官网的介绍 
	否则你是运行不成功的-->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.8</version>
        <scope>provided</scope>
    </dependency>

首先说明这里有两种方式整合mybatis:① 依赖于mapper;② 依赖注解。
① 依赖于mapper
我们先用我们最为常见的方式,方式一依赖于mapper文件。
数据库建表+数据insert

drop table test_user; // 删除可能存在表

// 创建表
create table "public"."test_user" (
user_no Integer,
user_name varchar(16) COLLATE "default" NOT NULL,
user_sex varchar(2) COLLATE "default" NOT NULL
)
WITH (OIDS=FALSE)
;
ALTER TABLE "public"."test_user" OWNER TO "postgres";

select * from test_user //测试建表结果
// 插入数据
insert into test_user(user_no,user_name,user_sex) values(1001,'zhouyi','男'); 
insert into test_user(user_no,user_name,user_sex) values(1004,'qianqian','女')

结果:
在这里插入图片描述
编写程序严格过程(从底层写道controller(这个过程仅纯个人想法,觉得这样逻辑会省很多事情,因为有了请求是开始,有了mapper映射是想要结果。剩下的都是中间过程,这样在写大型的项目处理中,你得逻辑不会走着走着就不知道了)):
对应的数据库实体对象:

package com.cun.entity;

import org.springframework.stereotype.Component;

import lombok.Data;
import lombok.Getter;
import lombok.Setter;

@Data
@Getter
@Setter
@Component
public class TestUser {

private Integer testUserNo;

private String testUserName;

private String testUserSex;
}

先写mapper(即你请求时什么,想得到什么)

package com.cun.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.mybatis.spring.annotation.MapperScan;

import com.cun.entity.TestUser;

// 这里说下编程的思路(仅个人意见):写代码的顺序从底层代码写起
@Mapper // 利用这个注解让mybatis自动加载
public interface TestUserMapper {

// 这里我们先规划:我们要去跟增删改查
// 1, 查数据
public List<TestUser> geTestUsers() throws Exception;

// 2,改数据
public void updateTestUser(TestUser testUser) throws Exception;

// 3, 新增用户
public void addTestUser(TestUser testUser) throws Exception;

//4, 根据no删除
public void deleteTestUser(Integer testUserNo) throws Exception;
}

写好对应的TestUser.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://www.mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cun.mapper.TestUserMapper">
<!-- 对应查数据,带返回值,无参数入力 -->
<select id="geTestUsers" resultType="com.cun.entity.TestUser">
    select * from test_user
</select>

<!-- 关于改数据,总体入力是不好的,这里单纯为了说明问题 -->
<!-- 想了想怕误导别人这里就不写了 -->

<!-- 新增用户,不带返回值,带入力参数 -->
<insert id="addTestUser" parameterType="com.cun.entity.TestUser">
    insert into test_user(user_no,user_name,user_sex) values(#{testUserNo},#{testUserName},${testUserSex})
</insert>

<delete id="deleteTestUser" parameterType="Integer">
    delete from test_user where user_no = #{testUserNo}
</delete>
</mapper>

接着在application.yml或application.properties中配置数据库+mapper加载路径。

#数据库连接  MyFramework 数据库名
spring:
	datasource:
  		driverClassName: org.postgresql.Driver
 		url: jdbc:postgresql://localhost/MyFramework 
  		username: postgres
  		password: zhouyi

#Mapper配置加载路径
mybatis:
 	mapper-locations: classpath:mapper/*.xml
	configuration:
  		 map-underscore-to-camel-case: true

相应的接口类:

package com.cun.service;

import java.util.List;


import com.cun.entity.TestUser;

//@Service // 这里接口不加这个注解
public interface TestUserService {

public List<TestUser> geTestUsers() throws Exception;

public void updateTestUser(TestUser testUser) throws Exception;

public void addTestUser(TestUser testUser) throws Exception;

public void deleteTestUser(Integer testUserNo) throws Exception;
}

接口对应的实现类:

package com.cun.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cun.entity.TestUser;
import com.cun.mapper.TestUserMapper;
import com.cun.service.TestUserService;

@Service // 这个注解应该加载具体的实现类上
public class TestUserServiceImpl implements TestUserService {

@Autowired
private TestUserMapper mapper;

@Override
public List<TestUser> geTestUsers() throws Exception {

    return mapper.geTestUsers();
}

@Override
public void updateTestUser(TestUser testUser) throws Exception {
    mapper.updateTestUser(testUser);
}

@Override
public void addTestUser(TestUser testUser) throws Exception {
    mapper.addTestUser(testUser);
}

@Override
public void deleteTestUser(Integer testUserNo) throws Exception {
    mapper.deleteTestUser(testUserNo);
}

}

最后到控制类:

package com.cun.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.cun.entity.TestUser;
import com.cun.service.TestUserService;

@Controller
public class TestUsercontroller {

// 依赖注入
@Autowired
private TestUserService service;

@Autowired
private TestUser user; // 这个你也可以不用注解的方式,自己new

// 显示出所有使用者
@RequestMapping("/showList")
@ResponseBody
public List<TestUser> showList() throws Exception {
    List<TestUser> users = service.geTestUsers();
    System.out.println(users);
    return users;
}

// 增加使用者
@RequestMapping("/addUser")
public String addUser(TestUser user) throws Exception {
    service.addTestUser(user);
    return  user.getTestUserName() + "增加使用者成功";
}

// 删除
@RequestMapping("/deleteUser")
public String deleteUser(Integer testUserNo) throws Exception {
    service.deleteTestUser(testUserNo);
    return "删除"+ testUserNo +"成功";
}
}

这里有一个坑:
我还需要在主类:

package com.cun;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.cun.mapper") // 这个配置和上面的mapper配置中@Mapper 相互作用才能正常读到mapper
public class VsCodeApplication {

public static void main(String[] args) {
	SpringApplication.run(VsCodeApplication.class, args);
}
}

到此我们就配置写完了。
利用postman测试:(结果让我失望了,数据库有数据,查出却为空)
在这里插入图片描述
回头从新看一遍程序,debug下查了Console日志。发现数据库的值是已经取出来的,但是写出对象是出错。这是为什么呢?于是我们去查出数据转为对象的地方。
在这里插入图片描述
其实原因很简单。看如图分析:
在这里插入图片描述
resultMap这个主要针对你有返回值的情况。不多说我们在映射中添加两者转化过程,直接代码。
写之前,你需要的认知:https://blog.csdn.net/weixin_42603009/article/details/91981037

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://www.mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cun.mapper.TestUserMapper">
<result property="testUserNo" column="user_no"/>
<result property="testUserName" column="user_name"/>
<result property="testUserSex" column="user_sex"/>
</resultMap>

<select id="geTestUsers" resultMap="TestUser">
    select * from test_user
</select>

<insert id="addTestUser" parameterType="com.cun.entity.TestUser">
    insert into test_user(user_no,user_name,user_sex) values(#{testUserNo},#{testUserName},${testUserSex})
</insert>

<delete id="deleteTestUser" parameterType="Integer">
    delete from test_user where user_no = #{testUserNo}
</delete>
</mapper>

再次利用ppostman请求得到如下结果:(另外两个测试不给出,后面的整合篇幅还很大)
在这里插入图片描述
第一种就整合完成了

另外这里说说第二种mybatis配置方式(个人觉得这种方式用来玩还不错,但是你要用大型项目是不可能,纯属个人见解,或许随着认知的加深这种方式也有大做用)
针对第一种方式中以上的增删改查的操作,有四个注解@Select、@Delete、@Insert、@Update,在注解中加上之前在xml中写的sql就行了。这样子就不需要我们的xml文件了。
代码示例如下:(以下代码职位说明这种概念,并未测试)

package com.cun.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.mybatis.spring.annotation.MapperScan;

import com.cun.entity.TestUser;

@Mapper // 利用这个注解让mybatis自动加载
public interface TestUserMapper {

// 1, 查数据
// 这里查数据不太举例子,个人能力有限,理解不到用这种方式来写查并返回给实体
@Select("select * from test_user")
public List<TestUser> geTestUsers() throws Exception;

// 2,改数据
// 这个也不太说,大致参考下面两种。
@Update("update user set username = #{name} where id = #{id}")
public void updateTestUser(TestUser testUser) throws Exception;

// 3, 新增用户
 @Insert("insert into test_user(user_no,user_name,user_sex) values(#{testUserNo},#{testUserName},${testUserSex})")
public void addTestUser(TestUser testUser) throws Exception;

//4, 根据no删除
@Delete("delete from test_user where user_no = #{testUserNo}")
public void deleteTestUser(Integer testUserNo) throws Exception;
}

到此我们mybatis整合+相关概念就完成了。

接下来就是前后台数据对接如何对接上的问题。
但是如何对接?目前的对接处理方式我所了解的有三种:ajax、axios、fetch。在接着写下面的内容之前,我想我有必要去研究这三个的用法区别。
请参考:https://blog.csdn.net/weixin_42603009/article/details/92079285
完全没有用过axios,这也是现在流行,浏览器支持最好的方式。我们就来尝试按官方文档使用axios实现我们前后台分离数据对接。

axios安装有三种方式:1,使用 npm;2,使用 bower;3,使用 cdn
这里使用npm,在WebStorm的项目根目录下:

npm install axios -S

结果如下:
在这里插入图片描述
这里我安装完成,照理来说是可以直接使用的,但是这不符合现实情况,比如请求可能出现各种错误,最常见是代码错误,业务请求方式错误。我们的目标是只是处理请求成功。

因为我们有必要对前端请求进行封装,封装完成后,将前端错误统一处理。这样,开发者只需要在每一次发送请求的地方处理请求成功的情况即可。

首先我们来尝试用两种方式fetch和axios实现跨域请求处理:
我们后台的URI:http://127.0.0.1:8000/showList
首先在config目录下的index.js进行跨域设置:

 proxyTable: {
  '/api': {
     target:"http://127.0.0.1:8000/",
     chunkOrigins: true,// 允许跨域
    pathRewrite:{
          '^/api': '' // 路径重写,使用"/api"代替target.
     }
   }
},

fetch测试请求处理:
在App.vue中:

<template>
	<div id="app">

	<router-view/>
  	</div>
</template>

<script>
export default {
  name: 'App',
 data(){
 return{

  }
  },
  // fetch实现跨域
  created() {
// fetch方式实现跨域
fetch("/api/showList",{
  method:"POST",
}).then(res => {
  console.log(res)
})
  }
}
</script>

在后台设置断点,访问http://127.0.0.1:8080/#/
在这里插入图片描述
后台进入断点:
在这里插入图片描述
结果:(请求处理成功,但是返回值,并没有打印处理来,这个问题后面处理)
在这里插入图片描述
Axios请求测试:(操作同上,下面只给出程序 + 结果)

<template>
 <div id="app">
	<h3><router-link to="/test">test画面</router-link></h3>
 	<router-view/>
 </div>
</template>

<script>
export default {
name: 'App',
 data(){
	return{

}
 },
  //实现跨域
  created() {
	// fetch方式实现跨域
	this.$axios.post("/api/showList").then(res=>{
	 console.log(res)
  })
  }

}
</script>

测试结果:(结果为自己预想的结果,可以看到请求成功,并返回和上面postman测试相同的结果)
在这里插入图片描述
到此关于跨域就解决了,并且前后台也贯通了。

数据报格式设计:
请求格式设计:(暂时这样设计,后面可能根据实际改动)

// 请求格式,针对postman
{ 
"requestNo":null,
"requsetTimeStamp":null,
"type":null,
"userid":null,
"AdminId":null,
"userType":null,
"token":null,
"usedates":null,
"requestData":null
}

3,定义一个响应拦截器。响应这一块数据结构是需要设计的。
具体设计:
① 返回的数据格式:

// 返回格式定义,这里就是用最常见的格式
{
"requestNo":null,
"responseTimestamp":null,
"token":null,
"userid":null,
"userType":null,
"responseCode":null,
"errorCode":null,
"responseData":{
	"usr":{
		"testUserNo":123,
		"testUserName":"周毅",
		"testUserSex":"男"
		}
}
}

简单来说上面封装的对应代码:
在这里插入图片描述
回到上面的问题。上面数据报的设计就是为了更好写拦截器。
正如上面所说,存在的各种各样的问题,我们关心的只有正确的请求,所以进一步前端请求封装:
首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器。处理方便很多axios 中,有请求拦截器,也有响应拦截器。都在axios.interceptors中。
大致思路:
1,引入axios、错误/成功信息显示element-ui的loading和message
2,定义请求拦截器处理。
请求/响应拦截(这里是指对http的拦截,暂时这么定义,后面权限设计时会改动)
在这里插入图片描述
编写测试接口用返回封装:

package com.cun.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.cun.common.JsonAndObject;
import com.cun.common.JsonRequestBody;
import com.cun.common.JsonResponseBody;
import com.cun.entity.TestUser;

@Controller
public class TestController {

@RequestMapping("/testResAndReq")
  @ResponseBody
 // @RequestBody 不能是空参数,这是这样写巨大缺陷,请求不能为空
 // 
 // @RequestBody(required = false)
 public String  testResAndReq(@RequestBody JsonRequestBody<Map<String, Object>> requestBody,
      HttpServletRequest request, HttpServletResponse response) {
  String jsonString = null;
  TestUser usr = new TestUser();
  usr.setTestUserNo(123);
  usr.setTestUserName("周毅");
  usr.setTestUserSex("男");
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("usr", usr);
  JsonResponseBody<Map<String, Object>> responseBody = new JsonResponseBody<>();
  responseBody.setResponseData(map);
  jsonString = JsonAndObject.translateObjectToJsonString(responseBody);
  return jsonString;
 }
}

postman的结果:(很多值没设置,单纯是为了测试)
在这里插入图片描述
Vue画面上测试:
在这里插入图片描述
上面报错org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing解决方式:(这里在说明一点,深入研究的心要深一点,我们点击equest body,我我们可以看到默认是true,也就是必须带参数,所以我设置required = false即可)
在这里插入图片描述
到此我们基础框架就搭完了。接下来是Vue画面设计和后台相关技术的整合。

Springboot+Vue前后的分离整合项目实战

09-09
适用人群 Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后端技术 核心框架SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前端技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后端分离的开发 数据库        Mysql5 IDE     Intellij Idea
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值