前端與后端交互遇到的相關(guān)問題與總結(jié)
ps栈暇，如果有多個id 則只會選取第一個id 后面的id選擇器無效
教師注冊悬垃，短信驗證默認成功摧冀。
Paste_Image.png
驗證功能:1,驗證用戶是否存在(每個手機號僅能注冊一個用戶桐汤，否則提示用戶已存在) 使用ajax調(diào)用后端接口财破，用post給服務(wù)器傳指定的值宗挥，然后根據(jù)服務(wù)器返回的狀態(tài)碼編寫邏輯
如果data.code == 200時乌庶，成功。跳到失敗契耿，且狀態(tài)碼data.status == 409時 用戶已存在
分析完瞒大，在vue里寫邏輯了，起步在vue的methods中寫事件搪桂，但我不知道可復(fù)用的代碼寫在哪里(函數(shù)與變量)透敌，百度了一通查到了我想問的問題是Vue.js如何添加全局函數(shù)和變量。確實踢械，js文件里可復(fù)用的代碼就是全局的函數(shù)和變量而已酗电。
創(chuàng)建base.js(可供復(fù)用的全局函數(shù))在base.js里輸入
<code>export function reuse() {
some code
}
</code>
在需要使用的vue模板下輸入
<code>import {reuse} from (相對該文件的base.js目錄)
mounted:function () {
reuse() //vue生命周期里調(diào)用reuse函數(shù)
}
</code>
然后，先嘗試用原生ajax寫接口調(diào)用内列，在完成注冊的按鈕下添加點擊事件撵术，點擊之后調(diào)用ajax函數(shù)，用原生ajax失敗了话瞧，換成了jquery的插件 ajax
<pre>
import $ from 'jquery'
export function userReg() {
var userInfo = {
"role":1,
"phone":13648655595,
"classroom_id": 100305,
"password": "gaoyang",
"name": "高楊",
"sex": 0
}
$.ajax({
type:"POST",
url:"/users_pc",
contentType: "application/json;charset=UTF-8",
dataType: "json",
data: JSON.stringify(userInfo), //為什么在這里JSON對象格式要轉(zhuǎn)成字符串格式
success: function (data) {
console.log(data)
},
error:function (data) {
console.log(data)
}
})
}
</pre>
該代碼傳遞data數(shù)據(jù)成功嫩与，并返回了正確的結(jié)果。但傳遞給后端的data是寫死的移稳，我要把data的屬性所對應(yīng)的值動態(tài)從表單中獲取蕴纳，基本的使用jquery提供的val()方法，表單上有name和password字段个粱，最重要的是phone字段的值是位于第一個組件中的古毛。
先嘗試將值放入vuex中，再在ajax頁面取到vuex中的值都许。
我在<html>中綁定v-model稻薇，但在vue實例中的data是失效的，浪費了1個小時胶征，是因為我在vue實例的下方定義了一個data對象塞椎，console.log()打印的是<code>(定義的data屬性) is not defined on the instance but referenced during render</code>我就一直找是不是語法錯誤了，代碼也沒有高亮提示睛低，最后還是交給高小龍看案狠，2分鐘解決問題服傍，后面的data會覆蓋前一個data對象，后一個data里自然就沒有定義我需要的data屬性骂铁。
想利用vue雙向綁定的特性取表單里的值吹零，但難以實現(xiàn)，就用原生js來完成這一功能吧拉庵。
1.點擊事件里獲取表單中的值并存入userInfo對象中灿椅，該對象會通過ajax的data屬性傳入后臺
2.ajax返回的數(shù)據(jù)進入success或error中，各自觸發(fā)相應(yīng)的跳轉(zhuǎn)條件钞支，這里我像在vue模板使用<code>this.$store.state.show</code>失敗了茫蛹，因為在ajax里this指向$.ajax，這里卡住很久烁挟，想怎么樣在js文件里獲取store.js文件里state中的狀態(tài)婴洼。在vue模板里是先在main.js里引入store，再將store綁定到Vue實例上信夫，這樣做是為了讓整個應(yīng)用都擁有路由功能窃蹋。我想就先在ajax.js文件里先引入store.js文件試試吧，后來果不其然静稻，可打印出store對象。
接下來就是表單驗證了匈辱。
基本表單驗證寫完振湾，中間沒有大的問題。
點擊完成注冊之后會跳轉(zhuǎn)加入班級頁亡脸，跳轉(zhuǎn)過去后押搪，輸入班號 這是用enter監(jiān)聽的在formManager.js的89行，當輸入的班級id數(shù)為6時浅碾，執(zhí)行g(shù)etClassInfo()函數(shù)執(zhí)行完后改變下一步按鈕的狀態(tài)大州。接下來看getClassInfo()函數(shù)，在formManager.js455行垂谢，該函數(shù)通過get接口獲取班級信息厦画，當data.meta.code為200時，拿到班級信息并展示在指定的位置滥朱。 選擇到下一步的按鈕根暑，點擊下一步按鈕，當展示的班級信息不為空時徙邻，就切換排嫌，返回上一步則不做要求。
思路明確缰犁，接下來繼續(xù)在util.js里寫獲取信息的函數(shù)和班號輸入監(jiān)聽
獲取接口的data數(shù)據(jù)已經(jīng)寫完了淳地，接下來當狀態(tài)碼為200時取data里的數(shù)據(jù)怖糊，并選擇到html上的元素用jquery的text()展示，下面是展示班級信息的
Paste_Image.png
當班級信息不對颇象，就展示
Paste_Image.png
然后寫keyup事件蓬抄，發(fā)現(xiàn)沒有效果，原來是函數(shù)沒有加export
keyup事件監(jiān)聽夯到，需將監(jiān)聽放入一個函數(shù)中導(dǎo)出嚷缭，并在vue生命周期中添加，因為雖然$(function(){})函數(shù)能自執(zhí)行耍贾，但函數(shù)內(nèi)再寫函數(shù)就無法執(zhí)行
<code>
export function testKey () {
$('#classId').keyup(function () {
$('#classInfo').text("")
$('.step-errMsg').hide()
if ($('#classId').val().length == 6){
getClassInfo($("#classId").val(),1) //如果不用函數(shù)包裹在mounted中執(zhí)行阅爽，則該函 數(shù)無法執(zhí)行
}
})
}
</code>
這一步已得到班級信息，而且根據(jù)班級信息是否為空來進入下一步荐开。
localhost:8081/appdesk 這是在哪里配置的付翁？
Paste_Image.png
Paste_Image.png
教師注冊最后一步:確認加入
第一次出現(xiàn)問題是因為班級id的值沒有渠道
第二次報錯401
應(yīng)在ajax里設(shè)置請求頭
<code>
$.ajax({
beforeSend: function (request) {
request.setRequestHeader("X-Session", session);
}
})
</code>
設(shè)置請求頭，用來表示請求信息的類型 加密的其他相關(guān)信息
