Vue+ElementUI 搭建后台管理系统(实战系列二)

简介: Vue+ElementUI 搭建后台管理系统(实战系列二)

这是我参与8月更文挑战的第2天,活动详情查看: 8月更文挑战

前言

使用ElementUI已经有一段时间了,在一边上手开发后台管理系统的同事,也记录了一些笔记,一直都没有时间将这些零零散散的笔记总结起来,整理成一个比较系统详细一点的教程,可以留着以后来看,正好在掘金上看到了关于8月更文挑战 的活动,看完我心动了,决定花一些时间和精力来参加这次的比较有意义的活动。


关于开发过程中,确实使用到很大一部分的文档,都说前端开发离不开文档,重要的话说三遍,一定要多看文档。

管理后台解决方案

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看一下,这里就获取到值了

接下来,就可以将获取到的值,赋值给所需要的参数了~~

相关文章
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
14 3
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
8 1
|
2天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 0
|
JavaScript
Vue:ElementUI常用组件
Vue:ElementUI常用组件
116 0
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0
|
2天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
2天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据