博客项目——用户文章内容展示

客户端呈现页面

（default.art 文章列表）
这里我们给两个标签添加链接路径，一个是图片链接，另一个是文章标题链接。

通过点击链接链接到。点击链接完成两件事，1.链接到文章内容页面（article），2.传递get请求参数id给服务器对应的article.js路由

<!-- 文章列表开始 -->
	<ul class="list w1100">
		{{each articles.records}}
		<li class="{{$index%2 == 0 ?'fl' : 'fr'}}">
			<a href="/home/article?id={{@$value._id}}" class="thumbnail">
				<img src="{{$value.cover}}">
			</a>
			<div class="content">
				<a class="article-title" href="/home/article?id={{@$value._id}}">{{$value.title}}</a>
				<div class="article-info">
					<span class="author">{{$value.author.username}}</span>
					<!-- 调用dateFormat对日期进行处理 -->
					<span>{{dateFormat($value.publishDate)}}</span>
				</div>
				<div class="brief">
					<!--运用正则表达式对文章内容标签进行处理成'''@原文输出(处理&npsb)substr截取
					防止内容超出盒子-->
					{{@$value.content.replace(/<[^>]+>/g , '').substr(0,100)+'...' }}
				</div>
			</div>
		</li>
		{{/each}}
	</ul>

(article.art文章详情界面)
这里result是服务器查询出的文章数据集合
注意：art-template模板引擎默认不会解析html标签，可以使用@进行原文输出

	<!-- 文章框架开始 -->
	<div class="article">
		<div class="w1100">
			<div class="container">
				<div class="article-header">
					<h3 class="article-title">{{result.title}}</h3>
					<div class="article-info">
						<span class="author">{{result.author.username}}</span>
						<span>{{dateFormat(result.publishDate)}}</span>
					</div>
				</div>
				<div class="article-content">
					{{@result.content}}
				</div>
				<div class="article-comment">
					<h4>评论</h4>

					<form class="comment-form">
						<textarea class="comment"></textarea>
						<div class="items">
							<input type="submit" value="提交">
						</div>
					</form>
					<div class="comment-list">
						<div class="mb10">
							<div class="article-info">
								<span class="author">Coder</span>
								<span>2020-09-10</span>
								<span>wjb19891223@163.com</span>
							</div>
							<div class="comment-content">
								nice 就是这样, 非常好 !
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 文章框架结束 -->

服务器端

（article.js）
通过从服务器查到的id（_id是mongoose数据库默认是自动生成）查找文章
详情，这里我们还是通过之前的方法解决级联查询数据溢出问题，并将用
户数据渲染到模板中

//将用户结合构造函数Article从article中导入
const { Article } = require('../../model/article');
module.exports = async(req, res) => {
    // 接收default传递过来的id属性
    const id = req.query.id;
    //通过id查找对应数据库信息
    const results = await Article.findOne({ _id: id }).populate('author');
     //这里通过先转化为字符串后解析为JSON对象的方式解决数组溢出栈(洗数据)
     var str = JSON.stringify(results);
     let result = JSON.parse(str);
    //显示详情界面,将数据渲染到模板
    res.render('home/article.art',{
        result
    });
    
}