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

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

一、确定需求
前端多人博客管理系统案例_第1张图片
文章列表: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')
});

你可能感兴趣的:(前端小白之路)