教学平台前端配置总结（基于Quasar）

教学平台前端总结（基于Quasar）

Utils工具

//auth
import { Cookies } from 'quasar'

const TokenKey = 'jxpt_token'
//获得Token
export function getToken () {
  return Cookies.get(TokenKey) || ''
}
//设置Token
export function setToken (token) {
  Cookies.set(TokenKey, token, {path: "/"})
}
//移除Token
export function removeToken () {
  Cookies.remove(TokenKey, {path: "/"})
}


//get-page-title
const title = '教学平台'

export default function getPageTitle (pageTitle) {
  if (pageTitle) {
    return `${pageTitle} | ${title}`
  }
  return `${title}`
}

axios配置

import axios from "axios";
import { getToken, removeToken } from "src/utils/auth";
import { Notify } from "quasar";

export const request = axios.create({
  baseURL: "http://localhost:8090",
  timeout: 50000
});
//响应拦截器  Response interceptor
export default ({ app, router, store }) => {
  request.interceptors.response.use(
    res => {
      return res;
    },
    err => {
      if (err.response.status === 401) {
        Notify.create({
          message: err.response.data.msg,
          type: "negative",
          position: "center"
        });
        removeToken();
        router.push("/login");
      } else if (err.response.status === 500) {
        Notify.create({
          message: "服务器异常，请稍后再试",
          color: "red",
          icon: "error",
          position: "center"
        });
      } else {
        // removeToken();
        // router.push("/login");
      }

      return Promise.reject(err);
    }
  );

  // 请求拦截器 Request interceptor
  request.interceptors.request.use(
    config => {
      // do something before request is sent
      if (store.getters["user/token"]) {
        // let each request carry token
        config.headers.Authorization = "Bearer " + getToken() || "";
      }
      return config;
    },
    error => {
      // do something with request error
      console.log(error); // for debug
      return Promise.reject(error);
    }
  );
};

permission配置

import getPageTitle from "src/utils/get-page-title";
import { getToken, removeToken } from "src/utils/auth";
import { LoadingBar, Notify } from "quasar";

//导航守卫
export default ({ router, store }) => {
  router.beforeEach(async (to, from, next) => {
    LoadingBar.start();
    document.title = getPageTitle(to.meta.title);
    const hasToken = getToken();
    if (hasToken) {
      await store.dispatch("user/getUserInfo");
      const userType = store.getters["user/type"];
      if (to.path === "/login" || to.path === '/') {
        next({ path: `/${userType}/dashboard` });
        LoadingBar.stop();
      } else {
        if (userType == to.meta.type) {
          next();
          LoadingBar.stop();
        } else {
          Notify.create({
            message: "无权限",
            color: "red",
            icon: "error",
            position: "center"
          });
        }
      }
    } else {
      if (!to.meta.isPublic) {
        next({ path: "/login", query: { redirect: to.fullPath } });
        LoadingBar.stop();
      } else {
        next();
        LoadingBar.stop();
      }
    }
  });
  router.afterEach(() => {
    LoadingBar.stop();
  });
};

router

import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

export default function (/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
}


// ./routes文件
const routes = [
  {
    path: "/login",
    component: () => import("pages/login.vue"),
    meta: { isPublic: true, title: "登录" }
  },
  {
    path: "/admin",
    component: () => import("layouts/AdminLayout.vue"),
    children: [
      {
        path: "dashboard",
        component: () => import("pages/admin/dashboard.vue"),
        meta: { type: "admin", title: "Dashboard" }
      },
    ]
  },
  {
    path: "/tea",
    component: () => import("layouts/TeacherLayout.vue"),
    children: [
      {
        path: "dashboard",
        component: () => import("pages/teacher/dashboard.vue"),
        meta: { type: "tea", title: "Dashboard" }
      }
    ]
  },
  {
    path: "/stu",
    component: () => import("layouts/StudentLayout.vue"),
    children: [
      {
        path: "dashboard",
        component: () => import("pages/student/dashboard.vue"),
        meta: { type: "stu", title: "Dashboard"}
      }
    ]
  }
];

// Always leave this as last one
if (process.env.MODE !== "ssr") {
  routes.push({
    path: "*",
    component: () => import("pages/Error404.vue")
  });
}

export default routes;

增删改查接口

import { request } from "../../boot/axios";

// 获取当前学期的课程列表
export function getCourseList() {
  return request({
    url: "/admin/courses",
    method: "get",
  });
}
const { data } = await getCourseList();
// 更新课程
export function updateCourse(data) {
  return request({
    url: "/admin/courses",
    method: "put",
    data
  });
}
await updateCourse( name: this.currCourseDetails.name);

// 创建课程
export function createCourse(data) {
  return request({
    url: "/admin/courses",
    method: "post",
    data
  });
}
 await createCourse( name: this.currCourseDetails.name);

// 删除课程
export function deleteCourse(course_id) {
  return request({
    url: "/admin/courses",
    method: "delete",
    params: {
      id: course_id
    }
  });
}
await deleteCourse(course.id);

结语

如果你发现文章有什么问题，欢迎留言指正。
如果你觉得这篇文章还可以，别忘记点个赞加个关注再走哦。
如果你不嫌弃，还可以关注微信公众号———梦码城（持续更新中）。
梦码在这里感激不尽！！