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

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