项目地址
编写项目模块前端
今天主要做的是平台主页，和项目模块界面的编写，大概展示如下图：
由于前端笔者是纯自学的，所以大家看看就好，有一部分源码也是用的大神开源项目，（主要只是给一个展现和交互方式的参考，欢迎大家提出更多的想法=-=）
封装axios
import axios from "axios";
import router from "@/router";
import { Message } from 'element-ui'
export const requests = axios.create({
baseURL: "http://127.0.0.1:8000/api",
timeout: 30000,
responseType: "json",
withCredentials: true,
headers: {
"content-type": "application/json;charset=UTF-8",
},
});
requests.interceptors.request.use(config => {
config.headers = { AUTHORIZATION: localStorage.getItem('token') }
return config
},
(error) => {
return Promise.reject(error)
});
requests.interceptors.response.use(
(response) => {
return response
},
async (error) => {// Message.error('报错了')
if (error.response.status == 401) {
router.app.$router.push({ path: '/login' })
}}
);
export function get(url, params) {
console.log(url, params)
return new Promise((resolve, reject) => {
requests
.get(url, {
params: params,
})
.then((res) => checkLogin(res))
.then((res) => {
resolve(res)
})
.catch((err) => {
reject(err)
})
})
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
requests
.post(url, params, {
headers: {
'Content-Type': 'application/json',
},
})
.then((res) => {
if (res.data["code"] == 400 || res.data["code"] == 401 ) {
Message.error(res.data['message'])
}
else if (res.data["code"] == 200){
Message.success(res.data['message'])
}
resolve(res)
})
.catch((err) => {
reject(err)
})
})
}
export function put(url, params) {
console.log(url, params)
return new Promise((resolve, reject) => {
requests
.put(url, params, {
headers: {
'Content-Type': 'application/json',
},
})
.then((res) => {
if (res.data['code'] == 400) {
Message.error(res.data['message'])
}
resolve(res)
})
.catch((err) => {
console.log(err)
reject(err)
})
})
}
编写router文件
import Vue from "vue";
import VueRouter from "vue-router";
import home from "@/views/home/HomeView";
import index from "@/views/home/index";
import workbench from "@/views/workbench/Workbench"
import datafactory from "@/views/datafactory/index"
import ProjectManage from "@/views/datafactory/ProjectManage";
import {getUserinfo} from "@/http/api/home/api";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "root",
meta: {
requireAuth: true,
},
component: index,
redirect: "home",
children: [
{
path:"home",
name:"home",
component:home
},
{
path: "datafactory",
name: "datafactory",
meta: {
title: "数据工厂",
},
component: datafactory,
redirect: "datafactory/projectmanage",
children: [
{
path: '/datafactory/projectmanage',
name: 'datafactory.projectmanage',
meta: {
title: '项目管理'
},
component: () => import('@/views/datafactory/ProjectManage.vue')
},
]
},
{
path: "workbench",
name: "workbench",
meta: {
title: "工作台",
},
component: workbench,
// redirect: "workbench",
},
],
},
];
const router = new VueRouter({
routes,
});
router.beforeEach((to, from, next) => {
if (to.matched.some(auth => auth.meta.requireAuth)) {
let token = localStorage.getItem("token");
if (token) {
getUserinfo().then(()=>{
console.log('11')
},
(error) =>{
// console.log(Object.keys(error));
console.log(1)
console.log(error)
})
next();
} else {
next({
path: "/login",
});
}
} else {
next();
}
});
export default router;
home页面
<template>
<div class="app-container">
<div class="header">
<router-link :to="{ name: 'home' }" class="logo">
<span>CDPT</span>
</router-link>\
<ul class="header-nav">
<router-link
tag="li"
v-for="module in moduleList"
:key="module.id"
:to="{ name: module.id }"
:class="{ current: currentActive(module.id) }"
>
<span>{{ module.name }}</span>
</router-link>
</ul>
</div>
<el-main class="el-main">
<router-view></router-view>
</el-main>
</div>
</template>
<script>
import {getUserinfo} from "@/http/api/home/api";
export default {
data() {
return {
loading: false,
moduleList: [{id:'workbench',name:'工作台'},{id:'datafactory',name:'数据工厂'}],
};
},
methods: {
currentActive(id = "") {
return this.$route.path.split("/")[1] === id;
},
initmodule() {
const moduleArr = JSON.parse(localStorage.getItem("moduleMenus") || "[]");
if (!moduleArr.length) {
this.$notifyMessage("无菜单权限");
this.$router.push("/login");
return;
}
let moduleList = [];
moduleArr.forEach(item => {
let a = 1;
if (a==1) {
moduleList.push(item);
}
});
this.moduleList = moduleList;
if (!moduleList.length) {
this.$notifyMessage("无可访问菜单");
this.$router.push("/login");
}
},
UserInfo(){
getUserinfo().then((res)=>{
console.log(res)
},
(error) =>{
// console.log(Object.keys(error));
console.log(1)
console.log(error)
})
},
logout() {
let loginInfo = localStorage.getItem("loginInfo");
let oldLoginTime = localStorage.getItem("loginTime");
localStorage.clear();
if (oldLoginTime) {
localStorage.setItem("loginTime", new Date().getTime().toLocaleString());
}
if (loginInfo) {
loginInfo = JSON.parse(loginInfo);
loginInfo.userPWD = "";
localStorage.setItem("loginInfo", JSON.stringify(loginInfo));
}
this.$router.push("/login");
},
},
mounted() {
let _this = this;
window.addEventListener("resize", _this.$resize, true);
},
beforeDestroy() {
window.removeEventListener("resize", this.$resize);
},
};
</script>
然后还有封装的侧边栏和导航栏，这里就不贴了，可以直接在gitee里自取哈
【觉得有用就请给我点赞吧~】
