前端多人博客管理系统案例

前端-多人博客管理系统-1day

一、确定需求

文章列表：1.分页显示文章列表，2.可阅读文章详细，并提交评论，3.用户登录后，才可发表评论，4.评论提交以后，即可显示，并显示评论者信息。

管理员登录：1.可输入用户，密码登录页面，并检验，2.检验成功，进入博客管理系统

用户管理：1.对博客系统用户进行增删改操作，2.分页显示用户列表；

文章管理：1.对博客系统的文章进行删改操作，2.分页显示文章列表，3.可选择发布时间，上传文章封面，提供文章内容编辑器，发布新文章，发布作者，默认系统登录用户

登录用户信息：1.个人资料，2.可退出登录

二、搭建项目环境

案例初始化：

1.建立项目文件夹

• public 静态资源 ：样式文件、js脚本文件、图片文件
• model 数据库操作：创建集合的文件以及连接数据库的文件
• route 路由：放置路由文件
• views 模板：放置模板文件

2.初始化项目描述文件

• npm init -y：生成package.json文件

3.下载项目所需第三方模块

• express:创建网站服务器以及路由
• mongoose：连接数据库以及操作数据库
• art-template：渲染模板
• express-art-template：渲染模板
• npm install express mongoose art-template express-art-template （添加模块）

4.创建网站服务器

• 创建项目入口文件(app.js):
  // 引用expess框架 const express = require('express'); // 创建网站服务器 const app = express(); //引用路由模块 const home = require('./route/home'); const admin = require('./route/admin'); // app.use('/home',home); app.use('/admin',admin); //监听端口 app.listen(8080); console.log('网站服务器启动成功，请访问localhost');

5.构建模块化路由

• 在route文件夹里，创建home.js、admin.js文件
• 博客首页路由文件( home.js):// 引用expess框架 const express = require('express'); //创建博客展示页面路由 const home = express.Router(); home.get('/',(req,res)=>{ res.send('欢迎来到博客首页'); }); //将路由对象做为模块成员进行导出 module.exports = home;
• 博客管理页面路由文件(admin.js)：// 引用expess框架 const express = require('express'); //创建博客展示页面路由 const admin = express.Router(); admin.get('/',(req,res)=>{ res.send('欢迎来到博客管理页面'); }); //将路由对象做为模块成员进行导出 module.exports = admin;

6.构建博客管理页面模板
//告诉express框架模板所在路径 app.set('views',path.join(__dirname,'views')); //告诉express框架模板默认后缀是什么 app.set('view engine', 'art'); //当渲染后缀为art的模板时，所使用的模板引擎是什么 app.engine('art',require('express-art-template'));

//创建博客展示页面路由
const  admin = express.Router();
admin.get('/login',(req,res)=>{
 res.render('admin/login')
});