第一种 数据代理方式的方式
创建一个文件夹 vue.config.js 文件 在里边定义跨域数据
module.exports = {
devServer: {
open: true, //是否自动弹出浏览器页面
host: "0.0.0.0", //也可以换成localhost host: "localhost",
// port: 8080,
// https: true,
hotOnly: false,
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy:{ //配置跨域
'/api': {
target: 'https://postman-echo.com/post', //你的后端端口前部分 ?之前的部分
changeOrigin: true, // 虚拟的站点需要更管origin //允许跨域
pathRewrite: {
'^/api': '' //请求的时候使用这个api就可以
}
}
},
},
}
页面调用
<template>
<div class="img">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<div class="nav">
<el-form-item label="账号" prop="namea">
<el-input v-model="ruleForm.namea"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input v-model="ruleForm.pass"></el-input>
</el-form-item>
<el-form-item class="jizhu">记住密码
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<button @click="denglu" class="but"> 登录</button>
</div>
</el-form>
</div>
</template>
<script>
// 引入axios
import http from '../../requset.js'
export default {
data() {
return {
ruleForm: {
namea: '', //账号
pass: '', //密码
delivery: false //记住密码
},
rules: {
namea: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
pass: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
}
};
},
methods: {
denglu() {
// axios数据请求
http.post("/api?name=zhou&pass=zhou123&delivery=true")
.then(response => { //监听返回
console.log(response.data, 'get 正常接口数据请求');
// 存储token
document.cookie = "token=your_token"; // 存储在cookie
sessionStorage.setItem("token", "your_token"); // 存储在sessionStorage
localStorage.setItem("token", "your_token"); // 存储在localStorage
// 我也不知道这个位置生效了没有
let token = localStorage.getItem("x-auth-token")
if (token) {
config.headers["x-auth-token"] = token
}
// 判断输入的数据 和后台数据有没有对上
if (this.ruleForm.namea === response.data.args.name && this.ruleForm.pass === response.data.args.pass && this.ruleForm.delivery === true) {
console.log('登录成功 ')
// alert('成功')
this.$router.push({ path: "/Demo" }); //判断成功 跳转到新的页面
} else {
// alert('登录失败')
console.log('登录失败')
}
})
.catch(error => {
console.log(error, '失败');
});
}
}
}
</script>
<style lang="less">
.img {
height: 45rem;
display: flex;
justify-content: center;
align-items: center;
background: url('../assets/photo-1684341326866-ad9fdde2314c.webp')center center no-repeat;
background-size: 100% 100%
}
.nav {
border-radius: 10px;
padding: 52px 54px 52px 0;
width: 100%;
background: linear-gradient(rgb(158, 116, 116), rgb(138, 138, 205));
}
.but {
margin-left: 44px;
margin-top: -22px;
width: 83px;
height: 40px;
background-color: cornflowerblue;
}
.jizhu {
margin-top: -17px;
margin-left: 116px;
}</style>
main.js 按需引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import echarts from 'echarts'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
var axios = require('axios')
axios.default.baseURL = '/api'
Vue.prototype.$http = axios //正确的使用
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
---------------------------------------------------------------------------------------------------------------------------------
二 axios封装
创建一个文件夹 requse.js 文件 在里边定义 axios数据封装请求 跨域数据
import axios from "axios";
//1.允许创建axios实例
const instance = axios.create({
proxy: { //配置跨域
'/api': {
target: 'https://postman-echo.com/post', //你的后端端口前部分 ?之前的部分
changeOrigin: true, // 虚拟的站点需要更管origin //允许跨域
pathRewrite: {
'^/api': '' //请求的时候使用这个api就可以
}
},
},
// baseURL: "https://postman-echo.com", //不跨域可以省略上边的proxy 使用这个
// 表示超时事件 如果超过这个时间 就不再请求 进行报错
// Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
timeout: 5000000,
//请求头
headers: { "Content-Type": "application/json " },
// //会在原先传的参数的情况下 前面添加一项 可以用于传token
// get请求使用
params: {
token: localStorage.getItem("token"),
},
// post请求使用
data: {
token: localStorage.getItem("token"),
},
});
// 2.拦截器
// 请求拦截器
// 在发送请求之前执行这个函数
instance.interceptors.request.use(
function (config) {
// 参数config是要发送给后端的所有内容
// 在发送请求之前统一做一些事情 比如发送token 更换请求头
// console.log(config);
// 如果是上传文件的请求 更改请求头
// if (config.url === "/file/upload") {
// config.headers = ...
// }
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
// 在刚好接收数据的时候执行
instance.interceptors.response.use(
function (response) {
console.log(response); //数据对象
// 对响应数据做点什么
//? 可以在这里过滤数据 要哪个数据返回哪个数据
//? 可以在这处理状态码
if (response.status === 200) {
return response; //这里return出去的东西是return导get或者post方法的.then方法里
} else if (response.status === 500) {
// 抛错导catch
// 这里404错误无法处理
throw new Error("505 服务器端错误...");
}
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
const http = {
// 参数可以直接传递 params直接是对象
get(url, params) {
//使用实例请求 可以直接自动拼接baseURL
return instance
.get(url, {
params: params,
})
.then((res) => {
if (res.data.status === 0) {
return res;
}
})
.catch((err) => {
// 捕获错误信息 timeout of 1000ms exceeded 捕获之后可以将这个换成轻提示
// console.log(err.message);
if (err.message === "timeout of 1000ms exceeded") {
alert("请求超时");
}
alert("服务器端错误");
});
},
post(url, data) {
return instance
.post(url, data)
.then((response) => {
return response;
})
.catch((error) => {
console.log(error);
});
},
};
export default http;
页面
<template>
<div class="img">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<div class="nav">
<el-form-item label="账号" prop="namea">
<el-input v-model="ruleForm.namea"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input v-model="ruleForm.pass"></el-input>
</el-form-item>
<el-form-item class="jizhu">记住密码
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<button @click="denglu" class="but"> 登录</button>
</div>
</el-form>
</div>
</template>
<script>
// 引入axios
import axios from 'axios';
export default {
data() {
return {
ruleForm: {
namea: '', //账号
pass: '', //密码
delivery: false //记住密码
},
rules: {
namea: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
pass: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
}
};
},
methods: {
denglu() {
// axios数据请求
axios.post("/api?name=zhou&pass=zhou123&delivery=true") //路径换成自己的
.then(response => { //监听返回
console.log(response.data, 'get 正常接口数据请求');
// 存储token
document.cookie = "token=your_token"; // 存储在cookie
sessionStorage.setItem("token", "your_token"); // 存储在sessionStorage
localStorage.setItem("token", "your_token"); // 存储在localStorage
// 我也不知道这个位置生效了没有
let token = localStorage.getItem("x-auth-token")
if (token) {
config.headers["x-auth-token"] = token
}
// 判断输入的数据 和后台数据有没有对上
if (this.ruleForm.namea === response.data.args.name && this.ruleForm.pass === response.data.args.pass && this.ruleForm.delivery === true) {
console.log('登录成功 ')
// alert('成功')
this.$router.push({ path: "/Demo" }); //判断成功 跳转到新的页面
} else {
// alert('登录失败')
console.log('登录失败')
}
})
.catch(error => {
console.log(error, '失败');
});
}
}
}
</script>
<style lang="less">
.img {
height: 45rem;
display: flex;
justify-content: center;
align-items: center;
background: url('../assets/photo-1684341326866-ad9fdde2314c.webp')center center no-repeat;
background-size: 100% 100%
}
.nav {
border-radius: 10px;
padding: 52px 54px 52px 0;
width: 100%;
background: linear-gradient(rgb(158, 116, 116), rgb(138, 138, 205));
}
.but {
margin-left: 44px;
margin-top: -22px;
width: 83px;
height: 40px;
background-color: cornflowerblue;
}
.jizhu {
margin-top: -17px;
margin-left: 116px;
}</style>