vue-Element-UI-登陆/退出

创建项目

• 用vue ui创建，选择outer和vuex,less-loader
• 安装插件element-ui,axios

代码分析

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登陆组件
import Login from '../components/Login.vue'
// 登陆成功进入到Home组件
import Home from '../components/Home.vue'
// 引用全局类
import "../assets/css/global.css"
Vue.use(VueRouter)

const routes = [
  // {
  //   path:'/',
  //   redirect:'/login'
  // },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },


]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

src/plugins目录下面主要放插件的一些设置

• element.js 按照需要导入指定element-ui的组件

# element.js
import Vue from "vue"
import { Input, Button, Form, FormItem,Message} from 'element-ui';

Vue.use(Input);
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.prototype.$message = Message

• axios.js 设置请求的一些信息，包括拦截器

import Vue from "vue"
import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials = true; //让ajax携带cookie
//http response 拦截器
axios.interceptors.response.use(
    response => {
      //拦截响应，如果发现接口返回400做统一处理跳转到登陆
      if (response.data.code) {
        switch (response.data.code) {
          case 400:
            window.location.href='/login/'
            
        }
      }
      return response
    },
    //接口错误状态处理，也就是说无响应时的处理
    error => {
        console.log("Please check your internet connection.");
        console.log(error)
        return Promise.reject(error) // 返回接口返回的错误信息
    })
 
// 设置接口访问的根目录
axios.defaults.baseURL = "http://127.0.0.1:8100/myapi/"
// 设置原型属性后,其他地方如果要调用，只要用this.$http.get就可以了
Vue.prototype.$http = axios

• 关键点：拦截器的使用和Vue.prototype.$http = axios的原型设置

src/index.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用element-ui的设置
import './plugins/element.js'
// 引用element-ui的css
import 'element-ui/lib/theme-chalk/index.css';
// 引用axios请求的设置
import './plugins/axios.js'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

src/App.vue

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

src/components

• Login.vue 登陆界面

<template>
    <div class="login_container">
        <div class="login_box">
            <el-form ref="formRef" :rules="rules" :model="loginForm" class="login_form">
                <el-form-item label="用户名" prop="username">
                    <el-input prefix-icon="el-icon-s-custom" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="loginForm.pwd" type="password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="loginEvent">登陆</el-button>
                    <el-button type="info" @click="resetEvent">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

  export default {
    data() {
      return {
        loginForm: {
          username: '',
          pwd: '', 
        }, 
        // 使用验证功能
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          pwd:[
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
       }
      }
    
    },

    methods: {
      loginEvent() {
           //  this.$refs.formRef就能拿到表单是否验证通过的值
           this.$refs.formRef.validate(async valid=>{
               if (!valid) return
                // this.loginForm自动包表单中的name属性的值提交
                let res = await this.$http.post("login/",JSON.stringify(this.loginForm))
                if (res.data.code != 1) {
                   this.$message.error('登陆失败')
                } else{
                  this.$message.success('登陆成功')
                  localStorage.setItem('username', this.loginForm.username);
                   // 登陆成功跳转到home组件
                  this.$router.push("/home")

                }

           });
        
      },
      resetEvent() {
        console.log(this.$refs.formRef);
          this.$refs.formRef.resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
    .login_container {
        background-color: skyblue;
        height: 100%;
    }
    .login_box {
        width:450px;
        height: 300px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    .btns {
        display: flex;
        justify-content: flex-end;
    }
    .login_form {
        position:absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

</style>

• Home.vue 是登陆成功后跳转到的页面

<template>
  <div class="home">
      登陆成功了{{msg}}
      <button @click="loginOutEvent">注销</button>
  </div>
</template>

<script>

export default {
 data() {
   return {
     msg:""
   }
 },
//在这里调用ajax请求方法
 created(){
    this.myHome();
  },
  methods: {
      loginOutEvent:function(){
         this.$http.get("loginout/").then(res => {
          this.msg = res.data.msg;
          if(res.data.code==1) {
            this.$message.success("退出成功")
            window.localStorage.removeItem('username')
          } else {
            this.$message.error("退出失败")
          }

          })
      },
      myHome:function(){
          this.$http.get('index/').then(res => {
          this.msg = res.data.msg;
          }).catch(err => {
                  console.log(err)
                  // reject(err)
                })
        }
    }
  }
</script>

• 页面展示：

  
  image.png

image.png

• 点击注销后刷新页面就会自动跳转到登陆界面，也可以作为自动跳转

点击查看源码