藏经阁

使用nuxt,express,mysql,nginx创建个人博客系列-13

142
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>

打开页面会看到以下页面
articles.html

上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-12
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-14