vue-cli从零开始实现一个仿豆瓣app（四）

最后一页是详细页，详细页的小功能比之前的要多。

首先是对影片内容的展示，包括头部的图片，中间的影片信息和评分情况。

比较值得说的就是展示评分信息模块。

这个模块从数据库中查询某一影片的评分情况，做一下简单统计各星级的评分人数并计算出比例，然后用div的宽度表示比例。

//获取该影片的评价情况，首先获取分数和评分人数，然后获取各个分数段的评分人数
        this.$axios.post('/api/film/scoreSituation',{filmNo:_this.$route.query.eno}).then(function(res){
            if(res.data=='-1'){   //评分人数不够
                _this.showScore = false;
            }else{
                _this.showScore = true;
                _this.finalScore = Number(res.data.avgT).toFixed(1);            //总分情况
                _this.amountOfPeopleScore = res.data.countT;        //评分人数
                if(res.data.score1!=0) _this.proportionOf1 = Number((res.data.score1/res.data.countT)*100).toFixed(2);
                if(res.data.score2!=0) _this.proportionOf2 = Number((res.data.score2/res.data.countT)*100).toFixed(2);
                if(res.data.score3!=0) _this.proportionOf3 = Number((res.data.score3/res.data.countT)*100).toFixed(2);
                if(res.data.score4!=0) _this.proportionOf4 = Number((res.data.score4/res.data.countT)*100).toFixed(2);
                if(res.data.score5!=0) _this.proportionOf5 = Number((res.data.score5/res.data.countT)*100).toFixed(2);
                _this.width1 = _this.proportionWidth * (res.data.score1/res.data.countT);  //计算分数显示横条的宽度
                _this.width2 = _this.proportionWidth * (res.data.score2/res.data.countT);
                _this.width3 = _this.proportionWidth * (res.data.score3/res.data.countT);
                _this.width4 = _this.proportionWidth * (res.data.score4/res.data.countT);
                _this.width5 = _this.proportionWidth * (res.data.score5/res.data.countT);
            }
        }).catch(function(err){
            console.log(err);
        });

先要查询影片的总评分人数和平均分：

query_totally_star:'select count(*) as count ,avg(score) as score from usercomment where filmno = ?',

然后查询具体某一星级的评分人数：

query_every_star:'select count(*) as count1,score from usercomment where filmno = ? group by score'

后端代码部分：

router.post('/scoreSituation',function( request , response){
    var queryTotallyScore = $sql.filmstar.query_totally_star;
    var filmNo = request.body.filmNo;
    conn.query(queryTotallyScore,filmNo,function(err,result){
        if(err){
            console.log(err);
        }
        if(result){              //查询总评分成功
            if(result[0].count==0){
                response.send('-1');              //没有人评分则返回
            }else{
                var Count = result[0].count;      //评分人数
                var Avg = result[0].score;        //分数
                var query_every_star = $sql.filmstar.query_every_star;
                conn.query(query_every_star,filmNo,function(errin,resin){//查询各星级的评分人数
                    var score1 = 0;
                    var score2 = 0;
                    var score3 = 0;
                    var score4 = 0;
                    var score5 = 0;
                    for(i=0;i<resin.length;i++){        //从返回的结果中提取出各个分数阶层的评分人数，返回结果数据结构如下：[RowDataPacket{count:...,score；...},RowDataPacket{......}]
                        switch(resin[i].score){
                            case 1:score1 = resin[i].count1;break;
                            case 2:score2 = resin[i].count1;break;
                            case 3:score3 = resin[i].count1;break;
                            case 4:score4 = resin[i].count1;break;
                            case 5:score5 = resin[i].count