基于Vue和Node的管理系统

简介: 基于Vue和Node的管理系统

利用vue全家桶以及Echarts.js实现管理系统的前端页面,后端服务器利用Node.js中Express.js来实现。


上图:


用户登录界面

image.png


用户注册界面

image.png


其他界面


image.png

image.png


这里使用了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


相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
72 3
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
31 4
|
3月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
49 1
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
|
2月前
|
缓存 JSON JavaScript
Node.js模块系统
10月更文挑战第4天
41 2
|
2月前
|
Web App开发 JavaScript API
构建高效后端系统:Node.js与Express框架的实践之路
【9月更文挑战第37天】在数字化时代的浪潮中,后端开发作为技术架构的核心,承载着数据处理和业务逻辑的重要职责。本文将深入探讨如何利用Node.js及其强大的Express框架来搭建一个高效、可扩展的后端系统。我们将从基础概念讲起,逐步引导读者理解并实践如何设计、开发和维护一个高性能的后端服务。通过实际代码示例和清晰的步骤说明,本文旨在为初学者和有经验的开发者提供一个全面的指南,帮助他们在后端开发的旅途上走得更远。
50 3
|
2月前
|
运维 JavaScript Linux
容器内的Nodejs应用如何获取宿主机的基础信息-系统、内存、cpu、启动时间,以及一个df -h的坑
本文介绍了如何在Docker容器内的Node.js应用中获取宿主机的基础信息,包括系统信息、内存使用情况、磁盘空间和启动时间等。核心思路是将宿主机的根目录挂载到容器,但需注意权限和安全问题。文章还提到了使用`df -P`替代`df -h`以获得一致性输出,避免解析错误。
|
3月前
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
566 0
宝塔面板部署Vue项目、服务端Node___配置域名
|
3月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
63 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
4月前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
257 1
|
4月前
|
JavaScript
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
这篇文章介绍了在Vue项目中安装node-sass和sass-loader时遇到的版本冲突问题,并提供了解决这些问题的方法,包括在不降低node版本的情况下成功安装node-sass。
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题