鱼悠奕 2021-11-15 12:36 采纳率: 58.3%
浏览 30
已结题

AdminLTE2中的模态窗口没有id一项,发送请求却会携带id

技术: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">&times;</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是怎么被赋值,怎么带过去的?
就把可能会用到的代码粘在上面,还是说有其他的原因?

  • 写回答

1条回答 默认 最新

  • 浪在前端 2021-11-15 13:14
    关注

    response.data这里是否有id呢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月23日
  • 已采纳回答 11月15日
  • 创建了问题 11月15日

悬赏问题

  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan