第一次体验一下前后端分离项目

第一次完整的体验一下前后端分离项目

技术栈

• 前台：Vue3，vue router，vuex，element-plus，axios
• 后台：SpringBoot，Mybatis-plus

写项目之前，只是耳闻前后端分离

后端-负责业务逻辑，写个接口，用json传数据。

前端-接收后端传送的数据并对其渲染。

也就到这个程度，但具体用什么技术实现的，以及落地的代码实现还没有敲过，就结合这次机会。一起学习学习

现有的能力

因为是第一次用springboot-vue 所以很多东西都是边敲先学的，就简单记录一下，所涉及的陌生的知识点。

• 前台：html+css+javascript jquery
• 后台：SpringBoot，Mybatis

发现Mybatis-plus还挺好用，就顺便结合看一看Mybatis了解一下其实现原理吧。详情见——链接

首先是关于前端的一些琐碎的知识点

以下我的举例并不准确，只是为了java人员快速理解上手。

---

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准。

ES6之于js,相当于,jdk11之于java。

---

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node.js之于js,相当于，jvm之于java. （2022年1月14日删）欢迎大家一起讨论

上面这一点不太合适

应该是 V8之于js,相当于，jvm之于java.
（node.js只是js的一个运行环境）

---

NPM （Node Package Manager）来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

NPM之于js,相当于，Maven之于java.

---

Vue.js 是用于构建交互式的 Web 界面的库。

一个比较流行的前端框架

---

跨域

因为是前后端分离的项目，需要把两个工程分为不同的端口。

在vue.config.js中 有关跨域的设置

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

---

异步交互

这次项目的异步交互用到了axios ——一种对原生XMLHttpRequest的封装。它是一个用于浏览器和 nodejs 的 HTTP 客户端，符合最新的ES规范。

说到 对原生XMLHttpRequest的封装

不得不说一说 原生的ajax 和jquery的ajax

---

JavaScript的Ajax

Ajax的全称是Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求，而不需要重载（刷新）整个页面。

Ajax使用XMLHttpRequest对象取得新数据，然后再通过 DOM 将新数据插入到页面中。另外，虽然名字中包含 XML 的成分，但 Ajax 通信与数据格式无关; 这种技术就是无须刷新页面即可从服务器取得数据，但不一定是 XML 数据。使用方法如下：

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

启动请求：

xhr.open(method, url, boolean);     
xhr.send();

注：

1，xhr.open参数含义：

method：请求方式，post、get等

url: 请求链接，只能向同源的url发送请求

boolean：是否异步请求，true：异步， false: 同步，默认为true

2，调用 open()方法并不会真正发送请求， 而只是启动一个请求以备发送。

3，send()方法接收一个参数，即要作为请求主体发送的数据(post方法会使用，get方法直接传null)。如果不需要通过请求主体发送数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。调用send()之后，请求就会被分派到服务器。

XMLHttpRequest对象的异步请求示例如下：

function success(text) {
    console.log(text);
}

function fail(code) {
   console.log(code);
}

var xhr = new XMLHttpRequest();     // 新建XMLHttpRequest对象
xhr.onreadystatechange = function () { 
    // 状态发生变化时，函数被回调
    if (xhr.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (xhr.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(xhr.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(xhr.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
xhr.open('get', '/api/categories');
xhr.send(null);

xhr的属性含义如下：

responseText: 作为响应主体被返回的文本。

responseXML: 如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存响应数据的 XML DOM 文档。

status: 响应的 HTTP 状态。

statusText: HTTP 状态的说明。

readyState ：表示请求/响应过程的当前活动阶段。可取值如下。

0: 未初始化。尚未调用 open()方法。

1: 启动。已经调用 open()方法，但尚未调用 send()方法。

2: 发送。已经调用 send()方法，但尚未接收到响应。

3: 接收。已经接收到部分响应数据。

4: 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常，我们只对 readyState 值为 4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用 open()之前指定 onreadystatechange事件处理程序才能确保跨浏览器兼容性。

另外，在接收到响应之前还可以调用 abort()方法来取消异步请求:

xhr.abort();

调用这个方法后，XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对 XHR 对象进行解引用操作。由于内存原因，不建议重用 XHR 对象。

jQuery的Ajax

$.ajax({
        url:"",
        type:"GET",
        contentType: '',
        async:true,
        data:{},
        dataType:"",
        success: function(){
        }
});

url 必填项，规定把请求发送到哪个 URL。

type 以什么样的方式获取数据，是get或post

contentType：发送POST请求的格式，默认值为’application/x-www-form-urlencoded;

charset=UTF-8’，也可以指定为text/plain、application/json

async 是否异步执行AJAX请求，默认为true，千万不要指定为false

data 发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式；

dataType

接收的数据格式，可以指定为’html’、‘xml’、‘json’、'text’等，缺省情况下根据响应的Content-Type猜测。

success 可选。执行成功时返回的数据。

缺点：

本身是针对mvc的编程模式，不太适合目前mvvm的编程模式。jQuery本身比较大，如果单纯的使用ajax可以自己封装一个，不然会影响性能体验。

---

axios具有以下特征：

1. 从浏览器中创建 XMLHttpRequest
2. 支持 Promise API
3. 客户端支持防止CSRF
4. 提供了一些并发请求的接口
5. 从 node.js 创建 http 请求
6. 拦截请求和响应
7. 转换请求和响应数据
8. 取消请求
9. 自动转换JSON数据

设置全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

注：axios 的 headers的 content-type 默认是 “application/json ”

默认情况下，axios将JavaScript对象序列化为JSON，如果是get请求，对请求参数不用做任何处理，但是如果是post请求，并且Content-Type 为application/x-www-form-urlencoded，需要使用URLSearchParams API格式化请求参数, 否则Content-Type依然是application/json

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');

get请求，以下3中写法完全等价

// 第一种写法
axios.get('/user?id=12345&name=xiaoming')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

// 第二种写法
axios.get('/user', {
    params: {
      id: '12345'，
      name: 'xiaoming'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

// 第三种写法
axios({
    url: '/user',
    method: 'get',
    params: {
      id: '12345'，
      name: 'xiaoming'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

post请求，以下2种写法完全等价

// 第一种写法
axios({
    url: '/user',
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
      id: '12345'，
      name: 'xiaoming'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

// 第二种写法
var url = '/user';
var data = {
      id: '12345'，
      name: 'xiaoming'
    };
axios.post(url, data, {
       headers: {
        'Content-Type': 'application/json'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
}));

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

配置会以一个优先顺序进行合并，顺序由低到高为

1，在 node_modules/axios/lib/defaults.js 找到的库的默认值

2，实例的 defaults 属性

3，请求的 config 参数

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
 
// 覆写库的超时默认值
// 现在，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
 
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

拦截器

在请求发出之前或响应被 then 或 catch 处理前拦截它们做预处理。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
  }, function (error) {
    // 对请求错误做些什么
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
  }, function (error) {
    // 对响应错误做点什么
  });

可以在稍后移除拦截器：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

__EOF__

本文作者：飞飞很要强
本文链接：https://www.cnblogs.com/LiPengFeiii/p/15062101.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！