vue+vuex+axios+element-ui实现登录页面

这个例子只是简单实现了登录页面的部分功能，包括用户信息（用户名、密码）的验证，登录跳转到主页等功能。

1.目录结构

2.运行效果

3.代码实现

由第一点我们可以看到项目的目录结构整体概要，我们编写代码的思想是从aip–>store–>views。由于api中的方法整体封装到utils中，因此，我们先编写utils中的代码。

utils中新建两个js文件，分别为config.js和request.js。在config.js中编写用于维护项目的配置文件，或者公共的将来可能发生更改的数据。在request.js中封装axios的全局方法，包括创建实例、请求拦截器和相应拦截器。

• config.js

const baseURL = 'http://120.26.175.82:7788';
// 提示时长
const time = 5000;
// token字符串 sessionStorage中存储的key值记录一下
const token = 'token';

export default {
  baseURL,
  time,
  token
}

• request.js

// 配置axios
import axios from 'axios'
// 引入qs
import qs from 'qs'
// 引入配置文件
import conf from './config.js'
const { baseURL, token } = conf;

// 创建实例
const instance = axios.create({
  baseURL: baseURL,
  headers: {
    "Authorization": sessionStorage.getItem(token)
  }
})
// 请求拦截器
instance.interceptors.request.use(config => {
  if (config.method == 'post' && config.url != '/user/login') {
    config.data = qs.stringify(config.data)
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
  return {
    ...response,
    data: response.data.data,
    status: response.data.status,
    statusText: response.data.message
  }
}, error => {
  return Promise.reject(error);
});
export default instance

在api中新建login.js，这里主要用来写登录用户的请求接口。

• login.js

import request from '@/utils/request.js'
export function login(params) {
  return request.post('/user/login', params)
}

在router中配置路由

• index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

由于登录功能无需使用vuex，这里就不阐述store中代码编写情况了

最后编写login.vue页面
表单格式借鉴的是element-ui上表单的模板。

• login.vue

<template>
  <div>
    <!-- 登录表单 -->
    <div class="form">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="submit"
            type="primary"
            @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入api内的方法 列表形式导入
import { login } from "@/api/login.js";
import conf from "@/utils/config.js";
const { token } = conf;
// 不确定怎么导入就打印看看
// console.log(login);
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      // rules内的属性名与上方的prop属性值是一样的
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    // formName就是ruleForm
    // refs是引用 this.$refs[formName]拿ref对应的实例
    // valid是一个布尔值
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(valid);
        if (valid) {
          // 验证通过 提交数据给后台 存token 路由跳转
          // token 单纯存在sessionStorage、localStorage、cookie是可行的  若存在vuex中 刷新页面就没了
          login(this.ruleForm)
            .then((res) => {
              // console.log(res);
              // 存token setItem(key,value)
              if (res.status == 200) {
                sessionStorage.setItem(token, res.data.token);
                this.$router.push("/home");
              } else {
                // console.log(res.statusText);
                // statusText是后台写好的提示
                this.$notify.error({
                  // title: "错误",
                  message: res.statusText,
                });
              }
            })
            .catch((err) => {
              this.$notify.error({
                title: "错误",
                message: "服务器内部错误",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.form {
  width: 400px;
  margin: 100px auto;
  border: 2px solid lavender;
  padding: 100px 50px;
  border-radius: 5px;
  background-color: peachpuff;
}
</style>