第三部分 网络请求-axios

最新推荐文章于 2023-08-07 12:02:01 发布
最新推荐文章于 2023-08-07 12:02:01 发布
阅读量844 收藏 1
点赞数
分类专栏： Web前端方面 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/isaiah282485068/article/details/108689302
版权

目录

1. Ajax请求

1.1 原生ajax

1.2 jqueryAjax

1.3 fetch

1.4 axios

1.5 几种ajax库的对比

2 调用Restfull接口

2.1 restfull接口规范

2.2 qs.js库

qs.stringify() 和JSON.stringify()

qs.parse()和JSON.parse()

2.3 发送Get请求

2.4 发送post请求

1、Content-Type: application/json

2、Content-Type: multipart/form-data

3、Content-Type: application/x-www-form-urlencoded

2.5 发送put请求

2.6 发送delete请求

方式一：Content-Type: application/json

方式二：使用 parmas 属性

2.7 执行多个并发请求

3 配置axois

3.1 自定义配置

3.2 配置拦截器

4 vue中使用axios

5 axios跨域

5.1 什么时跨域问题

5.2 Vue 开发环境中配置代理

5.3 服务器端支持跨域

5.3.1 在Nodejs项目中express框架下开启支持跨域

5.3.2 在Java项目中springboot框架下开启支持跨域

 

1. Ajax请求

 

1.1 原生ajax

    //创建异步对象  
    var xhr = new XMLHttpRequest();
    //设置请求基本信息，并加上请求头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post', 'test.php' );
    //发送请求
    xhr.send('name=Lan&age=18');
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };

1.2 jqueryAjax

var loginBtn =  document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=lan&pwd=123456",
        success:function(data){
           console.log(data);
        }
    });
}

 

 

 

1.3 fetch

fetch('http://www.mozotech.cn/bangbang/index/user/login', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.text();
})
.then(data => {
    console.log(data);
})

1.4 axios

axios({
    method: 'post',
    url: '/abc/login',
    data: {
        userName: 'Lan',
        password: '123'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

 

1.5 几种ajax库的对比

ajax：

【优点：局部更新；原生支持】

【缺点：可能破坏浏览器后退功能；嵌套回调】

jqueryAjax：

【在原生的ajax的基础上进行了封装；支持jsonp】

fetch：

【优点：解决回调地狱】

【缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill】

axios：

【几乎完美】

axios的特点

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 能转换请求和响应数据
  • 能取消请求
  • 自动转换JSON数据
  • 浏览器端支持防止CSRF(跨站请求伪造)

 

2 调用Restfull接口

2.1 restfull接口规范

URI

URI 表示资源，资源一般对应服务器端领域模型中的实体类。

URI规范：

  • 不用大写；
  • 用中杠-不用下杠_；
  • 参数列表要encode；
  • URI中的名词表示资源集合，使用复数形式。

 

服务器端的组合实体必须在uri中通过父实体的id导航访问：

组合实体不是first-class的实体，它的生命周期完全依赖父实体，无法独立存在，在实现上通常是对数据库表中某些列的抽象，不直接对应表，也无id。一个常见的例子是 User — Address，Address是对User表中zipCode/country/city三个字段的简单抽象，无法独立于User存在。必须通过User索引到Address：GET /user/1/addresses

 

HTT请求方法

通过标准HTTP方法对资源CRUD：

GET：查询

GET /zoos
GET /zoos/1
GET /zoos/1/employees

 

 

 

POST：创建单个资源。POST一般向“资源集合”型uri发起

POST /animals  //新增动物
POST /zoos/1/employees //为id为1的动物园雇佣员工

 

PUT：更新单个资源（全量），客户端提供完整的更新后的资源。与之对应的是 PATCH，PATCH 负责部分更新，客户端提供要更新的那些字段。PUT/PATCH一般向“单个资源”型uri发起

PUT /animals/1
PUT /zoos/1

 

DELETE：删除

DELETE /zoos/1/employees/2
DELETE /zoos/1/employees/2;4;5
DELETE /zoos/1/animals  //删除id为1的动物园内的所有动物

 

安全性和幂等性

  • 安全性：不会改变资源状态，可以理解为只读的；
  • 幂等性：执行1次和执行N次，对资源状态改变的效果是等价的

安全性和幂等性均不保证反复请求能拿到相同的response。以 DELETE 为例，第一次DELETE返回200表示删除成功，第二次返回404提示资源不存在，这是允许的。

复杂查询

查询可以捎带以下参数

 

 

1. 为了演示提供好以下接口：

 

 

 

2. 在页面导入以下js库

<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./node_modules/qs/dist/qs.js"></script>

 

2.2 qs.js库

 

qs.stringify() 和JSON.stringify()

let a = {name:'hehe',age:10};

qs.stringify序列化结果如下：

 

name=hehe&age=10

而JSON.stringify序列化结果如下：

"{"a":"hehe","age":10}"

qs.parse()和JSON.parse()

qs.parse()将URL解析成对象的形式

let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
 qs.parse(url);

 

解析后的结果如下：

{method: "query_sql_dataset_data", projectId: "85", appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0"}

JSON.parse()用于从一个字符串中解析出json 对象

let str = '[{"field":"thedate","v1":"20170102"},{"field":"rev_type","v1":"大数据收入"}]'
JSON.parse(str)

解析后的结果如下：

[
   {field: "thedate", v1: "20170102"},
   {field: "rev_type", v1: "大数据收入"}
]

2.3 发送Get请求

<head>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/qs/dist/qs.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <button @click="addUser">添加</button>
            <button @click="updateUser">修改</button>
            <button @click="deleteUser">删除</button>
        </p>
        <table border="1" cellspacing="0">
            <tr>
                <th>姓名</th><th>生日</th><th>年龄</th><th>邮箱</th>
            </tr>
            <tr v-for="(user, index) in userList">
                <td>{{user.username}}</td><td>{{user.birthday}}</td><td>{{user.age}}</td><td>{{user.email}}</td>
            </tr>
        </table>

    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        methods: {
        },  
        created() {
            // 发送get请求
            const _this = this
            axios.get('http://127.0.0.1:8080/user/1')
            .then(function(resp){
                _this.userList.push(resp.data)
            })
            .catch(function(e){
                console.error('请求失败：',e)
            })
        },
    })
</script>

 

传递GET请求参数:

• 直接在 URL 中附加参数

            getUser(){
                // 发送get请求
                const _this = this
                axios.get('http://127.0.0.1:8080/user?name=admin' )
                    .then(function(resp){
                        _this.userList.push(resp.data)
                    })
                    .catch(function(e){
                        console.error('请求失败：',e)
                    })
            }

• 使用 parmas 属性添加GET参数

            getUser(){
                // 发送get请求
                const _this = this
                axios.get('http://127.0.0.1:8080/user', {
                    params: {name: 'admin'}
                } )
                    .then(function(resp){
                        _this.userList.push(resp.data)
                    })
                    .catch(function(e){
                        console.error('请求失败：',e)
                    })
            }

2.4 发送post请求

axios POST提交数据的三种请求方式写法

1、Content-Type: application/json

 

            addUser(){
                var userData = {
                    id: 1,
                    username: 'tom',
                    birthday: '2020-08-08T13:13:25.262+0000',
                    age: 18,
                    email: 'tom@sohu.com'
                }
                // 发送post请求
                axios.post('http://127.0.0.1:8080/user', userData)
                    .then(function(resp){
                        console.log(resp.data)
                    })
                    .catch(function(e){
                        console.error('请求失败：',e)
                    })
            },

2、Content-Type: multipart/form-data

FormData

　　FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

实现了 FormData 接口的对象可以直接在for...of结构中使用

 addUser(){
    let userFormData = new FormData()
    userFormData.append('id', '1')
    userFormData.append('username', 'tom')
    userFormData.append('birthday', '2020-08-08T13:13:25.262+0000')
    userFormData.append('age', '18')
    userFormData.append('email', 'tom@sohu.com')

    // 发送post请求
    axios.post('http://127.0.0.1:8080/user', userFormData)
        .then(function(resp){
            console.log(resp.data)
        })
        .catch(function(e){
            console.error('请求失败：',e)
        })
},

 

 

 

3、Content-Type: application/x-www-form-urlencoded

URLSearchParams 

如果你想构建一个简单的GET请求，并且通过<form>的形式带有查询参数，可以将它直接传递给URLSearchParams。URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。一个实现了 URLSearchParams 的对象可以直接用在 for...of 结构中

    addUser(){
        let userParams = new URLSearchParams()
        userParams.append('id', '1')
        userParams.append('username', 'tom')
        userParams.append('birthday', '2020-08-08T13:13:25.262+0000')
        userParams.append('age', '18')
        userParams.append('email', 'tom@sohu.com')

        // 发送post请求
        axios.post('http://127.0.0.1:8080/user', userParams)
            .then(function(resp){
                console.log(resp.data)
            })
            .catch(function(e){
                console.error('请求失败：',e)
            })
    },

或

            addUser(){
                var userData = {
                    id: 1,
                    username: 'tom',
                    birthday: '2020-08-08T13:13:25.262+0000',
                    age: 18,
                    email: 'tom@sohu.com'
                }
                // 发送post请求
                axios.post('http://127.0.0.1:8080/user', Qs.stringify(userData))
                    .then(function(resp){
                        console.log(resp.data)
                    })
                    .catch(function(e){
                        console.error('请求失败：',e)
                    })
            },

 

2.5 发送put请求

    updateUser(){
        var userData = {
            id: 1,
            username: 'tom',
            birthday: '2020-08-08T13:13:25.262+0000',
            age: 18,
            email: 'tom@sohu.com'
        }
        // 发送put请求
        axios.put('http://localhost:8080/user/1', userData)
            .then(function(resp){
                console.log(resp.data)
            })
            .catch(function(e){
                console.error('请求失败：',e)
            })
    },

 

 

2.6 发送delete请求

方式一：Content-Type: application/json

    deleteUser(){
        // 发送delete请求：以json对象的形式带参
        axios.delete('http://localhost:8080/user', {
            data: {age: 20}
        })
            .then(function(resp){
                console.log(resp.data)
            })
            .catch(function(e){
                console.error('请求失败：',e)
            })
    },

 

 

方式二：使用 parmas 属性

 

    deleteUser(){
        // 发送delete请求：以json对象的形式带参
        axios.delete('http://localhost:8080/user', {
            params: {age: 20}
        })
            .then(function(resp){
                console.log(resp.data)
            })
            .catch(function(e){
                console.error('请求失败：',e)
            })
    },

 

2.7 执行多个并发请求

            getUser1(){
                const _this = this
                axios.get('http://127.0.0.1:8080/user/1')
            },
            getUser2(){
                const _this = this
                axios.get('http://127.0.0.1:8080/user/2')
            },
            getMultiUser(){
                axios.all([this.getUser1(), this.getUser2()])
                .then(axios.spread(function (acct, perms) {
                    // 两个请求现在都执行完成
                }));
            }

 

3 配置axois

3.1 自定义配置

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

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

 

 

3.2 配置拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.auth =  {                     //设置的自定义 `Authorization`头
        username: 'janedoe',
        password: 's00pers3cret'
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log('响应状态码' + response.status)
    console.log('响应数据：' + JSON.stringify(response.data))
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

 

4 vue中使用axios

 

1. 使用vue-cli创建vue项目

vue create crm

2. 使用vue命令安装axios

cd crm
vue add axios

 

 

这时自动已在vue应用程序中配置好axios，后续直接使用即可

 

3. 使用axios发送ajax请求

  created(){
     // 发送get请求
      const _this = this
      axios.get('http://127.0.0.1:8080/user/1')
      .then(function(resp){
          _this.userList.push(resp.data)
      })
      .catch(function(e){
          console.error('请求失败：',e)
      })
  }

 

4. 启动服务

cd crm
$ npm run serve

 

 

报错原因： 该项目安装了eslint规范，ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似。

解决方法1：
在package.json文件内加入如下代码：

"rules": {
	"generator-star-spacing": "off",
	"no-tabs":"off",
	"no-unused-vars":"off",
	"no-console":"off",
	"no-irregular-whitespace":"off",
	"no-debugger": "off"
},

如图所示：

解决方法2：
在安装项目的时候不安装ESLint:

Use ESLint to lint your code? NO

5 axios跨域

5.1 什么时跨域问题

axios跨域问题:Ajax加载其 它服务器的API数据，可能会 遇到跨域的问题

➢跨域，是指在当前域下，要访问 其它域中的资源

 

 

 

5.2 Vue 开发环境中配置代理

在vue.config.js配置文件中，配置代理服务器

✓访问 当前指定地址时，会把请求交给代理服务器发送，避开跨域问题

✓ Vue中使用时，直接给出不含服务器域名的url即可

 

 

1. 创建vue.config.js

// vue配置项
module.exports = {
    devServer: {
        // 遇到未知请求，将会交给代理服务器处理
        proxy: 'http://127.0.0.1:8888'
    }
}

 

2. 发送ajax请求时写相对路径

  methods: {
    addUser(){
      var userData = {
          id: 1,
          username: 'tom',
          birthday: '2020-08-08T13:13:25.262+0000',
          age: 18,
          email: 'tom@sohu.com'
      }
      // 发送post请求
      this.axios.post('/user', userData)
          .then(function(resp){
              console.log(resp.data)
          })
          .catch(function(e){
              console.error('请求失败：',e)
      })
    },
  },
  created(){
     // 发送get请求
      const _this = this
      this.axios.get('/user/1')
      .then(function(resp){
          _this.userList.push(resp.data)
      })
      .catch(function(e){
          console.error('请求失败：',e)
      })
  }
}

➢可以同时设置多个跨域请求的代理

✓发送axios请求时，请求URL要使用 指定的代理前缀

✓只对开发服务器有效，生产环境中仍存在跨域问题

 

在vue.config.js进行配置

// vue配置项
module.exports = {
    devServer: {
        // 遇到未知请求，将会交给代理服务器处理
        //proxy: 'http://127.0.0.1:8888'
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8888',
                pathRewrite: {
                    '^api/': '/' // 不是'^/api': '/'
                }
            }
        }
    }
}

 

在页面发送ajax请求

  methods: {
    addUser(){
      var userData = {
          id: 1,
          username: 'tom',
          birthday: '2020-08-08T13:13:25.262+0000',
          age: 18,
          email: 'tom@sohu.com'
      }
      // 发送post请求
      this.axios.post('/api/user', userData)
          .then(function(resp){
              console.log(resp.data)
          })
          .catch(function(e){
              console.error('请求失败：',e)
      })
    },
  },
  created(){
     // 发送get请求
      const _this = this
      this.axios.get('/api/user/1')
      .then(function(resp){
          _this.userList.push(resp.data)
      })
      .catch(function(e){
          console.error('请求失败：',e)
      })
  }

5.3 服务器端支持跨域

5.3.1 在Nodejs项目中express框架下开启支持跨域

 

1. 安装 cors 跨域支持模块 yarn add cors

yarn add cors

 

或

npm install -S cors

2. 启用 cors 中间件

 

 

5.3.2 在Java项目中springboot框架下开启支持跨域

在配置WebMvc相关配置类中添加如下代码：

@Configuration
public class AdminWebMvcConfing implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600)
                .allowCredentials(true);
    }

}

 

 

 

 

 

 

 

 

 

A一念執著
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习
qq_56895799的博客
08-08 751
优点：轻量级框架、简单易学、双向数据绑定、组件化、视图,数据,结构分离、虚拟DOM、运行速度更快。
mini-axios:基于 axios 封装的微信小程序请求工具，完全使用Promise，并提供了请求和响应的拦截器
05-17
引入到项目中第一步， npm i mini-axios第二步 import axios from 'mini-axios'第三步， 复制 dist 目录下的 wxAxios.min.js 到项目中//如果小程序安装了npm环境可跳过 三、四步第四步， import axios from './libs/...
axios使用方法（详细说明）
WuqibuHuan的博客
04-08 3457
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 安装： 使用npm安装 npm install axios 使用 bower安装 bower install axios 使用 cdn引入: <script src="https
Restful API 的设计规范
爱是与世界平行
09-07 633
一、URI 1.1 URI规范 1.2 资源集合 vs 单个资源 1.3 避免层级过深的URI 1.4 对Conposite资源的访问 二、Request 2.1 HTTP方法 2.2 安全性和幂等性 2.3 复杂查询 2.4 Bookmarker 2.5 Format 2.6 Content Negotiation 三、Response 分页res...
axios请求中get与post的参数传递问题
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-10 1万+
axios的请求格式有一下几种 this.$axios({ methods: 'POST', url: '#', data: { key1: val1, key2: val2 } }) this.$axios({ methods: 'get', url: '#', params: { key1: val1,
axios解决post请求跨域问题
weixin_45124398的博客
05-11 1万+
时间：2021-05-09 问题描述：axios请求后台时出现跨域问题 this.$axios .post(`http://383vm21556.eicp.vip/shgvp/ceshi`,{usernmae:username,password:password}) .then((res) => { console.log(res.data); }); 代码如上，这里浏览器中报了跨域的错误 一开始我们认为是后端部署出现了问题，后
node-koa2-axios:实现axios请求数据
04-28
node-koa2-axios实现axios请求数据本版本主要实现的有：将路由文件单独分开--- index页面由多个子页面构成-----使用axios请求url获得数据，并将数据渲染到页面----增加内存缓存处理（减少页面的请求，加快请求速度）...
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
主要介绍了vue 使用axios 数据请求第三方插件的使用 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
server-axios-env
04-13
服务器端Axios npm install 这是陪同06-02b_server-axios-env.md的起始回购 ... 本讲座的目标是从管理员向本地服务器发出请求，然后让该服务器发出第三方API请求。 然后将其传递回客户端，并在DOM上显示。
axios—使用axios请求REST接口—发送get、post、put、delete请求
weixin_51351637的博客
09-27 1万+
我们采put请求修改数据，可以具体修改某一条数据。我们使用get请求可以得到我们想要的具体的数据。，可以采用JSON的形式传输数据。then方法指定成功时候的回调。我们可以操作post请求。
Vue学习----Axios发送请求
https://juejin.cn/user/4248168663101239/posts
01-29 549
Axios一. Axios介绍二. Axios特点三. Axios安装1. NPM2. CDN四. Axios简单测试1. Get请求测试2. Post请求测试3. 执行多个并发请求4.Axios的Restful风格的API5. Axios的高级使用配置对象6. Axios的实例创建+配置五. Axios模块封装六. Axios拦截器 一. Axios介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Axios 是一个 异步请求 技术 异步请
vue中使用axios与this.$post 方法
热门推荐
duheyuan的博客
11-18 2万+
一. 在vue中引入axios 1.安装 axios 与 vue-axios npm install axios npm install vue-axios 在页面import 刚刚安装的两个工具包 import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) 下面我们就可以在...
axios发送post请求接受不到参数
weixin_43328357的博客
09-04 583
在玩vue的时候发现axios的post请求餐参数有问题 1.发送失败的前端代码 this.loading = true let param = {username:this.loginForm.username,password:this.loginForm.password}; console.log(param) this.axios....
ajax请求 POST丨ajax简介,ajax提交数据的多种类型
灵感与学习结合-echo
01-26 4985
Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务 器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用 户的操作。同步和异步的区别同步：如果与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他 操作，只能等待服务器端的响应，会刷新页面。异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器响应客户端信息，将 信息更新到网页局部，整个过程页面不刷新。'''
API接口设计规范，看这篇就足以了
WBKJ_Noah的博客
08-01 5205
应用程序编程接口（Application Programming Interface，API接口），是应用程序重要的组成部分，就是应用程序对外提供了一个操作数据的入口，这个入口可以是一个函数或类方法，也可以是一个url地址或者一个网络地址。当客户端调用这个入口，应用程序则会执行对应代码操作，给客户端完成相对应的功能。关于限流设计、熔断设计、降级设计，目前主流网关都有相关功能（比如shenyu网关），可以不在API实现中开发这些功能。
子查询、分页查询、联合查询
TiAmo_xixi的博客
07-21 259
子查询、分页查询、联合查询
restful风格的代码开发及分页查询步骤
最新发布
m0_51487124的博客
08-07 406
在sky-server模块中，com.sky.controller.admin.EmployeeController中添加分页查询方法。**注意：**此处使用 mybatis 的分页插件 PageHelper 来简化分页代码的开发。底层基于 mybatis 的拦截器实现。后面所有的分页查询，统一都封装为PageResult对象。员工信息分页查询后端返回的对象类型为: Result。根据请求参数进行封装，在sky-pojo模块中。故在pom.xml文中添加依赖。在sky-common模块。
Ajax：ajax发送Post请求、ajax案例
dengfengling999的博客
07-21 1万+
上面项目，目前存在的缺点在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端。能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。我们后端的java代码能不能只返回数据？（返回数据可以采用JSON的格式，也可以采用XML的格式）一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。......
axios请求方法总结
星河梦~的博客
01-02 1300
axios请求 axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，它对ajax进行了封装，可以实现异步请求。 使用方法 （1）axios的安装： npm install axios; （2）在模块中导入axios： import axios from "axios"; //引入axios，用于ajax请求 请求方式 get请求 （1）不带参数： axios.get('/url').then(res=>{ console.log(res) }).cat
vue3应该使用axios还是vue-axios
05-11
axios是一个独立的第三方库，而vue-axios是对axios进行了封装，让其可以更好地与Vue框架集成。 如果你只需要进行简单的网络请求，使用axios已经足够了。但是如果你需要更好的集成Vue框架，可以考虑使用vue-axios。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值