企业网盘项目

###网盘项目介绍

您好，我给你介绍一下我最近做的一个项目，是我们公司内部的，类似一个百度网盘的产品， 它主要是使用vue框架结合ivew
ui和boostrap实现页面布局及功能，用到的技术还有vuex
v-router,axios,本地存储,是俩个人共同开发的，用到的版本控制工具是git和gitlab
项目前期我主要负责项目的搭建、路由的配置、接口的封装、跨域配置、公共方法的封装,以及常用功能组件的封装.
我参与的模块主要是页面布局以及登录注册，主页的增删改查。
我负责开发的功能有登录功能、注册功能、页面的权限校验、token的发送、登录的过期处理、文件上传功能、
获取文件列表功能、新建文件夹功能、批量删除、搜索文件、下载文成、生成分享链接、图片预览…
我平时学习的一些地方：csdn,掘金，知乎，是否，github,码云

每个功能点的实现思路

一.注册功能实现

1. 点击注册按钮	
2. 获取文本框输入的数据	
3. 判断输入的密码和确认的密码是否一致	
4. 可选(使用md5对密码进行加密)	
5. 调用注册接口,将文本框输入的数据通过注册接口发送给后台	
6. 如果注册成功,判断后台返回的状态码是否为200,后台会返回成功的状态码和成功的数据信息	
	6.1 通过message提示框弹出一个提示,内容为注册成功		
	6.2 切换到登录界面	
7. 如果注册失败,后台会返回失败的状态和失败的数据信息	
	7.1 根据对用状态码和对应的数据信息给用户进行不同的提示

二.登录功能实现

1. 点击登录按钮	
2. 通过iview的form表单的rules验证规则判断输入的用户名和密码是否符合输入的要求	
3. 获取输入的用户名和密码 	 
4. 调用登录接口,将获取到的用户名和密码发送给后台	
5. 根据后台返回的状态码和数据进行下一步逻辑处理
   >如果状态码为200的话通过message提示用户登陆成功, 跳转首页
   >如果状态码不为200的话,通过catch捕获错误,通过message提示错误信息

三。退出登录

1. 点击退出登录按钮,执行退出登录的方法
	
	2. 在退出登录方法里面调用vuex中的退出登录方法
	
	3. 在vuex定义退出登录方法,调用退出登录接口
	
	4. 当退出登录成功时,清除本地的token和用户信息,以及state里面的用户信息和token
	
	5. 通过promise将退出登录的数据返回给退出登录按钮执行的方法
	
	6. 在退出登录方法里面判断返回的数据msg是否为ok
	
	7. 如果为ok的则表示退出登录成功,跳转到登录页

1.给退出按钮绑定事件

vuex中actions写退出方法，调用mutations中的userLogout()方法
  logout(store){
   
        	  return new Promise((resolve,reject)=>{
   
            userLogout().then(res=>{
                 
              store.commit('userLogout')
              resolve(res)
            }).catch((error)=>{
   
              reject(error.response)
            })
          })
        }

// 清除用户状态

   userLogout(state){
   
      state.user=null
      state.token = null
      window.localStorage.removeItem('user')
      window.localStorage.removeItem('token')
    }

页面调用vuex中的logout方法

 logout(){
     
      this.$store.dispatch('logout').then(res =>{
   
        this.$Message.success('退出成功');   
        this.$router.push('/login')
      }, err => {
   
        console.log(err)
      })
      
    }

###vuex存储用户信息

1.使用changeUser() 存储用户信息
 changeUser(state,layout){
   
      state.user