vue-element-admin 入门-1

1.目录结构

├── build                      
├── mock                       # 项目mock 模拟数据
├── plop-templates            
├── public                     # 静态资源
│   │── favicon.ico            
│   └── index.html            
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets              
│   ├── components          
│   ├── directive          
│   ├── filters              
│   ├── icons                
│   ├── lang                  
│   ├── layout                 
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  
│   ├── vendor                 
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          
├── tests                      
├── .env.xxx                   
├── .eslintrc.js               
├── .babelrc                  
├── .travis.yml                
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          
└── package.json               

2.安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 安装依赖
npm install

# 本地开发 启动项目
npm run dev

完成后

 

3.  登录功能

从上文的目录结构中可以得知所有页面相关的文件在 src/views 文件夹中，既然是登入页面，所以就在login文件夹中

本页面中-登录按钮

 @click.native.prevent="handleLogin"，找到点击后触发的“handleLogin”函数，来看一下都做了哪些事

 出现this.$store，我们去找到该目录（src/store/modules/）下user.js文件

 接着我们来看一下这个文件

 可见其调用了login方法，然后ctrl+左击

 此处为经过修改后的，请求的url，以及携带的数据。

返回为request，进入根据后端修改res.code !== 200

 接着我们回到登录页，可以发现username会有一个校验，接着我们ctrl+左键@/utils/validate，进入utils/validate

 我们可以发现 const valid_map = ['admin', 'editor']，此list便是username的校验

 接着我们将valid_map = ['admin', 'editor']提出，并给其一个set方法

 接着我们在api/user下编写获取valid_map的接口。

接着在src/store/modules/user.js文件中编写getusernames（）方法，发送请求，获取valid_map，并通过set方法进行赋值

 接着我们回到登录页，在mounted（）中调用刚编写好的getusernames（）方法即可。到此登录基本实现，最后我们进行配置的修改。 

在此文件下设置后端接口ip，生效需要重启服务。

我们可以发现目前项目并没有后端却可以发送数据，是因为配置文件里，返回了mock文件夹中的假数据，我们把他注释掉

后端返回格式

例如：

登录——我的后端返回：

{"code": 200, "msg": "登陆成功", "data": SaTokenInfo [tokenName=satoken, tokenValue=de0650d9-8e86-4cc6-9b79-850541fc50ac, isLogin=true, loginId=admins, loginType=login, tokenTimeout=2592000, sessionTimeout=2591999, tokenSessionTimeout=-2, tokenActivityTimeout=-1, loginDevice=default-device, tag=null]}

 前端将token存储。

获取用户信息的返回格式。

运行

 

 4.登出功能

 检查元素找到LogOut

 其调用了logout方法

 找到logout方法，其中调用logout方法

 进入logout方法请求后端实现登出