VUE+SpringBoot运行原理

置顶 QLUGCL

已于 2023-03-31 15:38:50 修改

阅读量7.6k

点赞数 12

分类专栏： SpringBoot 文章标签： node.js javascript 前端

于 2022-03-05 11:34:39 首次发布

本文链接：https://blog.csdn.net/qq_43813373/article/details/123291864

版权

SpringBoot 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

文章目录

实际开发中后端简单的crud处理的service，mapper层代码都可以使用mybatis-plus的代码生成器进行自动生成。
而前端数据展示和数据封装处理有element-ui组件和vue框架的utils层。
VUE前后端交互的底层是基于封装axios（ajax），而web后端则是基于框架封装servlet的req和rep进行的前后端交互
请添加图片描述

前后端环境搭建

前端开发环境的搭建需要先通过npm将package.json文件中的依赖以及组件引入到项目中，才可以借助Vue框架实现具体开发。
后端开发环境的搭建同样也需要通过Maven将pom.xml中的依赖以及组件引入到项目中，才可以借助SpringBoot框架实现具体开发。
大量set/get方法报错还需要配置lombok依赖。

人为开发的部分

后端：controller层和复杂（特殊需求）crud操作的serviceImpl层（可以借助mp的原生BaseMapper进行操作以及借助API开发功能）
前端：views层（借助element-ui组件进行数据交互处理（this.本地属性赋值和显示）和api层（调用utils层进行前端请求数据封装）

开发流程：
后端接口MVC开发–》前端JS的后端请求方法–》前端对数据进行美化渲染显示和数据交互JS方法绑定。

针对阿里云的各种服务实现：

首先引入依赖（外部功能都需要先引入对应依赖才能调用API传参实现功能）
某些高大上的功能如果不是调库/导包/API传参，那么就得自己生写这些功能。例如地图定位等等非常人所能生写，一般都是调库/导包/API传参,利用已写好的代码实现功能（抄作业）。

utils层加载密钥赋值到类变量从而方便使用
controller层接收到需要阿里云处理的数据调用Impl处理。
最后主要在Impl层借助对应阿里云服务的SDK文档实现功能。

实际上很多本科软件竞赛项目的高大上功能，大都是基于python导的外部功能包/调库/API传参然后根据返回的数据进行自己的if判断以及前端显示来实现创意功能。（例如地图定位等等）
答辩时，老师只需要问一句，这个算法/功能/API是你自己写的吗？就会打到项目的七寸上，基本上七成崩盘了。
当然这也是函数库/功能包/API存在的意义，方便快速开发，降低功能实现的复杂度。

修改陌生项目功能流程（了解陌生项目流程）

先定位再修改
在这里插入图片描述
实际开发中，主要代码逻辑也存在于Controller层和ServiceImpl层

前端VUE框架的开发模式也类似于后端的三层结构

controller层==vue前端处理后端返回的结果数据（views层.vue.then）
service.Impl层==vue进行调用后端接口的前端需求数据的封装，传参服务，request(api层.js.request)
mapper层==vue进行前后端的data->Json字符串,数据交互处理，axios(utils层.js.ajax)

图示

VUE框架和SpringBoot框架进行前后端的信息交互和操作，数据处理，而element-ui组件进行后端数据的渲染（只需要绑定好对应数据属性就行）
vue和element-ui的关系就像是js和html关系（处理数据和页面显示数据）

若是想改前端界面样式则直接改element-ui组件就可以了。

注意：前后端交互时传递的是JSON字符串，但是前后端处理信息时需要将JSON字符串转化为JSON对象才能处理信息（基本上前后端框架已经转化好了，有些时候需要手动转化为对象）。

因为JSON字符串本质还是字符串，无法直接key:value方式提取值,但是可以根据JSON的格式进行字符串算法操作，这些固定的操作后来封装为JSON字符串转对象的工具，可以通过工具类的接口方法传入JSON字符串返回JSON对象（例如：GSON）

后端
在这里插入图片描述
前端

JAVA开发是基于应用层

JAVA开发过程中，前后端属于应用层，信息交互解析基于http协议。

前后端是基于http协议解析信息而body中信息类型则是json字符串类型
前后端将json字符串类型转化为json对象才能进行处理。
前端对应最终post请求使用http协议中的body存储大数据（json字符串）与后端交互。
前端http的request请求，后端http的response响应。
在这里插入图片描述
vue对象的生命周期中created方法之前data数据和methods方法都已被加载好，所以create可以调用method方法进行页面数据初始化。
前端发送需求：views->api->utils->后端
后端返回数据：后端->utils->api->views
前端http的request请求，后端http的response响应。
在这里插入图片描述
前后端交互具体实现是基于http协议，前端向后端发送http的request请求，后端处理完后返回http的response响应
因为http协议的body中只存储字符串类型数据，所以前后端交互时需要将对象转化为JSON字符串类型才能进行http协议的数据搭载交互。
注意：
前端显示的全部信息都来源于response的body中的响应报文。
后端得到的request请求参数既可以从（request.getHeader(string name)）报文头和（Get）URL也可以从（Post）报文体。
HttpServletRequest详解
在这里插入图片描述

在这里插入图片描述

views->api->utils
api层的js文件模块化被views层调用情况

在这里插入图片描述

原生的 Ajax 请求

1、我们首先要创建 XMLHttpRequest 对象
2、调用 .open 方法设置请求参数
3、调用 send 方法发送请求
4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
在这里插入图片描述

axios（基于ajax）

axios 基于promise用于浏览器和node.js的http客户端。
axios是独立的项目，不是vue的一部分，经常使用vue和axios一起实现ajax功能。
用法：
在这里插入图片描述

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

优点：

从node.js创建http请求
在浏览器中创建XMLHttpRequest
支持Promise API
提供了一些并发请求的接口
支持拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御CSRF/XSRF

作者：抽疯的稻草绳链接：https://www.jianshu.com/p/89ba99fb7241 来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在这里插入图片描述

前端axios和后端R的JSON交互

在这里插入图片描述

后端抛出异常的前端警告显示

在这里插入图片描述

package com.qlugcl.commonutils;

import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.HashMap;
import java.util.Map;

//统一返回Json结果的类
@Data
public class R {

    @ApiModelProperty(value = "是否成功")
    private Boolean success;

    @ApiModelProperty(value = "返回码")
    private Integer code;

    @ApiModelProperty(value = "返回消息")
    private String message;

    @ApiModelProperty(value = "返回数据")
    private Map<String, Object> data = new HashMap<String, Object>();

    //把构造方法私有，单例模式
    private R() {}

    //成功静态方法
    public static R ok() {
        R r = new R();
        r.setSuccess(true);
        r.setCode(ResultCode.SUCCESS);
        r.setMessage("成功");
        return r;
    }

    //失败静态方法
    public static R error() {
        R r = new R();
        r.setSuccess(false);
        r.setCode(ResultCode.ERROR);
        r.setMessage("失败");
        return r;
    }
//此处的this是调用该方法的bean
    public R success(Boolean success){
        this.setSuccess(success);
        return this;
    }

    public R message(String message){
        this.setMessage(message);
        return this;
    }

    public R code(Integer code){
        this.setCode(code);
        return this;
    }

    public R data(String key, Object value){
        this.data.put(key, value);
        return this;
    }

    public R data(Map<String, Object> map){
        this.setData(map);
        return this;
    }
//    返回this可以实现链式调用：R.ok().data("total",total).data("rows",records)
}

前后端数据交互的本质：交互

前端收集需求信息get/post传参给后端接口。
后端接收后处理前端需求信息return R.ok.data数据。
前端接收后端结果数据response后处理并渲染到前端data。

VUE框架中methods和element-ui组件的数据交互

函数方法传值多用于处理用户需求
函数传参一般是传递的数据量比较小比如id之类的（应用实例：下拉表）
对应最终get请求使用url进行小数据（id）与后端交互。
在这里插入图片描述

在这里插入图片描述
get方式只能通过url进行传参，@GetMapping和@Pathvariable配合使用。

v-model数据绑定传值多用于前端数据显示和用户表单信息填写
v-model传递的数据一般比较大比如对象之类的（应用实例：用户填写表单信息）
对应最终post请求使用http包的body进行大数据（json字符串）与后端交互。
注意：前端传递的对象属性名等还要和后端接口方法中的参数对象的属性名一致。
在这里插入图片描述

在这里插入图片描述
只有post方式可以接收大数据（json字符串），也只有@PostMapping可以使用@RequestBody进行对象传参，也可以使用ur传参@Pathvariable。

element-ui数据显示

methods将后端数据赋值给前端data，然后element-ui组件通过v-for/bind/model和插值表达式{{}}显示前端data的值，最后进行vue和element-ui组件的数据交互。
前端data数据显示到element-ui组件上也是注意绑定的属性名一致，否则会导致不显示。

element-ui组件的js方法绑定

如何查看element-ui组件的属性

鼠标移动到组件标签上，VsCode自动会显示此组件所包含的属性以及可以绑定的属性类型还有使用说明等等下面的五种属性。

参数说明类型可选值默认值
对于组件自带的事件方法会显示：
事件名称说明回调参数

如图所示：根据回调参数可以实现功能。
在这里插入图片描述

在这里插入图片描述

最终项目运行环境

多个不同类型前端可以使用同一个后端接口方法。
前端主要是渲染数据，后端主要是提供数据。
实际上MAC和Linux差不多都是类UNIX操作系统，软件开发或命令行远程操作服务器都很便捷，但是MAC图形化界面做的比较好方便日常娱乐办公，所以大多数开发者使用MAC，较大部分使用LInux，少部分使用Window。

Linux是网络操作系统
主要用于远程操作服务器或远程无线设备（ROS小车）

Linux是基于网络的，诞生于网络。
远程连接上SSH，你就可以轻松操控远在千里之外的Linux服务器，只要有相应的权限，几乎和坐在物理机面前没有区别，哪怕网速很糟糕，实际只是一些加密的字符在传送，需要的带宽很小。

在这里插入图片描述

云平台的作用

存放我们的docker容器，让计算跑在云端。
获得公网IP地址，让每个人可以访问到我们的服务。

任选一个云平台即可，推荐配置：

1核 2GB（后期可以动态扩容，前期配置低一些没关系）
网络带宽采用按量付费，最大带宽拉满即可（费用取决于用量，与最大带宽无关）
例如：阿里云播放服务，收费取决于已上传视频访问流量多少
系统版本：ubuntu 20.04 LTS（推荐用统一版本，避免后期出现配置不兼容的问题）

注意

小心一点保证不会出错

前端标识符属性值和后端接口参数名称（实体类中属性名）保持一致，否则无法直接映射传参，导致后端接收不到数据。
路径映射的值也要和后端接口参数名称一一对应。
实体类中的变量属性还要设置public set/get方法（可以用lombok的@Data）
同理：前端data中对象接收后端return的对象数据时也要做好属性的一一对应。
前端通过response提取后端返回的data的时候也要做好key：value的对应提取。（value=response.data.key）

QLUGCL

关注

12
点赞
踩
137

收藏

觉得还不错? 一键收藏
4
评论
VUE+SpringBoot运行原理

实际开发中后端简单的crud处理的service，mapper层代码都可以使用mybatis-plus的代码生成器进行自动生成。而前端数据展示和数据封装处理有element-ui组件和vue框架的utils层。人为开发的部分后端：controller层和复杂（特殊需求）crud操作的service层（可以借助mp的原生BaseMapper进行操作）前端：views层（借助element-ui组件进行后端数据处理（this.本地属性赋值）和显示）和api层（进行前端请求数据封装）前端Vue框架的
复制链接

扫一扫

专栏目录