vue 登陆页面

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm" :rules="rules" class="loginContainer">
      <h3 class="loginTitle">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="text" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input type="text" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width:250px; margin-right: 5px"></el-input>
        <img :src="captchaUrl" @click="updateCaptcha()">
      </el-form-item>

      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      <el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
  import {postRequest} from "@/utils/api";

  export default {
    name: "Login",
    data(){
      return{
        captchaUrl:'/captcha?time='+new Date(),
        loginForm:{
          username:'admin',
          password:'123',
          code:''
        },
        checked: true,
        rules:{
          username:[{required:true,message:'请输入用户名',trigger:'blur'}],
          password: [{required:true,message:'请输入密码',trigger:'blur'}],
          code: [{required:true,message:'请输入验证码',trigger:'blur'}]
        }
      }
    },
    methods:{
      submitLogin(){
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            // alert('submit!');
            postRequest('/login',this.loginForm).then(res=>{
              alert(res);
            })
          } else {
            this.$message.error('错了哦，请将信息填写完整');
            return false;
          }
        });
      },
      updateCaptcha(){
        this.captchaUrl = '/captcha?time='+new Date()
      }
    }
  }
</script>

<style>
  .loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 188px auto;
    width: 358px;
    padding: 15px 35px;
    background: #fff;
    border:1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .loginTitle{
    text-align: center;
    margin: 8px auto 48px auto;
  }

  .loginRemember{
    text-align: left;
    margin: 0 0 15px 0;
  }

  .el-form-item__content{
    display: flex;
    align-items: center;
  }
</style>

api.js

import axios from 'axios'
import {Message} from 'element-ui'
import router from '../router'


//响应拦截器
axios.interceptors.response.use(success=>{
    //业务逻辑错误
    if(success.status&& success.status == 200) {
        if(success.data.code == 500 || success.data.code ==401||success.data.code==403){
            Message.error({message:success.data.message});
            return;
        }
        if(success.data.message){
            Message.success({message:success.data.message})
        }
    }
    return success.data;
},error => {
    if(error.response.code == 504 || error.response.code == 404){
        Message.error({message:'服务器挂起'});
    }else if(error.response.code == 403){
        Message.error({message:'权限不足，请联系管理员'});
    }else if(error.response.code== 401){
        Message.error({message:'尚未登录，请登录'})
        router.replace('/');
    }else{
        if(error.response.data.message){
            Message.error({message:error.response.data.message});
        } else {
            Message.error({message:'未知错误'});
        }
    }
    return;
});

let base = ''

//传送json格式的post请求
export const postRequest = (url,params)=>{
    return axios(
        {
            method:'post',
            url:`${base}${url}`,
            data: params,
        }
    )
}

vue.config.js

let proxyObj={}

proxyObj['/']={
    ws:false,
    //目标地址
    target:'http://localhost:8081',
    //发送请求头host会被设置target
    changeOrigin: true,
    pathRewrite:{
        '^/':'/'
    }


}

module.exports={
    devServer:{
        host:'localhost',
        port:8888,
        proxy: proxyObj
    }
}

router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

package

{
  "name": "selectproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.6",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}