Vue整合Element UI从0开始构建一个项目＜二＞

一.实现登录成功跳转到首页

1.在src/views文件夹下新建login.vue文件

<template>
  <div class="login">
    <!-- 选择一组卡片 -->
    <el-card class="login-card">
      <div slot="header" class="clearfix">
        <span>欢迎登录DEMO系统</span>
      </div>
      <el-form ref="userForm" :model="userForm" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="username">
          <el-input
            v-model="userForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="userForm.password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin()">登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import{login} from  '../api/index'
export default {
  name: "Login",

  data() {
      return {
        //定义一个对象接收参数
        userForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
        }
      };
  },

  mounted() {},

  methods: {
    submitLogin() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          login(this.userForm).then((res)=>{
            console.info(res);
              if(res.code == 0){
                  let token =res.data.token;
                  localStorage.setItem("userToken",token);
                  this.$router.push('/');
              }
          });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['userForm'].resetFields();
    }
  },
}
</script>
    
<style>
    .login-card {
        width: 500px;
    }
    .login {
        height: 100%;
        /* flex样式呈现*/
        display: flex;
        /*垂直排列*/
        flex-direction: column;
        align-items: center; /*水平方向居中*/
        justify-content: center; /*垂直方向居中*/
    }
    
</style>

2.修改src/router/index.js里路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/home.vue'
import Login from '../views/login.vue'
import Register from '../views/register.vue'

Vue.use(Router)

export const constantRoutes = [
  {
    path: '/',
    name: '首页',
    component: Home
  },
  {
    path: '/Login',
    name: '登录',
    component: Login
  },
  {
    path: '/register',
    name: '注册',
    component: Register
  }

]
const router = new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

router.beforeEach((to,from,next)=>{
  let token = localStorage.getItem("userToken")
  if(to.path=="/login"){
    if(token){
      next({path:'/'})
    }else{
      next()
    }
  }else{
    if(!token){
      next({path:'/login'})
    }else{
      next()
    }


  }

})

//解决Uncaught (in promise) Error
const originalPush = Router.prototype.push
  Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router

3.封装统一请求处理

在src/api文件夹下新建request.js 文件

import axios from 'axios'
import router from '@/router'

import { MessageBox, Message } from 'element-ui'
const instance = axios.create({
  baseURL: 'http://localhost:8081', //后端服务的地址
  timeout: 3000,
})

// 请求拦截
instance.interceptors.request.use(config => {
  let token = localStorage.getItem("userToken")
  if(token){
    config.headers.Authorization = token
  }else{
    router.push('/login')
  }
  return config;
}, error => {
  return Promise.reject(error);
})

// 响应拦截
instance.interceptors.response.use(response => {
  //Loading.close();
  let res = response.data
  if(res.code == 0){
    return res;
  }
  Message({
    message: res.message || 'Error',
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(new Error(res.message || 'Error'))
})

export default instance

在src/api文件夹下新建index.js 文件 

import request from "../api/request";

export function login(data) {
    return request({
      url: `/login`,
      method: 'post',
      autoLoading: false,
      data
    })
  }

4.在src/views文件夹下新建register.vue文件

<template>
  <div class="register">
    <el-card class="register-card">
      <div slot="header" class="clearfix">
        <el-button type="text" prefix-icon="el-icon-s-home">注册</el-button>
      </div>
      <el-form label-position="left" label-width="80px" :model="user">
        <el-form-item label="用户名">
          <el-input
            v-model="user.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="user.password"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            placeholder="请输入确认密码"
            v-model="user.repassword"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="user.birthday"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="user.education" placeholder="请选择学历">
            <el-option label="本科" value="UD"></el-option>
            <el-option label="硕士" value="MD"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="婚否">
          <el-switch v-model="user.marry"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">注册</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- {{ user }} -->
    </el-card>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      user: {
        hobbies: [],
        sex: "2",
      },
      
    };
  },

  mounted() {},

  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>
    
<style>
.register {
  height: 100%;
  /* flex样式呈现*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.register-card {
  width: 500px;
}
</style>

5.npm run dev 启动项目输入http://localhost:8080/login查看登录效果