YEB前端

最新推荐文章于 2025-03-17 15:07:37 发布

爱打瞌睡沐小白

最新推荐文章于 2025-03-17 15:07:37 发布

阅读量941

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_44194174/article/details/121952379

版权

YEB

用管理员的方式打开命令行在cd需要创建的文件夹

vue create yeb

打开elementui的官网导入elementui
点快速上手

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

打开App.vue删除多余的代码和组件
新建一个Login.vue项目，添加路由到index.js中

import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },

安装ajax开发依赖

npm install axios

在src下新建util包，新建api.js

import axios from 'axios'
import {Message} from 'element-ui';
import router from '../router'
//定义一个响应拦截器
axios.interceptors.response.use(success => {
        // 业务逻辑错误
        if (success.status && success.status == 200) {
            if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
                Message.error({message: success.data.message});
                return;
            }
            if (success.data.message) {
                Message.success({message: success.data.message});
            }
            return success.data;
        }
    },
    error => {
        if (error.response.code == 504 || error.response.code == 404) {
            Message.error({message: '服务器被吃了：_ ：'});
        } else if (error.response.code == 403) {
            Message.error({message: '权限不足，请申请访问权限'});
        } else if (error.response.code == 401) {
            Message.error({message: '为登录'});
            router.replace('/');
        } else {
            if (error.response.data.message) {
                Message.error({message: error.response.data.message});
            } else {
                Message.error({message: '未知错误！'});
            }
        }
        return;
    });
let base = '';
//定义一个post请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params
    })
}