2024.10月19日- 关于Vue2的 Ajax

使用SpringMVC来简单搭建一个服务器

1. 创建项目SpringServer
2. 配置pom.xml:     spring-webmvc/javax.servlet-api/jackson-databind
3. 配置web.xml:      前端控制器
4. 配置spring-config.xml:    注解驱动、包扫描，视图解析器
5. 创建pojo类型:  User(Integer id,String name,Integer age,String gender)
6. 创建Controller类型：     返回json等各种方法
比如: 
/*http://localhost:8088/SpringServer/cost?name=zhangsan&age=39&gender=f*/
@RequestMapping("/cost")
@ResponseBody
public User handlerData1(User user){
   System.out.println(user);
   return user;
}
7. 测试HTTP请求.....

一、axios简介与入门案例演示

在Vue中，我们可以使用下列方式，来发送ajax请求，但是最近这几年使用的最多的还是axios。

1. xhr:  js原生代码，也就是new XMLHttpRequest()， 我们还得调用其方法，比如xhr.open()   xhr.send()等
2. JQuery:  $.get   $.post  $.ajax  $.load
3. Fetch:   是一个基于Promise的API， 可以发送HTTP请求
4. axios:   是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

在vue脚手架里，安装axios，安装后，就可以在node_modules里找到axios里

npm install axios

在App.vue里引入axios

<template>
  <div class="container">
    <button @click="sendData">我是一个按钮</button>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
      name:'App',
      methods: {
          sendData(){
            axios.get('http://localhost:8088/SpringServer/cost',{params:{name:'lisi'}})
            .then(res=>{
                console.log(res.data);
            }).catch(error=>{
                console.log(error);
            })
          }
      }
  }
</script>

查看服务端，传过去了，没有问题

测试发现，报如下错误： 跨域问题。

二、跨域：

是指的是浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。

2.1 跨域介绍：

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要。

2.2 同源策略：

是一种约定，是浏览器的一种安全机制，它阻止了不同域 之间进行的数据交互，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

简而言之，是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

2.3 跨域访问示例：

假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息，A网站页面的代码如下（这里使用jquery的异步请求）。

从错误信息可以看出以上出现了跨域问题。

解决办法：

1. 设置消息头
2. jsonp方法
3. nginx反向代理
4. vue使用：vue-cli配置代理服务器

三、配置代理服务器- 方式一

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
    //开启代理服务器： 配置代理服务器帮你访问的网站域名
  devServer: {
    proxy: 'http://localhost:8088'
  }
})

App.vue

<template>
  <div class="container">
    <button @click="sendGet">发送axios的get请求</button>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
      name:'App',
      methods: {
          sendGet(){
            axios.get('http://localhost:8080/SpringServer/cost',{params:{name:'lisi'}})
            .then(res=>{
                console.log(res.data);
            }).catch(error=>{
                console.log(error);
            })
          }
      },
  }
</script>

好用，查看浏览器控制台：

解决是解决了，但是有两个不够完美的地方

• 第一个是，此时只能给一个服务器做代理服务

• 第二个是，不能灵活的控制是否有代理，比如public文件夹下有个SpringServer/cost文件。那就不走代理了。

四、配置代理服务器- 方式二

vue.config.js

module.exports = {
   pages: {
      index: {
         entry: 'src/main.js',
      },
   },
   lintOnSave:false,
   // 开启代理服务器（方式一）
   // devServer: {
   //     proxy:'http://localhost:5000'
   // }
​
   //开启代理服务器（方式二）
   devServer: {
      proxy: {
         '/wangcongming': { // 匹配所有以指定字符串开头的请求路径
            target: 'http://localhost:8088',  //代理目标服务器的基础路径
            pathRewrite: { '^/wangcongming': '' }
            //ws: true,  // 用于支持websocket。默认就是true
            //changeOrigin: true //用于控制请求头中的host值。true表示使用代理目标服务器的host。默认就是true
         },
         '/zhangfei': {
            target: 'http://localhost:8089',
            pathRewrite: { '^/zhangfei': '' }, //重写路径，替换
            ws: true,
            changeOrigin: true
         }
      }
   }
}

App.vue

<template>
  <div class="container">
    <button @click="handler8088">与8088服务器进行交互</button>
    <button @click="handler8089">与8089服务器进行交互</button>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
      name:'App',
      methods: {
        handler8088(){
            axios.get('http://localhost:8080/wangcongming/SpringServer/cost',{params:{name:'lisi'}})
            .then(res=>{
                console.log(res.data);
            }).catch(error=>{
                console.log(error);
            })
          },
          handler8089(){
              axios({
                url:"http://localhost:8080/zhangfei/SpringServer2/account",
                method:"post",
                headers:{'content-type':'application/x-www-form-urlencoded'},
                data:{name:'zhangsan',age:32,gender:'f'}
              }).then(function(response){
                  console.log(response.data);
              })
          },
      },
  }
</script>

总结：

• 优点：可以配置多个代理，且可以灵活的控制请求是否走代理

• 缺点：配置略微繁琐，请求资源时必须加前缀