效果是这样的
目录
1 后端
- 图像路径中的%E4%BA这种是中文字符
2 前端
我们下面使用模板引擎进行渲染页面,之前我们在这里介绍过模板引擎 附录9-模板引擎_Suyuoa的博客-CSDN博客
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="initialization.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- <section>
<div class="left">
<img src="test.jpg" alt="">
</div>
<div class="right">
<h2 class="title">5G商用在即,三大运行商营收持续下降</h2>
<div class="tags">
<span>三大运营商</span>
<span>中国移动</span>
<span>5G商用</span>
</div>
<div class="footer">
<span class="source">新京报经济新闻</span>
<span class="time">2019-10-28 11:50:28</span>
<span class="remark_num">评论数: 56</span>
</div>
</div>
</section>
<section>
<div class="left">
<img src="test.jpg" alt="">
</div>
<div class="right">
<h2 class="title">5G商用在即,三大运行商营收持续下降</h2>
<div class="tags">
<span>三大运营商</span>
<span>中国移动</span>
<span>5G商用</span>
</div>
<div class="footer">
<span class="source">新京报经济新闻</span>
<span class="time">2019-10-28 11:50:28</span>
<span class="remark_num">评论数: 56</span>
</div>
</div>
</section> -->
</body>
<script src="template-web.js"></script>
<script src="../jquery-3.6.1.min.js"></script>
<script type="text/html" id="news">
<section>
<div class="left">
<img src="{{img_route}}" alt="">
</div>
<div class="right">
<h2 class="title">{{title}}</h2>
<div class="tags">
{{each tags}}
<span>{{$value}}</span>
{{/each}}
</div>
<div class="footer">
<span class="source">{{source}}</span>
<span class="time">{{time}}</span>
<span class="remark_num">评论数: {{remark_num}}</span>
</div>
</div>
</section>
</script>
<script src="index.js"></script>
</html>
css
section {
width:500px;
height:150px;
margin:20px 0px;
.left {
display: inline-block;
width:200px;
height:100%;
img {
width:100%;
height:100%;
vertical-align:top;
}
}
.right {
position: relative;
width:250px;
height:100%;
top:5px;
display:inline-block;
.tags {
position: absolute;
top:50%;
span {
padding:2px 5px;
margin-right:20px;
border-radius: 3px;
background-color: rgb(239,239,239);
}
}
.footer {
position: absolute;
bottom:0px;
width:100%;
.time {
margin-left:5px;
}
.remark_num {
position: absolute;
right:0px;
}
}
}
}
模板引擎只是为了生成html字符串,像操作变量这种事最好放到js中处理
js
$.ajax({
type:'GET',
url:'http://127.0.0.1:8000/news_content/get_all_news',
success:function(result) {
result = JSON.parse(result)
content = eval(result.content)
for (i in content) {
content[i].tags = content[i].tags.split(',')
html_str = template('news',content[i])
$('body').append(html_str)
}
}
})