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

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

相关代码：

<!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()里改了，点赞功能确实没问题了。

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

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