赞
踩
1、安装依赖:
命令行:vue ui ;打开该项目,引入相应的axios和vue-axios
2、编写reauest.ts
- import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
- import {message, notification} from 'ant-design-vue';
-
- export class Request {
- public static axiosInstance: AxiosInstance;
-
- // constructor() {
- // // 创建axios实例
- // this.axiosInstance = axios.create({timeout: 1000 * 12});
- // // 初始化拦截器
- // this.initInterceptors();
- // }
-
- public static init() {
- // 创建axios实例
- this.axiosInstance = axios.create({
- baseURL: '/api',
- timeout: 6000
- });
- // 初始化拦截器
- this.initInterceptors();
- return axios;
- }
-
- // 为了让http.ts中获取初始化好的axios实例
- // public getInterceptors() {
- // return this.axiosInstance;
- // }
-
-
-
- // 初始化拦截器
- public static initInterceptors() {
- // 设置post请求头
- this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
- /**
- * 请求拦截器
- * 每次请求前,如果存在token则在请求头中携带token
- */
- this.axiosInstance.interceptors.request.use(
- (config: AxiosRequestConfig) => {
-
- // const token = Vue.ls.get(ACCESS_TOKEN)
- // if (token) {
- // config.headers['Authorization'] = 'Bearer ' + token
- // }
-
- // 登录流程控制中,根据本地是否存在token判断用户的登录情况
- // 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
- // 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码
- // if (config.headers.isJwt) {
- const token = localStorage.getItem('ACCESS_TOKEN');
- if (token) {
- config.headers.Authorization = 'Bearer ' + token;
- }
- // }
- return config;
- },
- (error: any) => {
- console.log(error);
- },
- );
-
-
- // 响应拦截器
- this.axiosInstance.interceptors.response.use(
- // 请求成功
- (response: AxiosResponse) => {
- // if (res.headers.authorization) {
- // localStorage.setItem('id_token', res.headers.authorization);
- // } else {
- // if (res.data && res.data.token) {
- // localStorage.setItem('id_token', res.data.token);
- // }
- // }
-
- if (response.status === 200) {
- // return Promise.resolve(response.data);
- return response;
- } else {
- Request.errorHandle(response);
- // return Promise.reject(response.data);
- return response;
- }
- },
- // 请求失败
- (error: any) => {
- const {response} = error;
- if (response) {
- // 请求已发出,但是不在2xx的范围
- Request.errorHandle(response);
- return Promise.reject(response.data);
- } else {
- // 处理断网的情况
- // eg:请求超时或断网时,更新state的network状态
- // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
- // 关于断网组件中的刷新重新获取数据,会在断网组件中说明
- message.warn('网络连接异常,请稍后再试!');
- }
- });
- }
-
-
- /**
- * http握手错误
- * @param res 响应回调,根据不同响应进行不同操作
- */
- private static errorHandle(res: any) {
- // 状态码判断
- switch (res.status) {
- case 401:
- break;
- case 403:
- break;
- case 404:
- message.warn('请求的资源不存在');
- break;
- default:
- message.warn('连接错误');
- }
- }
-
-
- }

3、main.ts中引入axios和request
- import { createApp } from 'vue'
- import App from './App.vue'
-
- import router from './router'
- import store from './store'
-
- import Antd from 'ant-design-vue'
- import 'ant-design-vue/dist/antd.css'
- // import { HttpService } from "@/utils/http";
-
- // import { VueAxios } from './utils/request'
- // import axios from 'axios'
- import { Request } from '@/utils/request';
- import VueAxios from 'vue-axios'
-
-
- const app = createApp(App as any)
- // app.config.productionTip = false
-
- app
- .use(store)
- .use(router)
- .use(Antd)
- .use(VueAxios, Request.init())
- .mount('#app')

4、编写接口
- import { Request } from '@/utils/request';
-
-
- export function login (parameter: any) {
- return Request.axiosInstance({
- url: '/cxLogin',
- method: 'post',
- data: parameter
- })
- }
5、vue文件中使用
- <template>
- <div class="login-container">
- <div class="content">
- <a-card title="欢迎登陆CX工作流设计器" style="width: 100%;height: 100%">
- <a-form :model="loginForm" @submit="handleSubmit"><!--@submit.native.prevent-->
- <a-form-item>
- <a-input v-model:value="loginForm.account" placeholder="account" style="width: 350px" >
- <template #prefix><UserOutlined style="color:rgba(0,0,0,.25)"/></template>
- </a-input>
- </a-form-item>
- <a-form-item>
- <a-input v-model:value="loginForm.password" type="password" placeholder="Password" style="width: 350px">
- <template #prefix><LockOutlined style="color:rgba(0,0,0,.25)"/></template>
- </a-input>
- </a-form-item>
- <a-form-item>
- <a-button type="primary" html-type="submit" :disabled="loginForm.account === '' || loginForm.password === ''" style="width: 350px">
- 登陆
- </a-button>
- </a-form-item>
- </a-form>
- </a-card>
- </div>
- </div>
- </template>
-
- <script lang="ts">
- import '../../reset.less'
- import '../../global.css'
- import { defineComponent, reactive } from "vue";
- import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
- import { login } from '@/api/modular/auth'
-
- import { useRouter } from 'vue-router'
-
- export default defineComponent({
- name: "index",
- components: {
- UserOutlined,
- LockOutlined,
- },
- setup(){
- const loginForm = reactive({
- account: '',
- password:''
- })
- const router = useRouter()
-
- const handleSubmit = (e: Event)=> {
- const param = {
- account: loginForm.account,
- password: loginForm.password
- }
- login(param).then(response => {
- const res: any = response.data
- if(res.code === 200){
- localStorage.setItem('ACCESS_TOKEN', res.data);
- router.push("/flow")
- }
- })
- }
- return{
- loginForm,
- handleSubmit
- }
- }
- })
- </script>
-
- <style lang="less" scoped>
- /* 背景 */
- .login-container {
- position: absolute;
- width: 100%;
- height: 100%;
- background: url("../../assets/cool-background.png");
- .content {
- position: absolute;
- width:400px;
- height:300px;
- left:50%;
- top:50%;
- margin-left:-200px;
- margin-top:-150px;
-
- border-radius: 10px;
- background: #f6efef;
- box-shadow: 5px 5px 10px #626060,
- -2px -2px 2px #de18ff;
- }
- }
-
-
- </style>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。