赞
踩
vue2从0到1搭建一个后台管理系统
项目启动:
npm run serve
vue.config.js 文件
(process.env.NODE_ENV 配置在后面 )
lintOnSave:process.env.NODE_ENV === 'development',
.eslintignore 文件
(ESLint配置文件)
.eslintrc.js 文件
(ESLint忽略配置)
配置基本信息
代理转发
webpack打包处理
信息包括:
# 页面标题
VUE_APP_TITLE = '标题'
# 开发环境配置
ENV = 'development'
# 开发环境
VUE_APP_BASE_API = 'base地址'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 后端接口地址
VUE_APP_SERVER_API_URL = '后端地址'
# Mqtt消息服务器连接地址
VUE_APP_MQTT_SERVER_URL = 'Mqtt消息服务器连接地址'
# 百度地图AK
VUE_APP_BAI_DU_AK = '你的百度地图AK'
为什么强转到首页而不是登录页?
假设:用户已经登录然后重新输入网址,这时候应该跳转到登录还是首页?
当然是首页,那判断用户登录状态这一步怎么实现?
后续全局设置,利用路由拦截器,在路由跳转前判断用户登录状态(利用token),如果有token就代表用户登录成功并跳转到目标地址,如果没有就强转到登录页面。
因为是练习项目,所以就不细扣样式问题喽!
写这篇的主要目的还是在于梳理项目搭建的思路 and 整理一个后台管理的基础模板方便以后起项目的时候可以快速使用
效果:
代码:
关键代码:
- watch: {
- $route: {
- handler: function(route) {
- this.redirect = route.query && route.query.redirect
- },
- immediate: true,
- },
- },
- created() {
- this.getCookie()
- },
- methods: {
- getCookie() {
- const username = Cookies.get('username')
- const password = Cookies.get('password')
- const rememberMe = Cookies.get('rememberMe')
- this.loginForm = {
- username: username === undefined ? this.loginForm.username : username,
- password: password === undefined ? this.loginForm.password : decrypt(password),
- rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
- }
- },
- //密码icon
- changeIcon() {
- this.password = !this.password
- },
- //登录
- handleLogin() {
- this.$refs.loginForm.validate((valid) => {
- if (valid) {
- this.loading = true
- //记住我
- if (this.loginForm.rememberMe) {
- Cookies.set('username', this.loginForm.username, {
- expires: 30,
- })
- Cookies.set('password', encrypt(this.loginForm.password), {
- expires: 30,
- })
- Cookies.set('rememberMe', this.loginForm.rememberMe, {
- expires: 30,
- })
- } else {
- Cookies.remove('username')
- Cookies.remove('password')
- Cookies.remove('rememberMe')
- }
- // 占位(一会用dispatch处理)
-
- }
- })
- },
- }
首页需要和 Layout 结合
开发顺序问题
(个人想先把项目配置,比如请求封装,路由拦截等搞完再进行Layout搭建)
所以后续再操作
(Layout组件封装、路由拦截器、用户权限)
#占位
写完下一篇更新
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。