文章目录

• 前言(很重要哦)
• 一、概念和技术总结(重点，一定要搞懂)
• • 1. vue
  • 2. vue-admin-template模板文件解析
  • 3. 异步相关，前后端交互
  • 4. 导航守卫
• 二、单点登录实现
• • 1. 后端接口和响应结果分析
  • 2. 解决跨域，以及请求头.几乎所有项目都需要的配置，背下来吧。
  • 3. 验证码展示
  • 4. 单点登录，退出登录，根据后端API实现
  • • 1. api接口
    • 2. 路由组件编写登录函数逻辑
    • 3. 修改store（vuex）异步逻辑
• 三、后台管理系统实现

前言(很重要哦)

3. 如果你GitHub进不去，可以到这里下载（码云）：https://gitee.com/panjiachen/vue-admin-template.git

一、概念和技术总结(重点，一定要搞懂)

1. vue

2. 自定义事件：适用于子组件给父组件传递数据， $ on、和$ emit
3. 全局事件总线$bus：适用于任何场景，Vue.prototype. $bus = this;
4. pubsub-js发布和订阅：适用于任何场景，但是Vue用的不多，一般React框架经常使用
5. Vuex：适用于任何场景，用的非常多
6. solt插槽：使用于针对结构（标签）的父子组件通信，常用的有默认插槽，具名插槽和作用域插槽

2. vue-admin-template模板文件解析

build 
	--index.js webpack配置文件[我们基本不用修改]
mock
	--mock数据文件夹[模拟一些假数据，mock.js实现]，我们已经有后端和接口，基本不需要它
node_modules
	--项目依赖的模块
p ublic
	--存放ico图标，静态页面等静态资源，webpack打包时，不会编译此文件夹，原封不动打包到dist文件夹
src --我们写代码的地方
	--api文件夹：异步请求相关代码
	--assets文件夹：静态资源，一般是共享的，但是这里的静态资源，webpack打包是会编译
	--components文件夹：全局组件（非路由组件）
	--icons文件夹：svg矢量图
	--layout文件夹：放置一些组件和混入mixin
	--router文件夹：与路由相关的
	--store文件夹：vuex相关的
	--style文件夹：样式相关的
	--utils文件夹：工具类，其中request.js是axios的二次封装，比较常用
	--views文件夹：路由组件（不是全局组件）
App.vue
	--根组件
main.js
	--入口文件
permission.js
	--导航守卫，主要控制登录等相关事务
settings
	--对于项目的配置项（面向展示层），比如我们浏览器标签title显示什么，表头是否固定，导航栏logo是否显示

--剩下都是配置文件
.editorconfig
	--编程风格配置，比如缩进统一2个空格
-- 很重要的3个配置文件，可以通过webpack对外暴露的函数process获取
.env.development
	-- 开发环境的配置文件
.env.production
	-- 上线环境的配置文件
.env.staging
	-- 测试环境的配置文件

-- 重要但又不重要的3个配置文件
.eslintignore
	-- eslint检测的忽略文件，对于这些文件它会忽略，和我们没关系，我们压根不用eslint检测
.eslintrc.js
	-- eslint配置文件
.gitignore
	-- 只和作者有关系，上传git的忽略文件

-- 不常用的配置文件
.travis.yml
	-- 一些语言，开发版本的配置文件
babel.config.js
	-- babel的配置文件，常用于配置按需加载，比如element ui 按需加载
jest.config.js
	-- 测试框架的配置文件
LICENSE
	-- 版权声明的文件
-- 重点配置文件
jsconfig.json
	-- 配置src别名的文件
package.json
	-- 配置项目信息，运行参数，需要的依赖
postcss.config.js
	-- css配置文件，不同浏览器的兼容问题，可以在这里解决
vue.config.js
	-- 可以当成webpack.config.js，做代理等操作，我们经常使用这个文件

console.log(process)
console.log(process.env)

//lambda一个参数的表示形式, 我们传递的参数就是a，箭头后面是执行逻辑
a =>  return a;

3. 异步相关，前后端交互

4. 导航守卫

二、单点登录实现

1. 后端接口和响应结果分析

2. 解决跨域，以及请求头.几乎所有项目都需要的配置，背下来吧。

    //配置代理跨域
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8001`, //修改后台接口地址
        // changeOrigin: true,
        pathRewrite: {
          ['^'+process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['authorization'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

3. 验证码展示

export function captcha() {
  return request({
    url: 'captcha',
    method: 'get',
    responseType:'blob'
  })
}

    //异步获取验证码
    async getImgCode () {
      await captcha().then(response => {
        this.codesrc = window.URL.createObjectURL(response)
      })
    },

//html标签
      <el-form-item prop="code" class="code">
        <span class="svg-container">
<!--          <svg-icon icon-class="el-icon-s-flag" />-->
          <i class="el-icon-edit"></i>
        </span>

        <el-input
          class="code-input"
          ref="code"
          type="text"
          v-model="loginForm.code"
          placeholder="验证码"
          name="code"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />

      </el-form-item>
      <img :src="codesrc" class="code-img" @click="getImgCode">
//sass样式
  .code{
    width: 70%;
    float: left;
  }
  .code-img{
    float: right;
    width: 29.6%;
    //height: 100%;
  }

4. 单点登录，退出登录，根据后端API实现

1. api接口

2. 路由组件编写登录函数逻辑

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {//发生表单验证后
          this.loading = true//登录按钮可用
          //调用action监听，user.js下面的login
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })//成功跳转路由，触发permission.js导航守卫
            this.loading = false//异步过程中，阻止登录按钮的使用
          }).catch(() => {
            this.loading = false//异步过程中，依然阻止登录按钮使用
            this.getImgCode()//登录失败，刷新验证码
          })
        } else {
          console.log('error submit!!')
          this.getImgCode()//刷新验证码
          return false
        }
      })
    }

3. 修改store（vuex）异步逻辑

  // user login
  //处理登录业务
  async login({ commit },userInfo) {
    //解构出用户名和密码
    const { username,password,code} = userInfo;
    //异步调用/api/user文件下的login
    let result = await login({username: username.trim(),password:password,code:code});
    if (result.code==20000){
      //我们规定token为tokenHead + " " + token字符串
      const token = result.data.tokenHead+' '+result.data.token;
      //设置到state
      commit("SET_TOKEN",token);
      //通过auth.js文件的函数，设置到cookie
      setToken(token)
    }else{
      //登录失败
      return Promise.reject(new Error(result.message));
    }
  },

  // get user info
  async getInfo({ commit, state }) {
    //异步调用/api/user文件下的login
    let result = await getInfo(state.token);
    if(result.code === 20000){
      const { loginInfo } = result.data
      if (!loginInfo) {
        return reject('验证失败，请重新登录.');
      }
      const {username} = loginInfo;
      commit('SET_NAME',username);
      commit('SET_AVATAR','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif')
    }else{
      //登录失败
      return Promise.reject(new Error(result.message));
    }
  },
  // user logout
  async logout({ commit, state }) {
    let result = await logout(state.token);
    if(result.code === 20000){
      removeToken() // must remove  token  first
      resetRouter()
      commit('RESET_STATE')
    }else{
      //退出登录失败
      return Promise.reject(new Error(result.message));
    }
  },

三、后台管理系统实现