前端与后端交互遇到的相关问题与总结
ps，如果有多个id 则只会选取第一个id 后面的id选择器无效
教师注册，短信验证默认成功。
Paste_Image.png
验证功能:1,验证用户是否存在(每个手机号仅能注册一个用户，否则提示用户已存在) 使用ajax调用后端接口，用post给服务器传指定的值，然后根据服务器返回的状态码编写逻辑
如果data.code == 200时，成功。跳到失败，且状态码data.status == 409时 用户已存在
分析完，在vue里写逻辑了，起步在vue的methods中写事件，但我不知道可复用的代码写在哪里(函数与变量)，百度了一通查到了我想问的问题是Vue.js如何添加全局函数和变量。确实，js文件里可复用的代码就是全局的函数和变量而已。
创建base.js(可供复用的全局函数)在base.js里输入
<code>export function reuse() {
some code
}
</code>
在需要使用的vue模板下输入
<code>import {reuse} from (相对该文件的base.js目录)
mounted:function () {
reuse() //vue生命周期里调用reuse函数
}
</code>
然后，先尝试用原生ajax写接口调用，在完成注册的按钮下添加点击事件，点击之后调用ajax函数，用原生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对象格式要转成字符串格式
success: function (data) {
console.log(data)
},
error:function (data) {
console.log(data)
}
})
}
</pre>
该代码传递data数据成功，并返回了正确的结果。但传递给后端的data是写死的，我要把data的属性所对应的值动态从表单中获取，基本的使用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双向绑定的特性取表单里的值，但难以实现，就用原生js来完成这一功能吧。
1.点击事件里获取表单中的值并存入userInfo对象中，该对象会通过ajax的data属性传入后台
2.ajax返回的数据进入success或error中，各自触发相应的跳转条件，这里我像在vue模板使用<code>this.$store.state.show</code>失败了，因为在ajax里this指向$.ajax，这里卡住很久，想怎么样在js文件里获取store.js文件里state中的状态。在vue模板里是先在main.js里引入store，再将store绑定到Vue实例上，这样做是为了让整个应用都拥有路由功能。我想就先在ajax.js文件里先引入store.js文件试试吧，后来果不其然，可打印出store对象。
接下来就是表单验证了。
基本表单验证写完，中间没有大的问题。
点击完成注册之后会跳转加入班级页，跳转过去后，输入班号 这是用enter监听的在formManager.js的89行，当输入的班级id数为6时，执行getClassInfo()函数执行完后改变下一步按钮的状态。接下来看getClassInfo()函数，在formManager.js455行，该函数通过get接口获取班级信息，当data.meta.code为200时，拿到班级信息并展示在指定的位置。 选择到下一步的按钮，点击下一步按钮，当展示的班级信息不为空时，就切换，返回上一步则不做要求。
思路明确，接下来继续在util.js里写获取信息的函数和班号输入监听
获取接口的data数据已经写完了，接下来当状态码为200时取data里的数据，并选择到html上的元素用jquery的text()展示，下面是展示班级信息的
Paste_Image.png
当班级信息不对，就展示
Paste_Image.png
然后写keyup事件，发现没有效果，原来是函数没有加export
keyup事件监听，需将监听放入一个函数中导出，并在vue生命周期中添加，因为虽然$(function(){})函数能自执行，但函数内再写函数就无法执行
<code>
export function testKey () {
$('#classId').keyup(function () {
$('#classInfo').text("")
$('.step-errMsg').hide()
if ($('#classId').val().length == 6){
getClassInfo($("#classId").val(),1) //如果不用函数包裹在mounted中执行，则该函 数无法执行
}
})
}
</code>
这一步已得到班级信息，而且根据班级信息是否为空来进入下一步。
localhost:8081/appdesk 这是在哪里配置的？
Paste_Image.png
Paste_Image.png
教师注册最后一步:确认加入
第一次出现问题是因为班级id的值没有渠道
第二次报错401
应在ajax里设置请求头
<code>
$.ajax({
beforeSend: function (request) {
request.setRequestHeader("X-Session", session);
}
})
</code>
设置请求头，用来表示请求信息的类型 加密的其他相关信息
网友评论