整顿接收后台的接口

心已赠人 2022-01-06 06:55 136阅读 0赞

## 上一章节忘记应该先介绍经常使用的具体语法，然后再接收后台的传参 ##

文本数据绑定最常见双大括号的文本插值：  
语法 : \{ \{ username\}\}

## v-model在表单控件或者组件上创建双向绑定 ##

基础用法  
*你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。*

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

想了解更多用法详情请参考文档 [https://cn.vuejs.org/v2/guide/forms.html][https_cn.vuejs.org_v2_guide_forms.html]  
…

<view>玩家
    <text style="margin: 0 0.3rem;">{ { nickname}}</text>
    </view>
    <input v-model="password"/>
    //2.传参的数据中定义全局的字段
    //eg:nickname:’’
    data() { 
    return { 
    title: '我的积分',	
    nickname: '',
    score: ''
    }
    },
    //3.uni.setStorage(object)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
    //uni.getStorage(object)从本地缓存中异步获取指定 key 对应的内容。
    //声明变量的考虑因素：
    //this对象在程序中随时都会产生变化
    //var that值不会改变，仍然指向之前的this[原来的对象]
     
    //token是后台传过来的必填参数 
     
    fetch() { 
    var that = this; 
    uni.getStorage({ 
    key: 'user_info',
    success: (res) => { 
    that.token = res.data.token
    that.personage(that.token);
    }
    });
    },
     
    //4.触摸点击事件
    @tap="exchangeRegister"
    //方法下：methods: { 
    exchangeRegister() { 
    uni.navigateTo({ 
    	url: '../index1-bt/index1-bt'
    })
    },
    personage(token) { 
    				var that = this;
    				uni.request({ 
    					url: this.baseUrl + '/api/user/getUserInfo', //地址---需要修改
    					method: 'POST',
    					data: { //传过来的参数
    						"token": that.token
    					},
    					header: { 
    						'Content-type': 'application/x-www-form-urlencoded'
    					},
    					success: (ret) => { 
    						console.log(ret)
    						if (ret.data.code == 200) {  //判断字段
    							uni.hideLoading();
    //页面显示的字段
    							that.nickname = ret.data.data.nickname
    							that.score = ret.data.data.score
    						} else { }
    					},
    					error: (e) => { 
    						uni.hideLoading();uni.showToast({ 
    							title: e.response.data.msg,
    							icon: 'none'
    						});
    					}
    				});
    			}
    		},
    		onShow() { 
    //顺序
    			this.fetch();
    			this.personage()
    
    		}

[https_cn.vuejs.org_v2_guide_forms.html]: https://cn.vuejs.org/v2/guide/forms.html