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


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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章