1、使用Vue+axios做英雄管理系统笔记
一、Vue如何获取文本框的值：
1、使用v-model双向绑定：
<div>
<div class="logininfor">
<input type="text" placeholder="手机号码" v-model="userphone">
<input type="text" placeholder="密码" v-model="userpass">
<span @click="register()">注册</span>
</div>
</div>
<script>
export default {
data(){
return{
userphone:"",
userpass:""
}
},
methods: {
register(){
window.console.log(this.userphone,this.userpass)
}
},
}
</script>
2、ref方法：
<body>
<form action="" id="demo">
<input type="text" value="调试 vuejs 2.0" ref="input1">
<a href="javascript:void(0)" v-on:click="test1">测试</a>
<br>
<span>{{ result1 }}</span>
<br>
<input type="text" v-model="input2">
<a href="javascript:void(0)" v-on:click="test2">测试</a>
<br>
<span>{{ result2 }}</span>
new Vue({
el: "#demo",
data: {
result1: null,
result2: null,
input2: ""
},
created: function() {
// the created hook is called after the instance is created
},
methods: {
test1: function () {
this.result1 = this.$refs.input1.value + " 成功!";
},
test2: function () {
this.result2 = this.input2 + " 成功!";
}
}
})
2、sql语句带参数查询：使用es6模板字符串
connection.query(`select * from hero where isDelete="false" and heroName= '${heroNames}' `,
(err, results) => {} // 占位符要加引号
3、后端如何接收前端传过来的参数
let {heroNames} = req.query; // 对象解构语法，新变量与原变量尽量写成一样
// console.log(heroNames); // 孙尚香
// console.log(req.query); // { heroNames: '孙尚香' }
4、前端如何接收处理后端返回数据
getval() {
// console.log(this.$refs.getValue.value);
axios.get('http://localhost:4399/hero/list', {
params: {
heroNames: this.$refs.getValue.value
}
}).then(res => { // 这里就是后端返回的数据
if (res.length == 0) {
// this.heroMsg = '没有该英雄！'
// this.isActive = !this.isActive
alert('无此英雄!');
} else {
this.heroMsg = res.data.heros; // 更新data里面的数据，将后端返回数据写入到data中
}
}).catch(err => { })
}
