NodeJS开发个人博客网站

版权声明：此文首发于我的个人站NodeJS开发个人博客网站，转载请注明出处。

在我的小站写完的时候我就打算抽时间把我的开发过程写一个教程，结果一直拖到了现在，才又下了决心好好写一篇长~长的教程。

这篇文章旨在展示一个前端使用nodejs作为后端搭建一个RESTful类型网站的思路，涉及到的技术栈较多，故不一一赘述。
经过了二次改版，现已使用hexo开发，全站静态页面，托管了数据库，不再是RESTful类型网站。

先来盘点一下本教程的技术栈：

javascript
ES6，部分语法，如 Promise、箭头函数等
Sass：自从用Sass以后再也不想用css了 ~，大家自选
NodeJS
npm的使用
Express
MongoDB
mongoose
Webpack：为了学习打包工具和模块化开发
Jade：模板引擎，作为前台页面的模板引擎
AngularJS：开发后台管理系统

做好准备就开始学习吧~

创建项目

npm init

输入一个项目名称，如 xilan，其他的全部点回车吧

1	npm install

顺便把Sass和Webpack也安装了，建议使用cnpm安装，因为node-sass这个包特别容易被墙~，安装个webpack热更新

1	cnpm i --save-dev sass-loader node-sass webpack webpack-dev-server

看一下目录结构

编写webpack配置

// webpack.config.js
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');	// 使js和css从打包文件里分离出来，单独引入
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	devtool: 'eval-source-map',	// 打包时会生成map，方便调试
	entry: {	// 配置入口文件
		base: ['./src/js/base.js'],
		index: ['./src/js/base.js'],
		admin: ['./src/js/admin/admin.js'],
		blogDetail: ['./src/js/blogDetail.js']
	},
	output: {	// 配置输出文件的配置
		path: __dirname + '/dist',
		publicPath: 'http://localhost:8010/',
		filename: 'scripts/[name].js',
	},
	module: {
		loaders: [
			{test: /\.css$/,loader: extractTextPlugin.extract({fallback:'style-loader',use:['css-loader']})},
			{test: /\.scss$/,loader: extractTextPlugin.extract({fallback:'style-loader',use:['css-loader','sass-loader']})}
		]
	},
	plugins: [
		new webpack.BannerPlugin('Copyright 2017 Keyon Y'),
		new webpack.HotModuleReplacementPlugin(),
		new webpack.optimize.OccurrenceOrderPlugin(),
		new webpack.optimize.UglifyJsPlugin(),
		new extractTextPlugin({filename:'contents/[name].css',disable: false,allChunks:true}),	// 配置js和css从打包的文件中分离出来，以便单独引入
		new htmlWebpackPlugin()
	],
	devServer: {
		hot: true,
		historyApiFallback: true,	//不跳转
		inline: true,				//实时刷新
		port: '8010'				//端口号
	}
}

这里不再提webpack的用法，需要学习的同学，给大家推荐一篇教程：入门Webpack，看这篇就够了

编写前台页面模板

安装jade模板，开发阶段使用的是webpack热更新，所以需要用jade-loader，让webpack编译jade的文件。

1	cnpm i --save-dev jade jade-loader

在webpack.config.js的loader配置中加入下边的代码，即可使用webpack编译jade

......
module: {
	loaders: [
		{test: /\.jade$/,loader: 'jade-loader',options: {pretty: true}},
      		......
         ]
      }
......

在src/views 里新建layout.jade，简单写一个模板

doctype
html
  head
    meta(charset='utf-8')
    title KeyonY的个人站
    link(rel="stylesheet",href='/dist/contents/bootstrap.min.css')
    link(rel="stylesheet",href='/dist/contents/base.css')
    block indexCss
  body
    //- 导航栏
    .collapse.navbar-collapse
      ul.nav.navbar-nav.navbar-right
        li.current
          a(href='/') Home
        li.current
          a(href='/') Blog
        li.current
          a(href='/') Works
        li.current
          a(href='/') Contact
      block content
    script(src='/dist/scripts/jquery.min.js')
    script(src='/dist/scripts/bootstrap.min.js')
    script(src='/dist/scripts/base.js')

关于jade的语法，请查看jade官方文档
这里为了快速写好页面我使用了bootstrap。

安装MongoDB

到mongoDB官网上下载对应版本，我用的是window服务器，就下了window版的，
下载后是一个.msi的文件，解压后使用命令行切换到对应目录下的bin（例如安装在：d:/MongoDB，就切换到d:/MongoDB/bin）；
在项目根目录中data文件夹下新建db、log两个文件夹，在log文件夹下新建MongoDB.log文件用于存放日志。

命令行内执行下面的命令，就成功在本地启动了MongoDB数据库：

1	mongod --dbpath d:/xilan/data/db --logpath d:/xilan/data/log/MongoDB.log --logappend --bind_ip 127.0.0.1 --directoryperdb --serviceName MongoXilan --install

上边这个指令意思就是：

–dbpath d:/xilan/data/db 设置项目的数据库地址
–logpath d:/xilan/data/log/MongoDB.log 设置数据库的日志存储位置
–bind_ip 127.0.0.1 绑定操作数据库的ip地址，这里设置为本机ip将只能登录服务器操作，防止远程操作
–directoryperdb 设置每个数据库将被保存在一个单独的目录
–serviceName MongoXilan 设置将MongoDB安装为进程的名字
–install 将MongoDB安装为系统进程

上边的命令执行完后，在window的系统进程中，你将会看到一个名叫 ‘MongoXilan’的进程，这样MongoDB就变成系统进程了，即使重启后依然跟随系统运行。

此时在命令行输入 mongo，可以进入MongoDB后台管理 Shell，它是MongoDB自带的交互式Javascript shell,用来对MongoDB进行操作和管理的交互式环境，可以运行一些简单的算术运算，快来体验一下:

1
2
3

> 2 + 2
4
>

数据库启动完毕了。
关于MongoDB的更多用法和常用命令请参考网上的其他教程，这里贴一个我看过的教程链接：8天学通MongoDB——第二天细说增删查改
一共8篇，讲的足够深了，先看前四篇就足以做完这个项目了。

使用mongoose操作数据库

Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具。
接下来的所有对数据库的操作都由Mongoose来完成，下面来了解一下Mongoose。

安装mongoose，再次祭出npm：

1	cnpm i --save-dev mongoose

未完待续…

Keyon YAbout Me