Vuejs actual project: landing page

1. Create a folder in the view login folder, create index.vue: component represents login

Configuring router.js, you import the login component

Vue from Import "VUE" ; 
Import from Router "VUE-Router" ;
 // import log assembly ' 
Import from the Login' ./views/login/index.vue ' 

Vue.use (Router); 

Export default  new new Router ({
   / / MODE: "History", 
  // Base: process.env.BASE_URL, 
  routes: [ 
    { 
      path: '/ Login' , 
      name: 'Login',   // route name 
      component: the Login   // component Object 
    } 

  ] 
});

2, in conjunction with the preparation of Element-UI index.vue, index.vue directory is: views / login / index.vue

<template>
    <div class="login-container">
        <bubbles-effect :options="options"></bubbles-effect>
      <el-form ref="form" :model="form" label-width="80px" class="login-form">
        <h2 class="login-title" style="center">后台管理系统登录</h2>
        <el-form-item label="账号" class="box">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="box">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button class="cancle">取消</el-button>
        </el-form-item>
      </el-form>
      
    </div>
    
    <!-- <vue-canvas-nest></!-->

</template>


<script>
import vueCanvasNest from "vue-canvas-nest";
//   import bubblesEffect from 'vue-canvas-effect'

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      options: {
        color: "rgba(225,225,225,0.5)", //Bubble color
        radius: 15, //Bubble radius
        densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
        clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
      }
    };
  },
  components: {
    vueCanvasNest
    // bubblesEffect
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>


<style scoped>
.login-form {
  width: 350px;
  /* 上下嫌隙 160px，左右自动居中 */
  margin: 160px auto;
  background-color: rgb(255, 255, 255, 0.8);
  padding: 28px;
  border-radius: 20px;
  /* border: solid 1px black; */
  box-shadow: 0 0 30px 3px rgba(119,118,118,0.33);
}

.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-title {
  color: #303133;
  text-align: center;
}

.cancle {
    margin-left: 80px; 
}

.box {
     margin-left: 0px; 
}
</style>

---

3, form validation

　　1, is introduced into the el-form: rules = "rules", el-form-item introduced pro = "attribute name"

Disposed in the export of data in the rules:

the rules: { 
        username: [ 
            {required: to true , Message: 'password can not be empty', trigger: 'blur' } 
        ], 
        password: [ 
            {required: to true , Message: 'password can not be empty', trigger: 'blur' } 
        ] 
      },

Configuration methods:

Methods: { 
    submitForm (formName) { 
        // positioned to form, and then check 
        the this $ refs [formName] .validate (Valid =>. {
             // the console.log (Valid) // success is true, for the failure to false 
            IF (! Valid) {
                 // submit the form to the right to verify whether the background 
            } the else { 
                console.log ( 'authentication failed' )
                 return  false 
            } 
        }) 
    }, 
//      onSubmit () { 
//        console.log ( "the submit!") ; 
//      } 
//    } 
  }

---

4, easyMock Login Web service interface to add system

　　1, modify .env.develoment file of the target service interface address --------- VUE_APP_SERVICE_URL

　　2, the configuration Mock.js, create a new interface

　　　　① When the login is successful, and the response status code token value 2000, for the authentication token (hereinafter request was successful as long as the state code are 2000, this is the convention with the back interface)

　　* Request URL: / user / login

　　* Request method: post

　　* Description: Logon Authentication

　　* Mock.js interface configuration:

{
   "Code": 2000, // status code 
  "In Flag": to true ,
   "Message": 'authentication success' ,
   "Data" : {
     "token": "ADMIN" 
  } 
}

　　　　② acquire user information token:

　　　　　　Adding user information in response to an analog interface:

　　　　　　* 请求 URL: / user / info / {token}

　　　　　　* Request method: get

　　　　　　* Description: User Information Response

　　　　　　* Mock.js Configuration

{
  "code": 2000,
  "flag": true,
  "message": '成功获取用户信息',
  "data": {
    "id|1-10000": 1,
    "name": "@cname",
    "roles": ["manager"]
  }
}

---

5, log logic implementation

Creating login.js in src / api, two export methods

import request from '@/utils/request'

// 导出函数
export function login(username, password) {
    return request({
        url: '/user/login',
        method: 'post',
        data: {
            username,   //username: username
            password
        }
    })
}

// 获取返回的用户信息
export function getUserInfo(token) {
    return request({
        url:  `/user/info/${token}`,
        method: 'get'
    })
}

Form check:

Methods: { 
    submitForm (formName) { 
        // positioned to form, and then check 
        the this $ refs [formName] .validate (Valid =>. {
             // the console.log (Valid) // success is true, for the failure to false 
            IF (! Valid) {
                 // form is submitted to verify the background is correct, then later passed callback function 
                the Login ( the this .form.username, the this .form.password) .then (the Response => { 
                    const RESP = response.data 
                    Console. log (RESP, resp.flag, resp.data.token) 
                    iF (resp.flag) {
                         // when resp.flag is true, that verification is successful 
                        // by acquiring user information token
                        getUserInfo (resp.data.token) .then (Response => { 
                            const respUser = response.data 
                            the console.log (respUser) 
                            IF (respUser.flag) {
                                 // the acquired user data 
                                // success 
                                console.log ( 'userInfo ' , respUser.data)
                                 //   1. stored token, the user information 
                                localStorage.setItem (' user-MSM ' , the JSON.stringify (respUser.data)) 
                                localStorage.setItem ( ' MSM-token ' , resp.data.token)
                                //   Go Home 
                                the this $ router.push ( '/'. ) 
                            } The else {
                                 the this $ Message.Error An (respUser.message);. 
                            } 
                            
                        }) 
                    } The else {
                         // does not pass, pop-up warning 
                        the this $ Message.Error An (. resp.message); 
                    } 
                }) 

            } the else { 
                the console.log ( 'authentication failure' )
                 return  to false 
            }  
        })
    }, 
//     onSubmit() {
//       console.log("submit!");
//     }
//   }
  }