您现在的位置是:首页 > Javascript
当前栏目
前端如何使用后端提供的接口拿数据,文件配置及详细使用
2023-03-31 10:43:56 时间
目录
新建文件srcutilsstorage.js封装操作token的方法
2. 通过async await 来拿到用户输入的值,根据返回结果进行判断返回相应提示
3. 在方法里面调用接口,把拿到的数据放到一个自己定义的数组里面list
一、封装本地存储操作模块
新建文件srcutilsstorage.js封装操作token的方法
/* 存储数据 */
export const setItem = (key, value) => {
// 将数组、对象类型的数据转换为 JSON 格式字符串进行存储
if (typeof value === "object") {
value = JSON.stringify(value);
}
window.localStorage.setItem(key, value);
};
/* 获取数据 */
export const getItem = (key) => {
const data = window.localStorage.getItem(key);
try {
return JSON.parse(data);
} catch (err) {
return data;
}
};
/* 删除数据 */
export const removeItem = (key) => {
window.localStorage.removeItem(key);
};
二、vuex处理用户登陆后的token值
新建文件:srcstoreindex.js
安装导入:npm install vuex
import Vue from "vue";
import Vuex from "vuex";
// 加载storage模块:获取token,存储token
import { getItem, setItem } from "@/utils/storage";
Vue.use(Vuex);
// 用户登陆后的token值
const TOKEN_KEY = "X-Token";
export default new Vuex.Store({
// 处理用户 Token,定义容器当中数据
state: {
// 用户的登录状态信息,存储当前登录用户信息(token等数据)
// 1. user: null
// 2. user: JSON.parse(window.localStorage.getItem(TOKEN_KEY))
user: getItem(TOKEN_KEY),
},
mutations: {
setUser(state, data) {
state.user = data;
// 为了防止刷新丢失,我们需要把数据备份到本地存储
// window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user))
setItem(TOKEN_KEY, state.user);
},
},
actions: {},
modules: {},
});
三、封装 axios 请求模块
下载导入:npm install axios
// 封装 axios 请求模块
import axios from "axios";
import router from "@/router";
// axios.create 方法创建一个axios的实例
const request = axios.create({
baseURL: "/localhost", // 接口的基准路径,改成自己的项目基地址
});
// 请求拦截器:是否注入token
request.interceptors.request.use(
function (config) {
return config;
},
function (error) {
return Promise.reject(error);
}
);
// store文件中vuex和localstorage对token进行处理之后响应拦截器中统一处理 token 过期
// 处理流程:在axios拦截器中加入token刷新逻辑;用户token过期时,向服务器请求新的 token;旧token替换为新token;然后继续用户当前的请求
// 响应拦截器
request.interceptors.response.use(
function (response) {
return response;
},
async function (error) {
console.dir(error);
if (error.response && error.response.status === 401) {
// 校验是否有 refresh_token
const user = store.state.user;
if (!user || !user.refresh_token) {
router.push("/login");
return;
}
// 如果有refresh_token,则请求获取新的 token
try {
const res = await axios({
method: "PUT",
url: "/admin/waterMeter/login", // 改成自己的项目的登录地址
headers: {
Authorization: `Bearer ${user.refresh_token}`,
},
});
// 如果获取成功,则把新的 token 更新到容器中
console.log("刷新 token 成功", res);
store.commit("setUser", {
token: res.data.data.token, // 最新获取的可用 token
refresh_token: user.refresh_token, // 还是原来的 refresh_token
});
return request(error.config);
} catch (err) {
// 如果获取失败,直接跳转 登录页
console.log("请求刷线 token 失败", err);
router.push("/login");
}
}
return Promise.reject(error);
}
);
export default request;
四、在main.js文件内全局注册store、axios
import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 路由对象
import store from "./store"; // 管理用户token
import axios from "axios";
... ...
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
五、新建api文件夹,存放接口文件
// 存储接口封装,用户相关的请求模块
import request from "@/utils/request.js";
// export const login = (user) => {
// return request({
// url: '', // 接口地址
// method: 'POST', 'GET', // 请求方式
// // 如果参数通过请求体来发(post),用data是请求体参数
// // 如果参数通过请求行来发(get),用params是路径参数
// data: user
// })
// }
// 用户登录
export const login = (data) => {
return request({
method: "POST",
url: "/admin/login",
data,
});
};
// 需要携带 token 获取数据时,携带登陆成功后存储在本地的token值
// 查询所有使用记录
export const listRecord = () => {
return request({
method: "GET",
url: "/admin/record/listRecord",
headers: {
"X-Token": localStorage.getItem("X-Token"),
},
});
};
// 携带params参数,也是手动输入的值
export const others = (params) => {
return request({
method: "GET",
url: "/admin/others",
params,
});
};
六、在组件页面内调接口拿数据
接口使用例子1
1. 登录接口的使用(同注册),在页面导入接口
// 调用登录接口
import { login } from '@/api/user'
2. 通过async await 来拿到用户输入的值,根据返回结果进行判断返回相应提示
async onSubmit (values) {
// 手动输入提交的数据:登录、注册、修改密码等提交的值
let { mobile: vcPhone, password: vcLoginpassword } = values
const { data } = await login({ vcPhone, vcLoginpassword, })
console.log(data);
console.log("submit", values);
if (data.code == "200") {
this.$toast.success("登录成功");
this.$router.push({ name: "shouye" });
} else if (data.message == "没有注册,请先注册") {
this.$toast.fail(data.message);
} else if (data.message == "密码错误") {
this.$toast(data.message);
} else {
this.$toast.fail('操作异常,请重试')
}
console.log("submit", values);
},
注意:mobile、password是用户在data里定义的值,这里需要将拿到的值赋给自己定义的。
或者把data里的值改成和后端字段相同,此时可简写。
例如:
let { vcPhone, vcLoginpassword } = values
const { data } = await login({ vcPhone, vcLoginpassword, })
接口使用例子2
1. 通过接口获取数据进行渲染,这里把需要的接口解构出来
import { listRecord } from '@/api/user'
2. data定义需要渲染的数据(可与后端字段一致)
data () {
return {
recordFrom: {
vcReadid: "",
vcReaddate: "",
vcCurrremainmoney: "",
},
list: [], // 存放所有使用记录数据
loading: false,
finished: false,
};
},
3. 在方法里面调用接口,把拿到的数据放到一个自己定义的数组里面list
methods: {
async getAllusedRecord () {
try {
const { data } = await listRecord()
this.list = data
this.loading = false; // 加载状态结束
this.finished = true;
// console.log(this.list);
} catch (err) {
this.$toast('获取使用记录失败')
}
},
},
4. 通过v-for渲染获取到的数据
<ul v-for="item in list" :key="item.name" :title="item">
<li>
编号:{{ item.vcReadid }}
时间:{{ item.vcReaddate }}
金额:{{ item.vcCurrremainmoney }}
</li>
</ul>
相关文章
- jQuery使用手册(收藏)
- HTML5的你应该记住的一些知识点
- JavaScript原型链和instanceof运算符的暧昧关系
- JavaScript中getter/setter的实现
- 看了《前端,我为什么不要你》有感
- 十个JavaScript中易犯的小错误,你中了几枪?
- JavaScript客户端检测技术详细解析
- 用C#开发ActiveX控件,并使用web调用
- 写给初学前端工程师的一封信
- 纠正前端开发中容易出错知识点
- 很有意思,如何把代码看成一个犯罪现场
- 前端开发者需要的10个Sublime插件
- 2015年2月编程语言排行榜:JavaScript排名达到历史最高
- 2015年1月编程语言排行榜:JavaScript摘得年度桂冠
- JS与设计模式之------策略模式Strategy
- 如何优雅的讨好程序员?
- Node.js 打造实时多人游戏框架
- 前端工程师应该具备的三种思维
- 10个帮程序员和站长减压放松的良心网站!
- 如何雇一个牛逼的 Node.js 开发者