万网空间上传网站,兰州网站维护,做外贸要看哪些网站好,h5响应式的网站安装如下
npm install axios
第一步#xff1a;创建config配置文件#xff0c;用于存放请求后端的ip地址#xff0c;用于后期打包后便于修改ip地址。
注#xff1a;typescript要求参数要有类型。#xff08;ES6 定义对象 属性 类型 修改的是属性的值#xff09;
inte…安装如下
npm install axios
第一步创建config配置文件用于存放请求后端的ip地址用于后期打包后便于修改ip地址。
注typescript要求参数要有类型。ES6 定义对象 属性 类型 修改的是属性的值
interface Config {getCookieExpires(): number;getBaseIP(): string;getBaseUrl(): string;getSQLServerBaseUrl(): string;
}const config: Config {getCookieExpires() {return 5;},getBaseIP() {const developmentIP ;return developmentIP;},getBaseUrl() {const developmentUrl http://${this.getBaseIP()}:8580/edu_examandmanage_back;return developmentUrl;},getSQLServerBaseUrl() {const developmentSQLServerUrl http://${this.getBaseIP()}:9191/edu_examandmanage_back;return developmentSQLServerUrl;},
};export default config;第二步封装axios于http文件中
注{ type AxiosInstance, type AxiosResponse }要用type
import axios, { type AxiosInstance, type AxiosResponse } from axios
import config from /config;const http:AxiosInstance axios.create({baseURL: config.getBaseUrl(),timeout: 30000, // 请求超时时间headers: {Content-Type: application/json}
});// 请求拦截器
http.interceptors.request.use((config) {const token sessionStorage.getItem(token);if (token) {config.headers.Authorization Bearer ${token};}return config;},(error) Promise.reject(error)
);// 响应拦截器
http.interceptors.response.use((response) response,(error) {if (error.response?.status 403) {// 处理权限错误}return Promise.reject(error);}
);export default http;第三步调用http实现get、post、delete、put方法 // 公共请求
import http from src/lib/httpexport const ProcessApi {// 根据ID获取仪器进度GetInstrumentProgressById(id:number) {return http.get(/api/progress/getInstrumentProgressById?id${id});},// 根据UserName获取仪器进度getInstrumentProgressByUserNumber(user_number:number) {return http.get(/api/progress/getInstrumentProgressByUserNumber?user_number${user_number});},
};第四步引入在单页面使用根据组件化开发模式不需要全局注册只需要在需要的地方引用就可以了 以下为vue2JavaScript版本
config.js
//全局配置信息
const config {//token在Cookie中存储的天数默认7天getCookieExpires(){return 5;},getBaseIP(){const developmentIP ;return developmentIP;},getBaseUrl(){const developmentUrl http:// this.getBaseIP() :8580/edu_examandmanage_back;// const developmentUrl http://localhost:8580/edu_examandmanage_back;return developmentUrl;},getSQLServerBaseUrl(){const developmentSQLServerUrl http:// this.getBaseIP() :9191/edu_examandmanage_back;// const developmentUrl http://localhost:9191/edu_examandmanage_back;return developmentSQLServerUrl;},};export default config;http.js
import axios from axios;
import config from ../config;
import Vue from vue;// Create an Axios instance
const http axios.create({timeout: 30000, // Request timeoutbaseURL: config.getBaseUrl(),headers: {Content-Type: application/json;charsetUTF-8,},
});// Add a request interceptor
http.interceptors.request.use((config) {// Get the token from localStorageconst token sessionStorage.getItem(token);// If the token exists, add it to the Authorization headerif (token) {config.headers.Authorization Bearer ${token};}return config;},(error) {return Promise.reject(error);}
);// Add a response interceptor
http.interceptors.response.use((response) {return response;},(error) {// Check if the error response status is 403if (error.response error.response.status 403) {// Use Vuesax to display a notificationVue.prototype.$vs.notification({title: 权限错误,text: 请叫管理员开通权限。,color: danger, // Set the notification colorposition: top-center,duration: 4000, // Duration in milliseconds});}return Promise.reject(error);}
);export default http;ExamApi.js
// 公共请求
import http from /lib/http;
export const ExamApi {UserNeedExamByUserNumber(UserNumber){return http.get(/exam/UserNeedExamByUserNumber, { params: { UserNumber } });},SelectAllQustionByPaperIdUpdate(PaperId){return http.get(/exam/SelectAllQustionByPaperIdUpdate, { params: { PaperId } });},insertRecordFromStartExam(data) {return http.post(/exam/insertRecordFromStartExam, JSON.stringify(data));},insertUserAnswerAndSubmitExamToAddScore(data) {return http.post(/exam/insertUserAnswerAndSubmitExamToAddScore, JSON.stringify(data));},SelectAllQustionFromStore(QuestionId){return http.get(/exam/SelectAllQustionFromStore, { params: { QuestionId } });},addQuestions(data) {return http.post(/exam/addQuestions, JSON.stringify(data));},getUserAnswers(id){return http.get(/exam/RecordAllExamInfoById, { params: { id } });},delteRecordByClassName(classname){return http.post(/exam/delteRecordByClassName, classname);},SelectAllExamInfoByUserNumber(ExamUserNumber){return http.get(/exam/SelectAllExamInfoByUserNumber, { params: { ExamUserNumber } });},SelectAllExamInfo(){return http.get(/exam/SelectAllExamInfo);},DeleteQustionByQuestionId(QuestionId){return http.get(/exam/DeleteQustionByQuestionId, { params: { QuestionId } });},//组卷模块GetAllPaperInfo(){return http.get(/exam/GetAllPaperInfo);},DeleteAnPaper(paperId){return http.get(/exam/DeleteAnPaper, { params: { paperId } });},GenerateAnPaperController(data) {return http.post(/exam/GenerateAnPaperController, JSON.stringify(data));},deleteImageFile(ImageName) {return http.delete(/upload/deleteImageFile, {params: {ImageName: ImageName}});}
}main.js
