Vue+ElementUI 搭建后台管理系统(实战系列二)
前言
使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看。
关于开发过程中,确实使用到很大一部分的文档,都说前端开发离不开文档,重要的话说三遍,一定要多看文档。
管理后台解决方案
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。
Star指数:69.7k Github 地址:https://github.com/PanJiaChen/vue-element-admin Demo体验:https://panjiachen.github.io/vue-element-admin/#/dashboard 官方文档:https://panjiachen.github.io/vue-element-admin-site/zh/
使用建议 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
推荐使用,简化版
使用一下饿了么简化版后台管理系统-eladmin-web Github地址:https://github.com/elunez/eladmin-web
Vue+ElementUI 搭建后台管理系统(实战系列二)- 登录功能
上一篇里面已经搭建好了开发环境,今天就开始做一个简单的功能,在原有的基础上进行登录功能的修改。
在项目上,只需要使用用户名和密码的时候,我将之前的验证码模块都进行了删除了。
关于代理的配置
打开vue.config.js文件进行配置
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
'^/api': 'api'
}
},
'/check': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
'^/check': 'check'
}
}
}
再查看一下.env.development
文件(开发环境)和.env.production
文件(生产环境),并且进行配置。
这里多嘴一句,关于几个环境百度解释如下:
开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告。
测试环境:一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发布到生产机上。
生产环境:是指正式提供对外服务的,一般会关掉错误报告,打开错误日志。
三个环境也可以说是系统开发的三个阶段:开发->测试->上线,其中生产环境也就是通常说的真实环境。
通俗一点就是:
1:开发环境:项目尚且在编码阶段,我们的代码一般在开发环境中 不会在生产环境中,生产环境组成:操作系统 ,web服务器 ,语言环境。 php 。 数据库 。 等等
2:测试环境:项目完成测试,修改bug阶段
3:生产环境:项目数据前端后台已经跑通,部署在阿里云上之后,有客户使用,访问,就是网站正式运行了
不管是在开发环境,还是在生产环境里面,代理路径需要统一一下,VUE_APP_BASE_API
路径需要和以上的代理路径保持一致,千万不要拼错了哦。
关于 vue sessionStorage存值取值问题
定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
保存数据语法:
sessionStorage.setItem("key", "value");
读取数据语法:
var lastname = sessionStorage.getItem("key");
功能要求:
1:在调用登录接口的时候,请求登录接口成功,登录系统,将获取到的Response里面的返回值存到浏览器
2:在使用某个组件的时候,例如使用test.vue的时候,需要获取到浏览器里面存的值,拿出来使用。
步骤 1:我这里使用的是vue-element-admin后台管理系统的框架,打开登录界面login.vue,查看登录接口调用的位置的代码,可以看到,请求成功之后,要求将以下返回值的数据都保存起来。
//存起来
sessionStorage.setItem("userInfo", JSON.stringify(res.data))
这个时候,可以打开浏览器,查看数据有没有保存在浏览器里面,选择Application,点击session Storage,可以看到login登录接口的返回值已经存储到浏览器了,接下来就从浏览器取值了。
2:获取 打开test.vue组件,在需要使用到返回值的位置写获取sessionStorage值的代码
//取出来sessionStorage的值
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
debugger看一下,这里就获取到值了
接下来,就可以将获取到的值,赋值给所需要的参数了~~
相关文章
- 从本体论开始说起——运营商关系图谱的构建及应用
- 如何成为一名数据科学家?
- 从未见过的堂兄杀了人,你的DNA是关键证据
- 20个安全可靠的免费数据源,各领域数据任你挑
- 20个安全可靠的免费数据源,各领域数据任你挑
- 阿里云李飞飞:All in Cloud时代,云原生数据库优势明显
- 基于Hadoop生态系统的一高性能数据存储格式CarbonData(性能篇)
- 大数据告诉你:10年漫威,到底有多少角色
- TigerGraph:实时图数据库助力金融风控升级
- Splunk利用Splunk Connected Experiences和Splunk Business Flow 扩大数据访问
- 大数据开发常见的9种数据分析手段
- 以免在景区看人,我爬了5W条全国景点门票数据...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
- 数据科学家告诉你哪些计算机科学书籍是你应该看的
- Kafka作为大数据的核心技术,你了解多少?
- Spring Boot 整合 Redis 实现缓存操作
- 大数据学习必须掌握的五大核心技术有哪些?
- 基于Antlr在Apache Flink中实现监控规则DSL化的探索实践
- 甲骨文再次被Gartner评为分析型数据管理解决方案魔力象限领导者
- 爬取吴亦凡微博102118条转发数据,扒一扒流量的真假