vue+elementUI完成注冊及登陸

1. vue怎么引入和配置使用element-ui框架
1.1 使用vue-cli腳手架工具創建一個vue項目
vue init webpack pro01

 

1.2 npm安裝elementUI
cd pro01 #進入新建項目的根目錄
npm install element-ui -S #安裝element-ui模塊

 

## 重要的事情說三遍：在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代碼
1.3 在項目中src目錄下找到main.js，並在指定位置添加三行代碼（main.js是入口文件，所以在這里引入就行，頁面就不用引入了）
import Vue from 'vue'

import ElementUI from 'element-ui' //新添加1
import 'element-ui/lib/theme-chalk/index.css' //新添加2，避免后期打包樣式不同，要放在import App from './App';之前

import App from './App'
import router from './router'

Vue.use(ElementUI) //新添加3
Vue.config.productionTip = false

 

1.4 測試
修改HelloWorld.vue添加elementUI組件查看效果

2. Vue+ElementUI設計登陸頁面

 

注1：相關樣式見資料“css.txt”

注2：<style scoped>
在vue組件中，在style標簽上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有化的目的

注2：auto-complete="off"
autocomplete 屬性是 HTML5 中的新屬性，off-----禁用自動完成

 

<template>
    <div class="login-wrap">
        <el-form class="login-container">
            <h1 class="title">用戶登錄</h1>
            <el-form-item label="">
                <el-input type="text" v-model="username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input type="password" v-model="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%;" @click="doSubmit()">提交</el-button>
            </el-form-item>
            <el-row style="text-align: center; margin-top: -10px;;">
                <el-link type="primary">忘記密碼</el-link>
                <el-link type="primary" @click="doRegister()">用戶注冊</el-link>
            </el-row>
        </el-form>
    </div>
</template>

 

 

3. 后台交互(axios/qs/vue-axios)
3.1 axios
axios是vue2提倡使用的輕量版的ajax。它是基於promise的HTTP庫。它會從瀏覽器中創建XMLHttpRequests，與Vue配合使用非常好。

1.題外話：
vue.js有著名的全家桶系列：vue-router，vuex， vue-resource，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。
其中vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求並處理響應，但在vue更新到2.0之后，
作者就宣告不再對vue-resource更新，而是推薦的axios

2.GET提交
axios.get('/user', {//注意數據是保存到json對象的params屬性
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

 

 

3.POST提交
axios.post('/user', {//注意數據是直接保存到json對象
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

 

 

注1：axios跨域問題
會一直報錯：“http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header”
因為使用了前后端分離開發，跨域訪問了，解決方案：需要配置tomcat允許跨域訪問，
tomcat跨域配置方法很多，但最簡單的方式是自己寫一個過濾器CorsFilter實現，添加一個響應頭
Access-Control-Allow-Origin即可
httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名
httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80");

Access-Control-Allow-Origin:* #則允許所有域名的腳本訪問該資源。
Access-Control-Allow-Origin:https://www.fujieace.com #允許特定的域名訪問

 

 

注2：axios.get提交沒有問題，axios.post提交后台接收不到數據
因為POST提交的參數的格式是Request Payload，這樣后台取不到數據的(詳情見資料“05 Vue中axios踩坑之路-POST傳參 - RainSun - CSDN博客.mht”)，
解決方案：使用qs.js庫，將{a:'b',c:'d'}轉換成'a=b&c=d'

注3：為簡化axios使用，還可以使用axios全局配置及攔截器，詳情見資料“api/http.js”
axios.defaults.baseURL = 'https://api.example.com';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定義請求頭，添加認證令牌
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

注4：為方便開發，建議對請求地址進行封裝，詳情見資料“api/action.js”

注5：^_^~~~~為進一步簡化開發，將action.js的URL地址封裝到axios.urls屬性上