更新评价和点赞会影响所有的评论

为什么添加一条评论或者对一条评论点个赞会影响了所有评论？我看数据库是没问题的，只产生一条有效数据。

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课书评网</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <!-- 引入样式文件 -->
    <link
            rel="stylesheet"
            href="/assets/vant/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/vant/vant.min.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <style>
        .description {
            padding: 5px;
        }

        .description p {
            line-height: 30px;
        }

        .description img {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--导航栏 -->
    <van-nav-bar @click-right="clickRight">
        <template #left>
            <a href="/" style="padding-top: 10px">
                <img src="/images/logo2.png" style="width: 80px">
            </a>
        </template>
        <template #right>
            <template v-if="state.isLogin">
                <img src="/images/user_icon.png" style="height:30px">{{state.member.nickname}}
            </template>
            <template v-if="!state.isLogin">
                <img src="/images/user_icon.png" style="height: 30px">
                登录
            </template>

        </template>
    </van-nav-bar>

    <van-row style="padding: 10px;color:white;font-size: 80%;background: rgb(127, 125, 121)">
        <van-col span="8" style="float: left;width: 110px;height: 160px">
            <img style="width: 110px;height: 160px"
                 :src="book.cover">
        </van-col>
        <van-col span="16" style="float: left;height: 160px;width:auto">
            <div style="font-size: 16px;font-weight: bold">{{book.bookName}}</div>
            <div style="margin-top:5px;background: #92B8B1;padding: 5px">{{book.author}}</div>
            <div style="font-size: 16px;margin-top:5px;">{{book.subTitle}}</div>
            <div style="padding:10px">
                <template v-if="state.readState == -1">
                    <van-button size="small" icon="like-o" type="default" style="margin-right: 10px"
                                @click="updateReadState(1)">想看
                    </van-button>
                    <van-button size="small" icon="passed" type="default" @click="updateReadState(2)">看过</van-button>
                </template>
                <template v-if="state.readState == 1">
                    <van-button size="small" icon="like" type="success" style="margin-right: 10px"
                                @click="updateReadState(1)">想看
                    </van-button>
                    <van-button size="small" icon="passed" type="default" @click="updateReadState(2)">看过</van-button>
                </template>

                <template v-if="state.readState == 2">
                    <van-button size="small" icon="like-o" type="default" style="margin-right: 10px"
                                @click="updateReadState(1)">想看
                    </van-button>
                    <van-button size="small" icon="checked" type="success" @click="updateReadState(2)">看过</van-button>
                </template>
            </div>
        </van-col>
        <van-col span="24" style="background-color: rgba(0,0,0,0.1);padding: 10px;margin-top: 10px">
            <span style="line-height: 20px;margin-right: 10px">{{book.evaluationScore}}分 {{book.evaluationQuantity}}人已评</span>
            <van-rate v-model="book.evaluationScore" color="#ffd21e" void-icon="star" readonly allow-half></van-rate>
        </van-col>
    </van-row>
    <div class="description" v-html="book.description"></div>
    <van-nav-bar style="background: lightblue">
        <template #left>
            短评
        </template>
        <template #right>
            <van-button type="success" size="small" style="width:60px" @click="showDialog()">评价</van-button>
        </template>
    </van-nav-bar>
    <!--短评列表,通过迭代EvaluationList实现-->
    <template v-for="evaluation,index in evaluationList">
        <div style="border-bottom: 1px solid #cccccc">
            <div style="padding: 10px;">
                <!-- 短评创建时间 -->
                <span style="margin-right: 20px">{{evaluation.ct}}</span>
                <!-- 用户昵称 -->
                <span style="margin-right: 20px">{{evaluation.nickname}}</span>
                <!-- 星型分数 -->
                <van-rate v-model="evaluation.score" color="#ffd21e" void-icon="star" readonly allow-half></van-rate>
                <van-button icon="like-o" @click="enjoy(index)" type="success" size="small"
                            style="width:40px;float:right">{{evaluation.enjoy}}
                </van-button>
            </div>
            <!-- 评论内容 -->
            <div style="padding: 10px;">
                {{evaluation.content}}
            </div>
        </div>
    </template>
    <div style="margin-bottom: 50px">
    </div>

    <van-action-sheet v-model:show="state.dialogVisible" :title="book.bookName">
        <van-form ref="evaluationForm">
            <van-cell-group inset>
                <van-rate v-model="form.score" color="#ffd21e" void-icon="star" style="padding: 16px"></van-rate>
                <van-field
                        v-model="form.content"
                        name="content"
                        placeholder="这里输入评论内容"
                        autocomplete="off"
                        :rules="[{ required: true, message: '请输入评论内容' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;margin-bottom: 50px">
                <van-button round block type="primary" @click="onSubmit('evaluationForm')">
                    提交短评
                </van-button>
            </div>
        </van-form>
    </van-action-sheet>

</div>
<script>
    //日期格式化函数
    function formatDate(time) {
        var newDate = new Date(time);
        return (newDate.getMonth() + 1) + "-" + newDate.getDate();
    }

    //获取查询字符串函数
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

    //提示"需要登录"对话框
    function warnLogin(text) {
        vant.Dialog.confirm({
            title: text,
            confirmButtonText: "去登录",
            cancelButtonText: "关闭"
        })
            .then(() => {
                window.location.href = "/login.html";
            })
    }

    const main = {
        data() {
            return {
                state: { //页面状态
                    isLogin: false, //是否登录
                    member: {}, //当前登录会员数据
                    readState: -1, //当前会员阅读状态 -1:无数据 1:想看 2:看过
                    dialogVisible: false //短评对话框是否显示
                },
                book: {
                },
                evaluationList: [], //短评列表
                form: { //短评表单数据
                    score: 5,
                    content: ""
                }
            }
        }
        , methods: {
            showEvaluationList: function(bookId, isFlush){
                const objApp = this;
                axios.get("/api/evaluation/list?bookId="+bookId)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            if (isFlush){
                                objApp.evaluationList.splice(0, objApp.evaluationList.length);
                            }
                            const list = json.data.list;
                            list.forEach(function(item){
                                //在mybatis中通过关联查询以map形式装载，提取数据时使用字段名，而非属性名
                                item.ct = formatDate(item.create_time);
                                objApp.evaluationList.push(item);
                            })
                        }else{
                            console.error(json);
                        }
                    });
            },
            //显示短评对话框
            showDialog: function () {
                const objApp = this;
                if (!objApp.state.isLogin) {
                    warnLogin("登录后才能进行评论哦");
                    return;
                }
                this.state.dialogVisible = true;
            }
            , clickRight: function () {
                //点击"登录"按钮跳转到登录页
                if (!this.state.isLogin) {
                    window.location.href = "/login.html";
                }
            }
            , updateReadState: function (readState) {
                //更新阅读状态
                const memberId = sessionStorage.mid;
                const bookId = getQueryString("bid");
                const objApp = this;
                if (!objApp.state.isLogin){
                    warnLogin("登陆后才能更新阅读状态哦");
                    return;
                }
                const params = new URLSearchParams();
                params.append("memberId", memberId);
                params.append("bookId", bookId);
                params.append("readState", readState);
                axios.post("api/member/update_read_state")
                    .then(function(response){
                        const json = response.data;
                        if (json.code == "0"){
                            objApp.state.readState = json.data.readState.readState;
                        }else{
                            console.error(json);
                        }
                    })
            }
            , onSubmit: function (formName) {
                //提交短评功能
                //提交短评功能
                const form = this.$refs[formName];
                const objApp = this;
                const memberId = sessionStorage.mid;
                const bookId = getQueryString("bid");
                form.validate().then(function(){
                    const params = new URLSearchParams();
                    params.append("memberId",memberId);
                    params.append("bookId",bookId);
                    params.append("score",objApp.form.score);
                    params.append("content",objApp.form.content);
                    axios.post("/api/member/evaluate",params)
                        .then(function(response){
                            const json = response.data;
                            if (json.code == "0"){
                                // 短评提交成功后，重置以下内容
                                objApp.state.dialogVisible = false;
                                objApp.form.score = 5;
                                objApp.form.content = "";
                                // 刷新评价页面
                                objApp.showEvaluationList(bookId, true);
                            }
                        })
                }).catch(function(e){console.debug("表单验证失败",e)});
            }
            , enjoy: function (index) {
                //点赞功能
                const memberId = sessionStorage.mid;
                const objApp = this;
                if (!objApp.state.isLogin){
                    warnLogin("登陆后才能为短评点赞哦");
                    return;
                }
                const evaluation = objApp.evaluationList[index];
                const params = new URLSearchParams();
                params.append("evaluationId", evaluation.evaluation_id);
                axios.post("/api/member/enjoy", params)
                    .then(function(response){
                        const json = response.data;
                        if (json.data == "0"){
                            evaluation.enjoy = json.data.evaluation.enjoy;
                        }else{
                            console.error(json);
                        }
                    });
            }

        }
        , mounted() {
            //初始化后数据操作
            const bookId = getQueryString("bid");
            const objApp = this;
            const uri = "/api/book/id/"+bookId;
            axios.get(uri).then(function(response){
                const json = response.data;
                if (json.code == "0"){
                    objApp.book = json.data.book;
                }else{
                    console.error(json);
                }
            });
            objApp.showEvaluationList(bookId, false);
            const mid = sessionStorage.mid;
            // 登陆状态
            if (mid != null){
                axios.get("/api/member/select_by_id?memberId="+mid)
                    .then(function(response){
                        const json = response.data;
                        if (json.code == "0"){
                            objApp.state.isLogin = true;
                            objApp.state.member = json.data.member;
                        }else{
                            console.error(json);
                        }
                    });
                // 对readState进行非空判断
                axios.get("/api/member/select_read_state?memberId="+mid+"&bookId="+bookId)
                    .then(function(response){
                        const json = response.data;
                        if (json.code == "0"){
                            if (json.data.readState != null){
                                objApp.state.readState = json.data.readState.readState;
                            }else{
                                objApp.state.readState = -1;
                            }
                        }else{
                            console.error(json);
                        }
                });
            }

        }
    };
    const app = Vue.createApp(main);
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount("#app");
</script>
</body>
</html>

cici哈 2023-02-23

源自：SSM开发社交网站 3-10 实现点赞功能

收起

1回答

好帮手慕小蓝 2023-02-23 10:35:02

同学你好，在点赞和短评功能中，对应方法里，if语句的判断条件应当是判断code而不是data，“json.data == "0"”应该替换为“json.code == "0"”。

建议同学先将这部分修改之后再尝试一下。

祝学习愉快~

收起回答

提问者 cici哈 #1

enjoy()里改了，点赞功能确实没问题了。

但是短评功能还是不行诶，用老师写的代码替换过方法也还是不行

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

methods: {
        showEvaluationList: function(bookId, isFlush){
            const objApp = this;
            axios.get("/api/evaluation/list?bookId="+bookId)
                .then(function(response){
                    const json = response.data;
                    if(json.code == "0"){
                        if(isFlush){
                            objApp.evaluationList.splice(0, objApp.evaluationList.length);
                        }
                        const list = json.data.list;
                        list.forEach(function(item){
                            //在mybatis中通过关联查询以map形式装载，提取数据时使用字段名，而非属性名
                            item.ct = formatDate(item.create_time);
                            objApp.evaluationList.push(item);
                        })
                    }else{
                        console.error(json);
                    }
                });
        },
        //显示短评对话框
        showDialog: function () {
            const objApp = this;
            if (!objApp.state.isLogin) {
                warnLogin("登录后才能进行评论哦");
                return;
            }
            this.state.dialogVisible = true;
        }
        , clickRight: function () {
            //点击"登录"按钮跳转到登录页
            if (!this.state.isLogin) {
                window.location.href = "/login.html";
            }
        }
        ,updateReadState:function(readState){
            //更新阅读状态
            const memberId = sessionStorage.mid;
            const bookId = getQueryString("bid");
            const objApp = this;
            if(!objApp.state.isLogin){
                warnLogin("登录后才能更新阅读状态哦");
                return;
            }
            const params = new URLSearchParams();
            params.append("memberId", memberId);
            params.append("bookId", bookId);
            params.append("readState", readState);
            axios.post("/api/member/update_read_state",params)
                .then(function(response){
                    const json = response.data;
                    if(json.code == "0"){
                        objApp.state.readState = json.data.readState.readState;
                    }else{
                        console.error(json);
                    }
                })
 
        }
        ,onSubmit: function (formName) {
            //提交短评功能
            const form = this.$refs[formName];
            const objApp = this;
            const memberId = sessionStorage.mid;
            const bookId = getQueryString("bid");
            form.validate().then(function(){
                const params = new URLSearchParams();
                params.append("memberId", memberId);
                params.append("bookId", bookId);
                params.append("score", objApp.form.score);
                params.append("content", objApp.form.content);
                axios.post("/api/member/evaluate" , params)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            objApp.state.dialogVisible = false;
                            objApp.form.score = 5;
                            objApp.form.content = "";
                            objApp.showEvaluationList(bookId , true);
                        }else{
                            console.error(json);
                        }
                    })
            }).catch(function(e){console.debug("表单验证失败",e)});
        }
        , enjoy: function (index) {
            //点赞功能
            const memberId = sessionStorage.mid;
            const objApp = this;
            if (!objApp.state.isLogin){
                warnLogin("登陆后才能为短评点赞哦");
                return;
            }
            const evaluation = objApp.evaluationList[index];
            const params = new URLSearchParams();
            params.append("evaluationId", evaluation.evaluation_id);
            axios.post("/api/member/enjoy", params)
                .then(function(response){
                    const json = response.data;
                    if (json.code == "0"){
                        evaluation.enjoy = json.data.evaluation.enjoy;
                    }else{
                        console.error(json);
                    }
                });
        }
 
    }
    , mounted() {
        //初始化后数据操作
        const bookId = getQueryString("bid");
        const objApp = this;
        const uri = "/api/book/id/"+bookId;
        axios.get(uri).then(function(response){
            const json = response.data;
            if (json.code == "0"){
                objApp.book = json.data.book;
            }else{
                console.error(json);
            }
        });
        objApp.showEvaluationList(bookId, false);
        const mid = sessionStorage.mid;
        // 登陆状态
        if (mid != null){
            axios.get("/api/member/select_by_id?memberId="+mid)
                .then(function(response){
                    const json = response.data;
                    if (json.code == "0"){
                        objApp.state.isLogin = true;
                        objApp.state.member = json.data.member;
                    }else{
                        console.error(json);
                    }
                });
            // 对readState进行非空判断
            axios.get("/api/member/select_read_state?memberId="+mid+"&bookId="+bookId)
                .then(function(response){
                    const json = response.data;
                    if (json.code == "0"){
                        if (json.data.readState != null){
                            objApp.state.readState = json.data.readState.readState;
                        }else{
                            objApp.state.readState = -1;
                        }
                    }else{
                        console.error(json);
                    }
            });
        }
 
    }
};

2023-02-27 01:58:39

好帮手慕小尤回复提问者 cici哈 #2

同学你好，1、在源代码中测试同学提供的js文件是没有问题的，可以实现评论。则建议同学在控制台中查看是否有异常信息，如果有，则建议同学反馈到问答区。
2、建议同学将相关的代码也一并反馈到问答区，如：MemberController、EvaluationService、EvaluationServiceImpl
祝学习愉快！

2023-02-27 09:58:00