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
这样我们就得到了一个管理系统的首页:
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后端项目初始化
更新中。。。(日期待定)