利用vue全家桶以及Echarts.js实现管理系统的前端页面,后端服务器利用Node.js中Express.js来实现。
上图:
用户登录界面
用户注册界面
其他界面
这里使用了elementUI的Container布局容器
<el-container> <el-aside width="200px">左侧</el-aside> <el-container> <el-header>顶部</el-header> <el-main>内容</el-main> <!-- <router-view />我这里使用的是路由--> </el-container> </el-container> 路由配置文件 import Vue from 'vue' import Router from 'vue-router' //异步加载组件 const Home = () => import('@/components/Home'); const Echarts = () => import('@/components/Echarts'); const Login = () => import('@/components/Login'); const Register = () => import('@/components/Register'); Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'Login', component: Login }, { path: '/Register', name: 'Register', component: Register }, { path: '/Home', component: Home, children: [ { path: '/Echarts', name: 'Echarts', component: Echarts, meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 } } ] }, ] }) router.beforeEach((to, from, next) => { let islogin = sessionStorage.getItem("isLogin"); islogin = Boolean(Number(islogin));//返回布尔值 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (islogin) { //true next(); } else { next({ path: '/', }) } } else { next(); } }); export default router