博客系统

最新推荐文章于 2024-04-16 15:40:14 发布

VIP文章 smile_team

最新推荐文章于 2024-04-16 15:40:14 发布

阅读量238

点赞数

分类专栏： nodejs 文章标签： node.js 后端

本文链接：https://blog.csdn.net/smile_team/article/details/107976315

版权

项目要求

a. 前台和后台的页面布局

前台要求有首页、列表页、详情页面、登录、注册
后台要求有登录页面、列表、添加修改页面
页面要求简洁、美观、大方

b. 后台功能要求

前台注册用户在后台的分页展示
后台可以对分类进行管理
后台可以对文章进行管理
后台可以针对文章的评论进行展示
后台需要登录才能进入后台管理系统

c. 前台功能要求

首页按照分类展示对应的最新几条文章
列表页可以根据不同的分类进行文章列表的切换
详情页在登录的前提下，可以对文章进行评论(未实现,jQuery可能出问题了)
前台用户可以正常的登录和注册

项目准备工作

流程图展示

在这里插入图片描述

后台管理流程图

在这里插入图片描述

环境的搭建

phpstudy
在这里插入图片描述
Navicat Premium

实际项目的编写

项目目录

在这里插入图片描述

代码（前端）

代码如下
article.html

<%- include('header.html')  -%>
<div class="container mt-4">
    <nav>
        <ol class="breadcrumb bg-white">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item"><a href="/article/list/<%=article.category_id%>"><%=article.name%></a></li>
            <li class="breadcrumb-item active"><%=article.title%></li>
        </ol>
    </nav>
    <div class="card content">
        <div class="card-header bg-white">
            <h3 class="card-title m-0"><%=article.title%></h3>
            <p class="text-muted small mt-2 m-0">
                <span class="mr-3">发表时间：<%=article.time.toLocaleString()%></span>
                <span class="mr-1">点击：<%=article.hits%></span>
            </p>
        </div>
        <div class="card-body"><%-article.content%></div>
        <div class="card-footer bg-white border-0">
            <% tabs.forEach(tab => { %>
            <span class="badge badge-pill"><%=tab.name%> </span>
            <% }) %>
        </div>
    </div>
    <nav>
        <ul class="pagination mt-3">
            <% if (prev) { %>
            <li class="page-item">
                <a class="page-link" href="/article/<%=prev.id%>">上一篇：<%=prev.title%></a>
            </li>
            <% } %>
            <% if (next) { %>
            <li class="page-item ml-auto">
                <a class="page-link" href="/article/<%=next.id%>">下一篇：<%=next.title%></a>
            </li>
            <% } %>
        </ul>
    </nav>
</div>

footer.html

<footer class="bg-dark p-3 mt-3  text-center text-secondary small">
    <a href="#" class="text-secondary small">苏ICP备00000000号</a>
</footer>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.min.js"></script>
<script src="/js/public.js"></script>
</body>

</html>

header.html

!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>文章详情页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>

<body class="bg-light">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
            <img src="/img/logo.png" width="30" height="30" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/">首页</a>
                </li>
                <% categories.forEach(category => { %>
                <li class="nav-item">
                    <a class="nav-link" href="/article/list/<%=category.id%>"><%= category.name %> </a>
                </li>
                <% }) %>
            </ul>
            <form class="form-inline my-2 my-lg-0 ml-5" method="get" action='/search'>
                <input class="form-control mr-sm-2" name="keyword" type="search" placeholder="请输入关键词...">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav ml-auto">
                <% if (user) { %>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
                        <%=user.username%>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="/admin">个人中心</a>
                        <a class="dropdown-item" href="/user/logout">退出</a>
                    </div>
                </li>
                <% } else { %>
                <li class="nav-item">
                    <a href="/login" class="nav-link">登录</a>
                </li>

最低0.47元/天解锁文章

smile_team

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
博客系统

项目要求a. 前台和后台的页面布局前台要求有首页、列表页、详情页面、登录、注册后台要求有登录页面、列表、添加修改页面页面要求简洁、美观、大方b. 后台功能要求前台注册用户在后台的分页展示后台可以对分类进行管理后台可以对文章进行管理后台可以针对文章的评论进行展示后台需要登录才能进入后台管理系统c. 前台功能要求首页按照分类展示对应的最新几条文章列表页可以根据不同的分类进行文章列表的切换详情页在登录的前提下，可以对文章进行评论(未实现,jQuery可能出问题了)前台用户可
复制链接

扫一扫