记录个人博客的搭建

原创 nyy3723 随笔 框架 461阅读 2018-04-28 16:57:23 举报

node+express+mongodb搭建的个人博客

一、介绍部分

  1. 目录结构
    • db- 数据库存储目录
    • models-数据库模型文件目录
    • node_modules --node第三方模块目录
    • public --公共文件夹目录(css、js、img)
    • routers --路由文件目录
    • schemas --数据库结构文件目录
    • views --模板视图文件目录
    • app.js --应用启动入口文件
    • package.json --第三方依赖
  2. 功能介绍

    1).前台展示功能
    1》首页内容查看
    2》列表页-- 分类列表
    3》内容页-- 评论
    4》登陆、注册
    2)后台功能
    1》分类管理(对分类的增删改查)
    2》内容管理(对内容的的增删改查)
    3》查看用户

  3. 技术栈
    • nodejs
    • express(简洁灵活的nodejs web应用框架,剔红了一系列强大的特性帮助我们创建各种web应用)
    • mogodb(基于分布式文件存储的数据库,为web应用提供可扩展高性能的数据存储解决方案)
    • bodyParse:解析post请求数据
    • cookie:读写cookie
    • swig:js模板引擎解析
    • mongoose:操作mongodb数据

二、node.js博客搭建正文

1、前期准备

安装nodejs和mongodb,要知道如何运行node,还有对node基础模块的使用,npm包管理工具,还有博客的静态文件。博客的后台界面,前台登陆注册界面,文章展示界面,首页等。

2、需求分析

一个博客应该具备哪些功能
a 前台展示部分,首页展示,分类展示有分类导航。
b 可以查看具体文章,分页,评论等
c 右侧有登陆注册界面
d 管理员账号--可以进入后台管理
e 对首页展示的分类信息进行增删改查,从后台添加发布文章到前台展示等


3、创建项目,安装和初始化

1》创建一个新的项目文件夹,比如test,在test目录中打开termina输入npm init,然后输入name,后面的都可以不填,最后在is it ok?输入yes,完成之后该文件夹就会多一个package.json的项目文件。
2》安装需要的模块,比如express ,npm i express --save
3》完成这些之后,创建app.js作为入口文件。(需要使用node中 http模块)
// 加载express
var express=require('express');
//创建app应用,相当于=>Node.js Http.createServer();
var app=express();
//监听http请求
app.listen(9001);
最后在浏览器中输入:localhost:9001 便可访问
路由绑定:
在express框架中,可以通过app.get(),或post()方法来返回对应函数
app.get(req,res,next) req-request对象,保存客户请求相关数据,res-response对象,服务端输出对象,next,用于执行下一个和路径相匹配的函数
内容输出:
rend.send(string) // 发送内容到客户端

3、模板引擎的配置和使用

这个项目中,使用的是swig引擎,当然也可以用别的,首先需要配置,
在入口文件中配置加载模板:
var swig = require('swig')
配置模板(定义模板引擎,一个参数是模板引擎的名称也是模板文件的后缀,第二个参数用于解析模板内容的方法 )
app.engine('html', swig.renderFile)
// 设置模板存放目录 第一个参数必须是views 第二个参数是目录
app.set('views','./views')
// 注册所使用的模板引擎 第一个参数必须是view engine 第二个参数和 app.engine这个方法中定义的模板引擎的名称必须相同
app.set('view engine','html')
// 在开发过程中 需要取消模板缓存(项目上线可以改为true或删除,作为优化)
swig.setDefaults({cache:false})
开始重新渲染index.html,在views目录中创建index.html
在app.js中 app.get(req,res,next,()=>{
res.rend('index')
}) 返回的就是index.html文件

4、静态文件托管目录

在node中,如果要加载css文件,一般需要在响应时候判断是以css结尾的文件,就增加text为stylesheet来区别开,但是这样代码会很冗余,所以项目中一般是使用静态文件托管,就是把所有的静态文件都放在public文件里,然后再app.js中
// 设置静态文件托管 当用户访问的url以/public开始 那么直接返回dirname+'/public'的文件
app.use('/public',express.static(
dirname+'/public'))
http响应基本逻辑:用户发送http请求 -》url -》解析路由 -》找到匹配的规则-》执行指定绑定函数,返回对应的内容至用户,public -》静态 -》直接读取指定目录下的文件,返回给用户动态-》处理业务逻辑加载模板,解析模板 -》返回数据给用户

5、分模块开发

博客中有后台和前台,还有ajax调用的接口,所以应该把这个区别开,我是在app.js中通过app.use(路由设置)来划分:
进入后台的
app.use('/admin',require('./routers/admin'))
提供前台使用的api
app.use('/api',require('./routers/api'))
默认加载首页
app.use('/',require('./routers/main'))

6、mongodb数据库,表结构

首先安装好mongodb,方便自己查看数据,也可以再安装可视化的mongodb,我安装的是Robomongo,具体使用:
// 在app.js引入数据库模块
let mongoose = require('mongoose')
//在schemas中创建users.js来定义表结构
let mongoose = require('mongoose')
module.exports = new mongoose.Schema({
username :String,pwd :String
})
//在models目录中创建user.js模型类来操作表结构
let mongoose = require('mongoose') ;
let userSchema = require('../schemas/users')
module.exports = mongoose.model('User',userSchema)
具体方法含义可以查看mongodb的api文档
连接数据库,在安装好数据库后,右击管理员身份打开cmd.exe进入到mongodb的安装 bin目录下,输入 mongod --dbpath=‘项目文件夹的db目录’ --port=‘27017’
27017是默认端口号
然后再app.js中加入 bolg为自定义的数据库名称
mongoose.connect('mongodb://localhost/blog',((err) => {
if(err){
console.log('数据库连接失败');
} else {
console.log('数据库连接成功');
app.listen(9696)
}
}))

上传整体效果图片

总结:差不多到这里就结束了,当然还有很多细节部分比如路由的构建和swig的具体使用,还有mongodb的增加改查数据,但是这些代码也比较繁琐,就不一一记录了,如果有需要,可以单独分享。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复