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>