使用vue搭建应用六实现登录页

1.js_cookie

js-cookie插件是一个JS操作cookie的插件

安装

yarn add js-cookie

使用

　　写入 Cookies.set('name', 'value');

　　读取 Cookies.get('name');

　　删除 Cookies.remove('name');

2.http请求

（1）模块封装

　　在src下添加目录 utils，添加 global.js

/**

 * 全局常量、方法封装模块

 * 通过原型挂载到Vue属性

 * 通过 this.Global 调用

 */

export const baseUrl = 'http://localhost:8081'

export default {

  baseUrl

}

　　在src下添加目录 http

　　config.js

import { baseUrl } from '@/utils/global'

export default {

  method: 'get',

  // 基础url前缀

  baseUrl: baseUrl,

  // 请求头信息

  headers: {

    'Content-Type': 'application/json;charset=UTF-8'

  },

  // 参数

  data: {},

  // 设置超时时间

  timeout: 10000,

  // 携带凭证

  withCredentials: true,

  // 返回数据类型

  responseType: 'json'

}

　　axios.js axios封装

import axios from 'axios';

import config from './config';

import Cookies from "js-cookie";

import router from '@/router'

export default function $axios(options) {

  return new Promise((resolve, reject) => {

    const instance = axios.create({

      baseURL: config.baseUrl,

      headers: config.headers,

      timeout: config.timeout,

      withCredentials: config.withCredentials

    })

    // request 请求拦截器

    instance.interceptors.request.use(

      config => {

        let token = Cookies.get('token')

        // 发送请求时携带token

        if (token) {

          config.headers.token = token

        } else {

          // 重定向到登录页面

          router.push('/login')

        }

        return config

      },

      error => {

        // 请求发生错误时

        console.log('request:', error)

        // 判断请求超时

        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {

          console.log('timeout请求超时')

        }

        // 需要重定向到错误页面

        const errorInfo = error.response

        console.log(errorInfo)

        if (errorInfo) {

          error = errorInfo.data  // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject

          const errorStatus = errorInfo.status; // 404 403 500 ...

          router.push({

            path: `/error/${errorStatus}`

          })

        }

        return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息

      }

    )

    // response 响应拦截器

    instance.interceptors.response.use(

      response => {

        return response.data

      },

      err => {

        if (err && err.response) {

          switch (err.response.status) {

            case 400:

              err.message = '请求错误'

              break

            case 401:

              err.message = '未授权，请登录'

              break

            case 403:

              err.message = '拒绝访问'

              break

            case 404:

              err.message = `请求地址出错: ${err.response.config.url}`

              break

            case 408:

              err.message = '请求超时'

              break

            case 500:

              err.message = '服务器内部错误'

              break

            case 501:

              err.message = '服务未实现'

              break

            case 502:

              err.message = '网关错误'

              break

            case 503:

              err.message = '服务不可用'

              break

            case 504:

              err.message = '网关超时'

              break

            case 505:

              err.message = 'HTTP版本不受支持'

              break

            default:

          }

        }

        console.error(err)

        return Promise.reject(err) // 返回接口返回的错误信息

      }

    )

    // 请求处理

    instance(options).then(res => {

      resolve(res)

      return false

    }).catch(error => {

      reject(error)

    })

  })

}

　　modules/login.js 系统登录模块

// 登录接口

export function login() {

  const loginData = {

    "code": 304,

    "msg": "登录失败",

    "data": {

      "id": 1,

      "userId": 1,

      "token": "1111111111"

    }

  }

  /*

  const loginData = {

    "code": 200,

    "msg": "登录成功",

    "data": {

      "id": 1,

      "userId": 1,

      "token": "1111111111"

    }

  }

  */

  return {

    url: 'login',

    type: 'post',

    data: loginData

  }

}

// 登出接口

export function logout() {

  const logoutData = {

    "code": 200,

    "msg": null,

    "data": {

    }

  }

  return {

    url: 'logout',

    type: 'get',

    data: logoutData

  }

}

　　api.js 接口统一集成模块

import * as login from './modules/login'

export default {

  login

}

　　index.js 导入所有接口

import api from './api'

const install = Vue => {

  if (install.installed)

    return;

  install.installed = true;

  Object.defineProperties(Vue.prototype, {

    // 注意，此处挂载在 Vue 原型的 $api 对象上

    $api: {

      get() {

        return api

      }

    }

  })

}

export default install

（2）应用

　　main.js

webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import api from './http'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

Vue.use(api)  // 注册使用API模块

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  render: h => h(App)

})

3.登录

　　view/login.vue

<template>

  <el-form

    :model="loginForm"

    :rules="fieldRules"

    ref="loginForm"

    label-position="left"

    label-width="0px"

    class="demo-ruleForm login-container"

  >

    <span class="tool-bar"></span>

    <h2 class="title" style="padding-left:22px;">系统登录</h2>

    <el-form-item prop="account">

      <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>

    </el-form-item>

    <el-form-item prop="password">

      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>

    </el-form-item>

    <el-form-item style="width:100%;">

      <el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button>

      <el-button

        type="primary"

        style="width:48%;"

        @click.native.prevent="login"

        :loading="loading"

      >登 录</el-button>

    </el-form-item>

  </el-form>

</template>

<script>

import Cookies from "js-cookie";

export default {

  name: "Login",

  data() {

    return {

      loading: false,

      loginForm: {

        account: "admin",

        password: "admin"

      },

      fieldRules: {

        account: [{ required: true, message: "请输入账号", trigger: "blur" }],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }]

      },

      checked: true

    };

  },

  methods: {

    login() {

      this.loading = true;

      let userInfo = {

        account: this.loginForm.account,

        password: this.loginForm.password

      };

      this.$api.login

        .login(userInfo)

        .then(res => {

          // 调用登录接口

          if (res.code != 200) {

            this.$message({ message: res.msg, type: "error" });

          } else {

            this.$message({ message: res.msg, type: "success" });

            console.log(res);

            Cookies.set("token", res.data.token); // 放置token到Cookie

            sessionStorage.setItem("user", userInfo.account); // 保存用户到本地会话

            this.$router.push("/"); // 登录成功，跳转到主页

          }

          this.loading = false;

        })

        .catch(res => {

          this.$message({ message: res.message, type: "error" });

        });

    },

    reset() {

      this.$refs.loginForm.resetFields();

    }

  }

};

</script>

<style lang="scss" scoped>

.login-container {

  -webkit-border-radius: 5px;

  border-radius: 5px;

  -moz-border-radius: 5px;

  background-clip: padding-box;

  margin: 100px auto;

  width: 350px;

  padding: 35px 35px 15px 35px;

  background: #fff;

  border: 1px solid #eaeaea;

  box-shadow: 0 0 25px #cac6c6;

  .title {

    margin: 0px auto 30px auto;

    text-align: center;

    color: #505458;

  }

}

</style>

4.测试

mock封装

　　在src下添加目录 mock

　　index.js

import Mock from 'mockjs'

import { baseUrl } from '@/utils/global'

import * as login from './modules/login'

// 1. 开启/关闭[所有模块]拦截, 通过调[openMock参数]设置.

// 2. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.

// 3. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.

let openMock = true

// let openMock = false

fnCreate(login, openMock)

/**

 * 创建mock模拟数据

 * @param {*} mod 模块

 * @param {*} isOpen 是否开启?

 */

function fnCreate(mod, isOpen = true) {

  if (isOpen) {

    for (var key in mod) {

      ((res) => {

        if (res.isOpen !== false) {

          let url = baseUrl

          if (!url.endsWith("/")) {

            url = url + "/"

          }

          url = url + res.url

          Mock.mock(new RegExp(url), res.type, (opts) => {

            opts['data'] = opts.body ? JSON.parse(opts.body) : null

            delete opts.body

            console.log('\n')

            console.log('%cmock拦截, 请求: ', 'color:blue', opts)

            console.log('%cmock拦截, 响应: ', 'color:blue', res.data)

            return res.data

          })

        }

      })(mod[key]() || {})

    }

  }

}

modules/login.js 系统登录模块

// 登录接口

export function login() {

  const loginData = {

    "code": 304,

    "msg": "登录失败",

    "data": null

  }

  return {

    url: 'login',

    type: 'post',

    data: loginData

  }

}

启动执行 npm run dev

浏览器打开 http://localhost:8080/#/login

修改modules/login.js

// 登录接口

export function login() {

  const loginData = {

    "code": 200,

    "msg": "登录成功",

    "data": {

      "id": 1,

      "userId": 1,

      "token": "1111111111"

    }

  }

  return {

    url: 'login',

    type: 'post',

    data: loginData

  }

}

巴特西

使用vue搭建应用六实现登录页

最新文章

热门文章