使用nuxt,express,mysql,nginx创建个人博客系列-13
143
2020-01-24 18:37
10 个月前
文章列表
添加路由配置规则 目录:server/admin/routers/index.js
import articles from './articles'
router.use('/articles', checkNoLogin,articles)
创建categorys路由文件 目录:server/admin/routers/articles.js
import {
Router
} from 'express'
const router = Router()
import config from '../../config'
import mysql from '../../libs/mysql'
import util from '../../util'
import marked from 'marked' //markdown转换器
//获取所有的文章
router.get('/',async (req,res,next)=>{
let myConnect = await mysql.getConnect();
let sql = `select a.id,a.title,a.updated_at,a.introduction, t.name as tag_name , c.name as category_name from articles as a left join tags as t on t.id = a.tag_id left join category as c on c.id = a.category_id`;
let result = await mysql.query(myConnect,sql);
await mysql.release(myConnect);
res.render('articles', {
'module_dir': config.admin.route,
list:result
})
})
目录:server/admin/views/articles.html 说明:显示所有的文章
<!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">
<% include header.ejs%>
<title>articles</title>
</head>
<body>
<% include nav.ejs%>
<div class="container mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<a class="btn btn-primary btn-outline-dark btn-block" href="<%= module_dir%>/articles/0" role="button">创建文章</a>
</div>
</div>
<div class="row">
<%if(list.length){%>
<div class="col-12 bd-content mt-3">
<div class="bd-example">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">title</th>
<th scope="col">introduction</th>
<th scope="col">分类</th>
<th scope="col">标签</th>
<!-- <th scope="col">修改时间</th> -->
</tr>
</thead>
<tbody>
<%for(i in list){%>
<tr>
<th scope="row">
<a href="<%= module_dir%>/articles/<%= list[i]['id']%>">
<%= list[i]['id']%>
</a>
</th>
<td width="10%">
<%= list[i]['title']%>
</td>
<td width="50%">
<%= list[i]['introduction']%>
</td>
<td>
<%= list[i]['category_name']%>
</td>
<td>
<%= list[i]['tag_name']%>
</td>
<!-- <td>
<%= list[i]['updated_at']%>
</td> -->
</tr>
<%}%>
</tbody>
</table>
</div>
</div>
<%}%>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
打开页面会看到以下页面
上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-12
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-14