搭建一个nodejs+vue+element后台管理系统——项目初始化

123 阅读3分钟

1.前言

主要是年纪大了,想整理下这些年学到的东西,另外现在大部分东西都是重复开发,所以想着总结下,避免重复造轮子。

2.技术选型

目前选择nodejs+vue2+elementui,因为这几个比较常用,nodejs作为后端技术省去了学习java的精力,选择vue2是因为vue3虽然学习了,但是公司技术仍旧使用vue2,本身也是vue2更加熟悉,elementui属于开源且比较大众的组件库,方便二次开发。

3.前缀说明

本系列适合有一定的前端基础且学过nodejs+vue+elementui的,不会做过多详细说明。

4.项目初始化

4.1前端项目初始化

1. 先根据vue-cli的官网,安装vue-cli,即执行:`npm install @vue/cli -g`2. 通过vue-cli一键生成前端vue项目,即执行:`vue create`然后一项项配置选择。或者执行`vue ui`进行可视化的配置。
3. 配置完成,启动项目,即执行:`npm run serve`.
4. 安装elementui
5. 安装axios

4.1.1管理系统外壳

在web/src/components/MainContent/ 新建一个MainContent.vue文件,用作外壳,展示左侧菜单栏,顶部用户状态,菜单栏,代码如下:

<template>
  <div>
    <div>菜单</div>
    <div>导航栏</div>
    <div>
      <!-- 这里展示点击菜单后展示的内容 -->
      <router-view/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MainContent"
  }
</script>

对了,这里再贴一下主入口的web/src/App.vue的代码:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

然后在web/src/router/routes.js中,设置如下代码(代码中带@和@c的,不理解的见 4.1.2):

import MainContent from '@c/MainContent/MainContent.vue' // 主容器,外壳就是它,包含菜单、用户栏、导航栏等。

const routes = [
  {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录',
      hideMenu: true
    },
    component: () => import('@/views/login/login.vue')
  },
  {
    path: '/',
    name: '_home',
    redirect: '/home',
    component: MainContent,
    meta: {
      hideMenu: true,
      notCache: true
    },
    children: [
      {
        path: '/home',
        name: 'home',
        meta: {
          hideMenu: true,
          title: '首页',
          notCache: true,
          icon: ''
        },
        component: () => import('@/views/home/home.vue')
      }
    ],
  }
]

export default routes

这样我们就得到了一个管理系统的首页:

image.png

4.1.2路径别名

这里说明下,路径中带@或者@c,这个是在web/vue.config.js文件中设置了路径别名:

/**
 * 引入路径模块
 * resolve 方法:用于获取路径
 * */
const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
module.exports = defineConfig({
  ...,
  chainWebpack: config => {
    // 别名设置
    config.resolve.alias.set('@', resolve('src')).set('@c', resolve('src/components'))
  }
})

4.1.3配置登录页,以及路由跳转拦截

登录页首先在web/src/router/routes.js中配置下登录页,上面已经发过代码了。简单做个表单+按钮,点击按钮登录跳转到主页,通过this.$router.push('/home')跳转,此时需要避免没有登录就进入需要登录权限的页面,所以我们需要路由拦截(注意,所有前端拦截都不是绝对安全的,所以所有接口都需进行二次验证),跳转前先将用户名存到session中简单做下token,后续后端服务构建完毕改为后端往前端塞cookie,从cookie中取。 路由拦截我们放在web/src/router/index.js中,通过vue-router插件的路由守卫进行拦截:

router.beforeEach((to, from, next) => {
  // 全局加载动画
  const loading = Loading.service({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  const token = getSession('token') // 这里先从session中取token,后续会改为取cookie
  if (!token && to.name !== 'login') {
    // 未登录 且 跳转的页面非登录页,需重新跳转到登录页
    next({ name: 'login' })
  } else if (!token && to.name === 'login') {
    // 未登录 且 跳转的页面是登录页,直接跳转
    next()
  } else if (token && to.name === 'login') {
    // 已登录 且 跳转的页面是登录页,需重新跳转到首页
    next({ name: 'home' })
  } else {
    // 菜单权限控制先不做,仅做登录控制,后续做了菜单再做菜单权限控制
    next()
  }
  loading.close()
})

设置完成后,自测下,将路径改为 http://localhost:8081/#/home ,跳转不过去,ok,然后点击登录,正常跳转。

4.1.4设计菜单

10月27日前更新

4.2后端项目初始化

更新中。。。(日期待定)