实现样式

axios请求


axios.get(url, {params: {key: value}
}).then( res => {console.log(res.data)
})axios.post(url, {key: value,key2: value2
}).then(res => {console.log(res.data)
})

接口文档

公共地址: http://172.16.13.100

查询评论

用于查询所有的评论内容

接口地址: /getComments.php
请求方式: GET
请求参数无

新增评论

用于新增一条评论

接口地址: /addComment.php
请求方式: GET
请求参数

参数名	默认值	描述
name	‘’	留言的人的名字
content	‘’	留言的内容

删除评论

用于删除一条评论

接口地址: /delComment.php
请求方式: GET
请求参数

参数名	默认值	描述
id	‘’	留言的id

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="./bootstrap.css">
</head><body><div class="container" id="app"><div class="panel panel-default"><div class="panel-heading">评论</div><div class="panel-body"><div class="form-group"><input v-model="comment.name" type="text" class="form-control" placeholder="请输入姓名"></div><div class="form-group"><textarea v-model="comment.content" class="form-control" rows="5" placeholder="请输入留言内容"></textarea></div><button class="btn btn-success pull-right" @click="send">发布</button></div><ul class="list-group clearfix"><template v-if="comments.length"><li class="list-group-item" v-for="(comment, index) in comments"><button @click="del(index)" type="button" class="close"><span>&times;</span></button><h5 class="list-group-item-heading">{{comment.name}}:</h5><p class="list-group-item-text">{{comment.content}}<time class="pull-right text-muted">{{comment.date}}</time></p></li></template><li v-else class="list-group-item disabled">暂无评论</li></ul></div></div><script src="./vue.js"></script><script src="./axios.js"></script><script>const app = new Vue({el: '#app',data: {comment: {name: '',content: ''},comments: []},methods: {del(index) {console.log(this.comments[index].id)// 获取到要删除的idconst id = this.comments[index].id// 然后调用接口删除数据库中的数据axios.get('http://172.16.13.100/delComment.php', {params: {// id: idid}}).then(res => {console.log(res.data)if (res.data.code === 200) {// 删除前端的数据this.comments.splice(index, 1)}})},send() {// const {name, content} = this.comment// 发起请求 addComment.php/* axios.get(`http://172.16.13.100/addComment.php`, {params: {// name: name,name,// content: contentcontent}}) */axios.get('http://172.16.13.100/addComment.php', {params: this.comment}).then(res => {// res获取到的是axios对请求结果二次封装的结果 res.data才是对应的内容console.log(res.data)if (res.data.code === 200) {// 拿到后台返回的res.data.data 是新增的数据this.comments.push(res.data.data)this.comment.content = ''this.comment.name = ''}})}},created() {// create会在网页加载后立即执行// 下面是axios的get请求示例/* $.ajax({url: '',type: "GET",data: {},dataType: "JSON",success () {}})*/axios.get('http://172.16.13.100/getComments.php').then(res => {// axios将请求到的结果又封装了一层 res.data才是请求到的内容// console.log(res.data)if (res.data.code === 200) {// 将请求到的res.data.data设置给this.commentsthis.comments = res.data.data}})}})</script>
</body></html>

使用vueaxios请求的get方式实现留言评论的添加，删除功能相关推荐

获取请求参数通用方式|| 中文乱码问题||请求转发
1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数 1. String getParameter(String name):根据参数名称获取参数值 use ...
Spring MVC 接收请求参数所有方式总结！
来源:简书,作者:zhrowable 链接:https://www.jianshu.com/p/5f6abd08ee08 SpringMVC请求参数接收其实一般的表单或者JSON数据的请求都是相对简 ...
十一、Struts2封装请求参数的方式
十一.Struts2封装请求参数的方式方式一.Action 本身作为model对象,通过成员setter封装(一个名字为params的拦截器干的) 注意:表单中的名称要和动作类中的名称一致(这是必须 ...
Request_获取请求参数通用方式介绍
1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数 1. String getParameter(String name):根据参数名称 ...
java webmethod 参数_java详解Spring接收web请求参数的方式
本篇文章给大家带来的内容是java详解Spring接收web请求参数的方式 .有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1 查询参数请求格式:url?参数1=值1&参 ...
Postman中请求体提交方式
Postman中请求体提交方式 x-www-form-urlencoded form-data raw binary x-www-form-urlencoded x-www-form-urlencod ...
java发起HTTP 请求的多种方式
java发起HTTP 请求的多种方式,常用的类为 cn.hutool.http.HttpUtil 但方式有限,需加工,可根据实际情况进行选择参数多为json格式字符串,先讲几个对象或者转json字符 ...
java 微信文章评论点赞_微信文章留言评论刷赞怎么弄？如何给微信文章
微信文章留言评论刷赞怎么弄?如何给微信文章留言刷赞?如今微信公众号众多,每个微信公众号都会定期推送微信文章,我们可以在微信文章下面留言评论.现在有的商家还会通过微信文章留言评论点赞的活动来做宣传,导致 ...
wordpress谷歌字体_如何以“正确”的方式在WordPress主题中添加Google Web字体
wordpress谷歌字体 Google fonts are amazing free resource for web designers. In WPBv4, we have started us ...

使用vueaxios请求的get方式实现留言评论的添加，删除功能

实现样式

axios请求

接口文档

查询评论

新增评论

删除评论

代码实现

使用vueaxios请求的get方式实现留言评论的添加，删除功能相关推荐

最新文章

热门文章