技术:vue+ssm+mysql
1、实体类,所有属性
public class User implements Serializable {
private Integer id;
private Integer age;
private String username;
private String password;
private String email;
private String sex;
2、user.html,模态窗口代码如下
<!--模态窗口(用于修改的表单)-->
<div class="tab-pane" id="tab-model">
<div id="myModal" class="modal modal-primary" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--表单标题-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">用户信息</h4>
</div>
<!--表单内容-->
<div class="modal-body">
<div class="box-body">
<div class="form-horizontal">
<!--用户名-->
<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-5">
<!--vue对象的user属性-->
<input type="text" class="form-control"
v-model="user.username">
</div>
</div>
<!--密码-->
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-5">
<input type="text" class="form-control"
v-model="user.password">
</div>
</div>
<!--性别-->
<div class="form-group">
<label class="col-sm-2 control-label">性别:</label>
<div class="col-sm-5">
<input type="text" class="form-control"
v-model="user.sex">
</div>
</div>
<!--年龄-->
<div class="form-group">
<label class="col-sm-2 control-label">年龄:</label>
<div class="col-sm-5">
<input type="text" class="form-control"
v-model="user.age">
</div>
</div>
<!--邮箱-->
<div class="form-group">
<label class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-5">
<input type="text" class="form-control"
v-model="user.email">
</div>
</div>
</div>
</div>
</div>
<!--功能按钮-->
<div class="modal-footer">
<button type="button" class="btn btn-outline" data-dismiss="modal"> 关闭
</button>
<button type="button" class="btn btn-outline" data-dismiss="modal"
@click="updateUser">修改
</button>
</div>
</div>
</div>
</div>
</div>
<!--模态窗口/-->
可以发现模态窗口底阿妈中没有id一项
3、UserMapper,根据id查询,更新用户方法
@Repository
public interface UserMapper {
//根据id查询
@Select("select * from user where id=#{id}")
User findById(Integer userId);
//更新用户
@Update("update user set username=#{username},password=#{password}," +
"email=#{email},sex=#{sex},age=#{age} where id=#{id}")
void updateUser(User user);
}
更新方法是根据id更新的
4、user.js
把自认为比较重要的代码粘过来了
new Vue({
el: "#app",
data: {
user: {
// id:"",//修改表单中没有id一项,但是sql语句是根据id修改的
age: "",
username: "",
password: "",
email: "",
sex: ""
},
},
methods: {
findById: function (userId) {
//在当前方法中定义一个变量,表明是vue对象
var _this = this;
axios.get('/vue/user/findById.do?id=' + userId)
.then(function (response) {
_this.user = response.data;//给user赋值
$("#myModal").modal("show");//显示模态窗口(完成回显信息)
})
.catch(function (err) {
console.log(err);
});
},
updateUser: function () {//参数可有可无,名为updateUser即可,@click="updateUser"
//在当前方法中定义一个变量,表明是vue对象
var _this = this;
axios.post('/vue/user/update.do',_this.user)//修改回显好的用户,上面被赋值的vue的user属性
.then(function () {//controller处理方式返回值为void,参数可有可无
_this.findAll();//请求成功之后的回调函数,再次查询所有
})
.catch(function (err) {
console.log(err);
});
}
},
});
【问题】发送ajax请求,findById,根据id查询单个用户
A、给vue的user属性赋值,user属性没有id一项,可以看到我将其注释掉了
B、回显信息的模态窗口中也没有id一项,看html注释可以清楚地看到
C、点击修改按钮,发送update.do请求,携带请求参数_this.user
D、f12查看请求,请求体中却携带了用户所有的属性,包括id
请教前 辈:
_this.user不就是上面被赋值的那个user属性吗,哪有给id赋值?
同时模态窗口中也没有找到隐藏的id一项呀?
vue初学,AdminLTE2不是很熟悉
不知道这个id是怎么被赋值,怎么带过去的?
就把可能会用到的代码粘在上面,还是说有其他的原因?