添加评论积分

 

 

 

 

配置settings.py

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
    "app02",


]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL=True


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME':'day42',
        'HOST':'localhost',
        'PORT':3308,
        'USER':'root',
        'PASSWORD':'root'
    }
}

 

配置住路由urls.py

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    
    path("app02/",include("app02.urls")),
]

 

配置子路由app02/urls.py

from django.urls import path,include
from .import views


urlpatterns = [
    path("login/",views.LoginView.as_view()),
    path("news/",views.NewsView.as_view()),
    path("get_news/",views.GetNewsInfo.as_view()),
    path("comment/",views.CommentView.as_view()),
]

 

 

配置 app02/model.py

from django.db import models

# Create your models here.
#用户表
class User(models.Model):
    username=models.CharField(max_length=32,unique=True)
    password=models.CharField(max_length=255)
    score=models.IntegerField()

    class Meta:
        db_table='user'

#新闻表
class News(models.Model):
    title=models.CharField(max_length=32,unique=True)
    content=models.CharField(max_length=1000)
    score=models.IntegerField()

    class Meta:
        db_table="news"

#评论表
class Comment(models.Model):
    content=models.CharField(max_length=1000)
    news=models.ForeignKey("News",on_delete=models.CASCADE)

    class Meta:
        db_table="comment"

 

 

配置序列化app02/sers.py

from rest_framework import serializers
from .models import *

class UserSerializers(serializers.ModelSerializer):
    class Meta:
        model=User
        fields="__all__"

#新闻序列化
class NewsSerializers(serializers.ModelSerializer):
    class Meta:
        model=News
        fields="__all__"


#评论反序列化

class CommentUnSersializers(serializers.Serializer):

    content=serializers.CharField(max_length=1000)
    news_id=serializers.IntegerField()

    def create(self, validated_data):
        return Comment.objects.create(**validated_data)

 

 

配置app02/views

from django.shortcuts import render

# Create your views here.
from rest_framework.views import APIView
from rest_framework.response import Response
from .import models

from .sers import *

from django.core.paginator import Paginator

from django.db.models import Q,F

#登录
class LoginView(APIView):
    def get(self,request):
        userobj=User.objects.all()
        obj=UserSerializers(userobj,many=True)
        return Response({"code":100,"msg":"用户信息","data":obj.data})
    def post(self,request):
        username=request.POST.get("username","").strip()
        password=request.POST.get("password","").strip()
        print(username)
        print(password)
        userobj=User.objects.filter(username=username,password=password).first()
        if userobj:
            return Response({"code":1000,"msg":"登录成功","data":userobj.score})
        return Response({"code":1001,"msg":"登录失败"})



class NewsView(APIView):
    # def get1(self,request):
    #     newsobj=News.objects.all()
    #     obj=NewsSerializers(newsobj,many=True)
    #     return Response({"code": 100, "msg": "用户信息", "data": obj.data})
    #查询
    def get(self,request):
        p=request.GET.get("p",1)
        keyword=request.GET.get("keyword","").strip()

        newobj=News.objects.filter(Q(title__contains=keyword)|Q(content__contains=keyword)).all()

        page_obj=Paginator(newobj,per_page=2)

        page=[i for i in page_obj.page_range]
        try:
            page_data=page_obj.page(p)
        except:
            page_data=page_obj.page(1)
        page_data=page_obj.page(p)

        previous=page_data.has_previous()
        next=page_data.has_next()
        obj=NewsSerializers(page_data,many=True)

        data={
            "data":obj.data,
            "page":page,
            "previous":previous,
            "next":next
        }

        return Response({'code':1000,"msg":"","data":data})



#获取新闻信息的揭开
class GetNewsInfo(APIView):
    def get(self,request):
        newsid=request.GET.get("newsid",0)
        newsobj=News.objects.filter(id=newsid).first()
        obj=NewsSerializers(newsobj)

        return Response({'code':1000,"msg":"获取成功","data":obj.data})

#评论
class CommentView(APIView):

    def post(self,request):
        newsid=request.POST.get("news_id",0)
        content=request.POST.get("content","")
        score=request.POST.get("score",0)

        #反序列化评论
        data={
            "content":content,
            "news_id":newsid
        }
        obj=CommentUnSersializers(data=data)
        if obj.is_valid():
            flag=obj.save()
            if not flag:
                return Response({"code":1001,"msg":"添加失败"})
        else:

            print(obj.errors)
            return Response({"code":1002,"msg":"参数有误"})
        # 添加积分
        flag = News.objects.filter(id=newsid).update(score=(F("score") + score))
        if flag:
            return Response({"code":1000,"msg":"评论成功"})
        return Response({"code":1003,"msg":"评论失败"})

 

 

 

 

 

 

VUE代码

 

配置main.js

import axios from "axios";

// axios.defaults.baseURL='http://127.0.0.1:8000'
Vue.prototype.axios=axios;

 

配置index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'




import login from '@/components/login'

import Login02 from '@/components/Login02'
import News02 from '@/components/News02'
import Details02 from '@/components/Details02'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/login02',
      name: 'Login02',
      component: Login02
    },
    {
      path: '/news02',
      name: 'News02',
      component: News02
    },
    {
      path: '/details02',
      name: 'Details02',
      component: Details02
    },
  ]
})

 

 

登录页面Login02.vue

<template>
    <div>
        <h1>登录页面</h1>
        用户名：<input type="text" v-model="username">
        密码：  <input type="password" v-model="password">
        <button @click="sub">登录</button>
    </div>
</template>


<script>
export default {
    data(){
        return{
            username:"",
            password:""
        }
    },
    methods:{
        sub:function(){
            let formdata=new FormData();
            formdata.append("username",this.username);
            formdata.append("password",this.password);
            this.axios({
                url:"http://127.0.0.1:8000/app02/login/",
                method:"post",
                data:formdata
            }).then(res=>{
                if(res.data.code==1000){
                    //将分数添加到本地
                    localStorage.setItem("score",res.data.data);
                    //跳转
                    this.$router.push({
                        name:"News02"
                    })
                }else{
                    alert(res.data.msg)
                }
            })
        }
    }



}
</script>

 

 

新闻页面News02.vue

<template>
    <div>
        <h1>新闻页面</h1>
        <input type="text" v-model="keyword">
        <button @click="search">搜索</button>
        <table border="1">
            <tr>
                <td>ID</td>
                <td>头条</td>
                <td>内容</td>
                <td>评分</td>
            </tr>
            <tr v-for="i in news">
                <td>{{i.id}}</td>
                <td>
                    <router-link :to="'/details02?newsid='+i.id">{{i.title}}</router-link>
                </td>
                <td>{{i.content}}</td>
                <td>{{i.score}}</td>
            </tr>
            

        </table>
            <button v-if="previous" @click="pagx(p-1)">上一页</button>
            <button v-for="i in page" @click="pagx(i)">{{i}}</button>
            <button v-if="next" @click="pagx(p+1)">下一页</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            news:[],
            page:[],
            previous:false,
            next:false,
            keyword:"",
            p:1
        }
    },
    mounted(){
        this.axios({
            url:"http://127.0.0.1:8000/app02/news/",
            method:"get",
            params:{"p":this.p,"keyword":this.keyword}
        }).then(res=>{
            this.news=res.data.data.data;
            this.page=res.data.data.page;
            this.previous=res.data.data.previous;
            this.next=res.data.data.next;
        })
    },
    methods:{
        pagx:function(p){
            this.p=p;
            this.axios({
            url:"http://127.0.0.1:8000/app02/news/",
            method:"get",
            params:{"p":this.p,"keyword":this.keyword}
        }).then(res=>{
            this.news=res.data.data.data;
            this.page=res.data.data.page;
            this.previous=res.data.data.previous;
            this.next=res.data.data.next;
        })
        },
        search:function(){
            this.axios({
            url:"http://127.0.0.1:8000/app02/news/",
            method:"get",
            params:{"p":this.p,"keyword":this.keyword}
        }).then(res=>{
            this.news=res.data.data.data;
            this.page=res.data.data.page;
            this.previous=res.data.data.previous;
            this.next=res.data.data.next;
        })
        }
    }
}
</script>


<style scoped>
table{
    margin: 30px auto;
}
</style>

 

评论页面Details02.vue

<template>
    <div>
        <h1>新闻详情页面</h1>
        <h4>标题：{{title}}</h4>
        <p>内容：{{content}}</p>
        <p><textarea v-model="desc"></textarea></p>
        <p><button @click="pinglun">添加</button></p>
    </div>
</template>


<script>
export default {
    data(){
        return{
            newsid:0,
            title:'',
            content:'',
            desc:''
        }
    },
    mounted(){
        this.newsid=this.$route.query.newsid;
        this.axios({
            url:"http://127.0.0.1:8000/app02/get_news/",
            method:"get",
            params:{"newsid":this.newsid}
        }).then(res=>{
            this.title=res.data.data.title;
            this.content=res.data.data.content;
        })
    },
    methods:{
        pinglun:function(){
            let score=localStorage.getItem("score");
            let formdata=new FormData();
            formdata.append("news_id",this.newsid);
            formdata.append("content",this.desc);
            formdata.append("score",score);

            this.axios({
                url:"http://127.0.0.1:8000/app02/comment/",
                method:"post",
                data:formdata
            }).then(res=>{
                if(res.data.code==1000){
                    this.$router.push({
                        name:"News02"
                    })
                }else{
                    alert(res.data.msg);
                }
            })
        }
    }
}
</script>