文章目录
相关知识:
Ajax入门——第一节:服务器的基本概念与初识Ajax
链接:https://blog.csdn.net/qq_56897195/article/details/125571482?spm=1001.2014.3001.5501
Ajax入门——第二节:form表单与模板引擎
链接:https://blog.csdn.net/qq_56897195/article/details/125582851?spm=1001.2014.3001.5501
1. 案例 - 评论列表
1.1 渲染UI结构
1.1.1 如何绘制ui面板
- 导入bootstrap,输入bs3-panel,挑选合适的样式
代码如下:
<body style="padding: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<div class="panel-body">
<div>评论人:</div>
<input type="text" class="form-control" />
<div>评论内容:</div>
<textarea class="form-control" ></textarea>
<button type="submit" class="btn btn-primary">发表评论</button>
</div>
</div>
<!-- 评论列表:输入 bs3-list-->
<ul class="list-group">
<li class="list-group-item">
<span class="badge" style="background-color: aquamarine;">评论时间:</span>
<span class="badge" style="background-color: rosybrown;">评论人:</span>
Item 1
</li>
</ul>
</body>
运行结果:
1.2 获取评论列表
function getCmtList() {
$.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {
if(res.status !== 200) {
return alert('获取评论列表失败!')
}
var rows = []
$.each(res.data, function (i, item) { // 循环拼接字符串
rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间:'+ item.time +'</span><span class="badge cmt-person">评论人:'+ item.username +'</span></li>')
})
$('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构
})
}
1.3 发表评论
$('#formAddCmt').submit(function(e) {
e.preventDefault() // 阻止表单的默认提交行为
// 快速得到表单中的数据
var data = $(this).serialize()
//(请求的url地址,发送到服务器的数据,(调用回调函数)用res获取服务器响应回来的数据)
$.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
//然后对res进行判断
if (res.status !== 201) {
return alert('发表评论失败!')
}
// 刷新评论列表
getCmtList()
//获取评论列表成功之后, 快速清空表单内容
// [0]把jQuery对象转换为原生的dom对象,然后进行重置
$('#formAddCmt')[0].reset()
})
})
1.4 总结
1.4.1 html文档:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./练习.js"></script>
</head>
<body style="padding: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<div class="panel-body">
<div>评论人:</div>
<input type="text" class="form-control" />
<div>评论内容:</div>
<textarea class="form-control" ></textarea>
<button type="submit" class="btn btn-primary">发表评论</button>
</div>
</div>
<!-- 评论列表:输入 bs3-list-->
<ul class="list-group">
<li class="list-group-item">
<span class="badge" style="background-color: aquamarine;">评论时间:</span>
<span class="badge" style="background-color: rosybrown;">评论人:</span>
Item 1
</li>
</ul>
</body>
</html>
1.4.2 js文档
function getCommentList() {
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/cmtlist',
success: function (res) {
if (res.status !== 200) return alert('获取评论列表失败!')
var rows = []
$.each(res.data, function (i, item) {
var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间:' + item.time + '</span><span class="badge" style="background-color: #5BC0DE;">评论人:' + item.username + '</span>' + item.content + '</li>'
rows.push(str)
})
$('#cmt-list').empty().append(rows.join(''))
}
})
}
getCommentList()
$(function () {
$('#formAddCmt').submit(function (e) {
e.preventDefault()
var data = $(this).serialize()
$.post('http://www.liulongbin.top:3006/api/addcmt', data, function (res) {
if (res.status !== 201) {
return alert('发表评论失败!')
}
getCommentList()
$('#formAddCmt')[0].reset()
})
})
})
1.4.3 运行结果:
2. 接口文档
2.1. 请求的根路径
http://www.liulongbin.top:3006
2.2. 评论列表
- 接口URL: /api/cmtlist
- 调用方式: GET
- 参数格式:无
- 响应格式:
数据名称 | 数据类型 | 说明 |
---|---|---|
status | Number | 200 成功;500 失败; |
msg | String | 对 status 字段的详细说明 |
data | Array | 评论列表 |
+id | Number | 评论Id |
+username | String | 评论人姓名 |
+content | String | 评论内容 |
+time | String | 评论时间 |
- 返回示例:
{
"status": 200,
"msg": "获取评论列表成功",
"data": [
{
"id": 2,
"username": "李四",
"content": "宝塔镇河妖",
"time": "2019-10-25 16:18:52"
},
{
"id": 1,
"username": "张三",
"content": "天王盖地虎",
"time": "2019-10-25 16:12:57"
}
]
}
2.3. 发表评论
- 接口URL: /api/addcmt
- 调用方式: POST
- 参数格式:
参数名称 | 参数类型 | 是否必选 | 参数说明 |
---|---|---|---|
username | String | 是 | 评论人名称 |
content | String | 是 | 评论内容 |
- 响应格式:
数据名称 | 数据类型 | 说明 |
---|---|---|
status | Number | 201 发表评论成功;500 请填写完整的评论信息; 501 执行Sql失败; |
msg | String | 对 status 字段的详细说明 |
- 返回示例:
{
"status": 201,
"msg": "发表评论成功"
}
2.4. 新闻列表
- 接口URL: /api/news
- 调用方式: GET
- 参数格式:无
- 响应格式:
数据名称 | 数据类型 | 说明 |
---|---|---|
status | Number | 200 获取新闻列表成功;500 获取新闻列表失败! |
msg | String | 对 status 字段的详细说明 |
data | Array | 新闻列表数组 |
+id | Number | 新闻Id |
+title | String | 新闻标题 |
+source | String | 新闻来源 |
+cmtcount | Number | 评论数量 |
+tags | String | 标签 |
+img | String | 图片地址 |
+time | String | 发表时间 |
- 返回示例:
{
"status": 200,
"msg": "获取新闻列表成功",
"data": [
{
"id": 1,
"title": "5G商用在即,三大运营商营收持续下降",
"source": "新京报经济新闻",
"cmtcount": 58,
"tags": "三大运营商,中国移动,5G商用",
"img": "/images/0.webp",
"time": "2019-10-28T03:50:28.000Z"
}
]
}