前端vue2+vue-router3+ElementUI+axios综合使用代码教程登录页案例

为了测试vue2+vue-router3路由+ElementUI界面+axios网络HTTP请求的基本使用情况

专门编写一个登录页面进行demo验证

依赖情况package.json

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "core-js": "^2.6.5",
    "element-ui": "^2.15.10",
    "vue": "^2.6.10",
    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUi from 'element-ui'

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

import Login from './components/Login.vue'
import App from './App.vue'
//Vue.config.productionTip = false
Vue.prototype.ApiHost = 'https://gofly.v1kf.com';

Vue.use(VueRouter)
Vue.use(ElementUi)

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

const router = new VueRouter({
  routes
})

const app = new Vue({
    render: h => h(App),
    router
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

./components/Login.vue

<template>
    <div>
<div class="loginBox">
            <div class="loginBg"></div>
            <div  class="signin">
                <div class="loginHtml">
                    <h1 class="loginTitle">系统登录</h1>
                    <el-form :model="kefuForm"  :rules="rules" ref="kefuForm">
                        <el-form-item  prop="username">
                            <el-input v-model="kefuForm.username" placeholder="账号"></el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <el-input show-password v-on:keyup.enter.native="kefuLogin('kefuForm')" v-model="kefuForm.password" placeholder="密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%" :loading="loading" @click="kefuLogin('kefuForm','pc')">登录</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="clear"></div>
                </div>
                <p class="copyright"> </p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
      name: 'Login',
        data() {
          return {
            kefuForm: {
                username:"",
                password:"",
            },
            rules: {},
            loading:false,
          }
        },
        methods: {
          kefuLogin() {
            var _this=this;
            this.loading=true;
            axios.post(this.ApiHost+'/check', {
                username: this.kefuForm.username,      
                password: this.kefuForm.password
              })
              .then(function (response) {
                  _this.loading=false;
                  console.log(response);
                  var code=response.data.code;
                  var msg=response.data.msg;
                  if(code!=200){
                      _this.$message({
                          message: msg,
                          type: 'error'
                      });
                      return;
                  }
                  _this.$message({
                      message: msg,
                      type: 'success'
                  });
              })
              .catch(function (error) {
                  _this.loading=false;
                  console.log(error);
                  _this.$message({
                      message: error.message,
                      type: 'error'
                  });
              });
          }
        }

    }
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .loginBg{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0.5;
        z-index: 0;
    }
    .loginBox{
        width: 100%;
        height: 100%;
        background: url("/static/images/loginBg.jpg") no-repeat;
        background-size: cover;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .clear{clear: both;}
    .signin {
        width: 460px;
        padding: 25px;
        background: #fff;
        box-shadow: 0 25px 30px -13px rgba(40,40,40,.4);
        border-radius: 6px;
        z-index: 1;
    }
    .signin h1,.signin h2,.signin .copyright{
        font-weight: normal;
        color: #4d627b;
        text-align: center;
    }
    .signin .loginTitle{
        font-size: 24px;
        margin: 15px 0px;
    }
    .signin .loginDesc{
        font-size: 14px;
        margin-bottom: 15px;
    }
    .signin .loginDesc .regBtn{
        float: left;
    }
    .signin .loginDesc a{
        text-decoration: none;
        cursor: pointer;
        color: #409EFF;
    }
    .signin .copyright{
        font-size: 12px;
    }
    @media (max-width: 768px) {
        body{
            background-color: #fff;
        }
        .signin{
            width: 80%;
            background-color: #fff;
            box-shadow:none;
        }
    }
</style>