qs

/**
 * 基于 axios 封装的请求模块
 */
import axios from 'axios'
const getaxios = axios.create({
    baseURL: 'http://122.112.253.28:8085/api/', // 请求的基础路径
    headers: {
        Authorization: window.sessionStorage.getItem('token')
    }
});

// 导出请求方法  export  import
export default getaxios

<template>
    <div class="login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <h2 style="text-align:center">登录</h2>
            <el-form-item prop="userAccount">
              <el-input placeholder="请输入账号" v-model="ruleForm.userAccount">
               <template slot="prepend"><i class="el-icon-user-solid"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input placeholder="请输入密码" v-model="ruleForm.passWord">
               <template slot="prepend"><i class="el-icon-lock"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
               <el-checkbox v-model="checked">保持登录状态</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%;" size="mini" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'login',
    data(){
        return{
          checked: true,
            ruleForm: {
              userAccount: '',
              passWord: ''
            },
            rules: {
              userAccount: [
                { required: true, message: '请输入账号', trigger: 'blur' }
              ],
              passWord: [
                { required: true, message: '请输入密码', trigger: 'blur' }
              ],
            }
        }
    },
    methods:{
      async submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // const data = this.$axios.post('/api/manager/admin/login',this.ruleForm);
            const {data:res}=await this.$axios({
              url:'/manager/admin/login',
              data:this.$qs.stringify(this.ruleForm),
              method:'post'
            })
            if(res.code==1){
              this.$message({
                message:'登录成功',
                type:'success'
              })
              sessionStorage.setItem('token',res.data.token)
              this.$router.push('/home')
            }else{
              this.$message({
                message:'登录失败',
                type:'error'
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
}
</script>

<style scoped>
.login {
    background-image: url('../assets/bgd.jpg') !important;
}
.el-form{
  background: white;
  width: 20%;
  padding: 30px;
  border-radius: 10px;
  position: absolute;
  top:30%;
  left: 50%;
  transform: translate(-50%,-30%);
}
</style>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/all.css'
import qs from 'qs'
Vue.prototype.$qs = qs;
import getaxios from './public/getaxios';
Vue.prototype.$axios = getaxios;

Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            redirect: '/login'
        }, {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        }
    ]
})