End of comment function-django+mysql+vue+element

The backend receives the value passed by the frontend


Foreword:

Author: God’s child is singing
Hello everyone, my name is Chen Yunzhi , you can call me Zhi

Teaching video

8.
Save comments in the database-comment function 9. Postman usage-comment function
10. Comment function realization-comment function

1. Backend

The front end passes the value through axiso, so the data passed to the back end is json format data, and the back end obtains the data through json package analysis

Specific code

Insert picture description here


Set url

Insert picture description here

1.1 postman

You can download it online

We can test it with postman

Insert picture description here


An error occurred

Insert picture description here

Go to the setting and comment out the following code

'django.middleware.csrf.CsrfViewMiddleware',
Insert picture description here

Output

Insert picture description here
The above test shows that this interface is available, so we can write the js code to connect to the back-end interface.

2. Front end

Insert picture description here
Since the backend needs the frontend to pass the content and name fields, we have to define these two fields in data()
input: {
   content: '',
   name: '',
},
Insert picture description here


Define add function

//添加评论到数据库
Addcontent(){
     //定义that
     let that = this;
     //执行axios请求
     axios.post(that.baseURL + 'add_contents/', that.input)
         .then(res => {
             //执行成功
             if (res.data.code === 1) {
                 //获取所有学生的信息
                 that.contents = res.data.data;
                 //提示
                 that.$message({
                     message: '恭喜你,这是一条成功消息',
                     type: 'success'
                 });
             
             } else {
                 //失败的提示:
                 that.$message.console.error(res.data.msg);
             }
         })
         .catch(err => {
             //执行失败
             console.log(err);
             that.$message.err("获取后端查询异常")
         });
 }

Set in index.html,
add a box to enter the name

 <el-input type="textarea" :rows="1" v-model="input.name"  placeholder="请输入名字" style="width: 320px;"></el-input>

To receive parameters and settings, click the button

Insert picture description here

Someone here will ask why it’s used err =>, it’s not necessary function(response), but the truth is the same.

This comment system is completed like this

Insert picture description here

3. The entire code

index.html

Insert picture description here

index.js

Insert picture description here


view.py

Insert picture description here

model.py

Insert picture description here
My blog: https://blog.csdn.net/weixin_46654114
Reprint instructions: Tell me, be sure to indicate the source, and attach my blog link.

Please give me a thumbs up and encourage me

Insert picture description here