vue 获取后端数据

news2024/11/18 6:01:09

proxy 解决本地请求问题

vite

Vue CLI

fetch

代码演示

Post请求

编辑Get请求

Axios

安装

代码演示

Post请求

Get请求

TS 封装Axios

代码演示

proxy 解决本地请求问题

为什么会出现跨域问题?

浏览器的同源策略

首先给出浏览器“同源策略”的一种经典定义，同源策略限制了来自不同源（相对于当前页面而言）的document或script，对当前document的某些属性进行读取或是设置，举例来说，A网站（www.aaa.com）上有某个脚本，在B网站（www.bbb.com）未曾加载该脚本时，该脚本不能读取或是修改B网站的DOM节点数据。

解决办法

vite

代码演示

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //中转服务器
  server:{
    //通过代理实现跨域 http://localhost:20219
   proxy:{
    '/api':{
      //替换的服务器地址
      target: 'http://localhost:20219',
      //开启代理 允许跨域
      changeOrigin: true,
      //设置重写的路径
      rewrite: (path) => path.replace(/^\/api/, ""),
    }
   }
  }
})

运行结果

Vue CLI

代码演示

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    //通过代理实现跨域
   proxy: {
      '/path':{
        //替换的服务器地址
        target: 'https://localhost/prod-api',
        //开启代理 允许跨域
        changeOrigin: true,
        //设置重写的路径
        pathRewrite:{
          '^/path':''
        }
      }
   }
  }
})

运行结果

fetch

Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过 XMLHttpRequest 的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集。

优点：

1. 语法简洁，更加语义化
2. 基于标准 Promise 实现，支持 async/await
3. 同构方便，更加底层，提供的API丰富（request, response, body , headers）

4. 脱离了XHR，是ES规范里新的实现方式复制代码

缺点：

1. fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject。
2. fetch默认不会带cookie，需要添加配置项： credentials: 'include'。
3. fetch不支持abort，不支持超时控制，造成了流量的浪费。
4. fetch没有办法原生监测请求的进度，而XHR可以

代码演示

Post请求

后端接口展示

user.vue

<template>
  <h2>用户页面</h2>
  <button @click="userLogin">登入</button>
</template>
<script>
export default {
  data() {
    return {
      user: {
        userTelephone: 12244332222,
        userPassword: "123456"
      },
    };
  },
  //fetch 原生js 是http数据请求的一种方式
  //fetch 返回promise对象
  methods: {
    userLogin() {
      fetch("api/user/userLoginByPassword", {
        method: "post",
        body: JSON.stringify({
          userPassword: this.user.userPassword,
          userTelephone: this.user.userTelephone
        }),
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          console.log(res);
          //json()将响应body 解析json的promise
          // console.log(res.json());
          return res.json();
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

运行效果

Get请求

后端接口展示

user.vue

<template>
  <h2>用户页面</h2>
</template>
<script>
export default {
  //fetch 原生js 是http数据请求的一种方式
  //fetch 返回promise对象
  created() {
    //获取验证图片
      fetch("/api/user/toCreateVerifyImg", {
        method: "get"
      })
        .then((res) => {
          console.log(res);
          //json()将响应body 解析json的promise
          // console.log(res.json());
          return res.json();
        })
        .then((res) => {
          console.log(res);
        });
    }
};
</script>

运行结果

Axios

官网

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios优点：

支持node端和浏览器端
支持 Promise
丰富的配置项

安装

使用 npm:

$ npm install axios

查看是否安装成功

代码演示

Post请求

后端接口演示

User.vue

<template>
  <h2>用户页面</h2>
  <button @click="userLogin">登入</button>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      user: {
        userTelephone: 12244332222,
        userPassword: "123456",
      },
    };
  },
  methods: {
    //登入
    userLogin() {
      axios
        .post("api/user/userLoginByPassword", {
          userPassword: this.user.userPassword,
          userTelephone: this.user.userTelephone,
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

运行结果

Get请求

后端接口演示

User.vue

<template>
  <h2>用户页面</h2>
</template>
<script>
import axios from "axios";
export default {
  created() {
    //获取验证图片
    axios
      .get("api/user/toCreateVerifyImg")
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // 总是会执行
        console.log("总是会执行");
      });
  },
};
</script>

运行结果

TS 封装Axios

代码演示

request index.ts

import axios from "axios";
//创建axios实例
const service=axios.create({
    //url开头
    baseURL:"path",
    timeout: 5000,
    //请求头配置
    headers:{
        "Content-Type": "application/json; charset=utf-8"
    }
})
//请求拦截
service.interceptors.request.use((config)=>{
    //请求头放token
    config.headers=config.headers || {}
    if(localStorage.getItem('token')){
        config.headers.Authorization=localStorage.getItem('token') || ""
    }
    return config;
})
//响应拦截 
service.interceptors.response.use((res)=>{
    const code:number=res.data.code
    // 如果响应code不为200拦截掉
    if(code!=200){
        return Promise.reject(res.data)
    }
    return res.data;
},(err)=>{
    // 打印错误请求
    console.log(err);
})
export default service

request api.ts

import service from ".";
//登入接口
interface LoginData{
    userTelephone:string,
    userPassword:string
}
export function login(data:LoginData){
    return service({
        url:"/user/userLoginByPassword",
        method: "post",
        data
    })
}

LoginView.vue 部分使用代码想看=>完整版(登入功能实现)

 //调用登入接口
      login(data.ruleForm).then((res) => {
        console.log(res)
        localStorage.setItem("token", res.data.token);
        router.push("/");
      });

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409615.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！