从零开始使用express搭建博客系统（一）：前期环境构建与代码初始化

2019年5月22日 126次阅读来源: darrell

《从零开始使用express搭建博客系统（一）：前期环境构建与代码初始化》 node

这里会有三篇文章，教你从零开始使用express搭建博客系统，每篇文章都很简单，希望大家看完文章能大致入门express。

一，安装node

直接在node官网进行下载，下载下来进行傻瓜式安装，安装node的时候，会自动帮你安装npm。在终端输入

node -v // v8.7.0 如果出现版本号，则说明安装成功。
npm -v // 5.4.2 如果出现版本号，则说明安装成功。

使用node，创建一个简单的server。

// index.js
var http = require('http');
http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'});
    response.end('Hello World\n');
}).listen(8888);

console.log('Server running at http://127.0.0.1:8888/');

在index.js的目录下使用，

node index.js // 终端会显示Server running at http://127.0.0.1:8888/

使用浏览器打开localhost:8888，浏览器会显示hello world

二，安装项目所需要的依赖

1， Gulp: 自动化构建工具,任务运行工具

npm install --global gulp // 全局安装

npm install --save-dev gulp // 项目下安装

gulp -v // 查看是否安装完成

2， bower：客户端技术的软件包管理器，前端的依赖管理

npm install -g bower

3，Yeoman：现代web应用的脚手架代码，快速启动一个项目

npm install -g yo

4，genertor-express：全局安装generator-express，这个是一个基于yeoman的express脚手架生成器。

npm install generator-express -g

5，将npm的镜像换成淘宝的镜像，为了解决国内使用npm下载国外资源慢的问题。

npm install -g cnpm --registry=https://registry.npm.taobao.org

三，初始化博客项目

1，创建项目的文件夹

mkdir blog
cd blog // 进入blog文件夹

2，使用yeoman构建express应用脚手架

yo express // 构建express应用

因为我们会使用MongDB与Jade来完成我们的这个项目，所以我们需要做如下的配置。

《从零开始使用express搭建博客系统（一）：前期环境构建与代码初始化》 image

3，我们可以看到相应的项目的结构

.
├── app    // node博客系统的后端文件
│   ├── controller // 后端的控制器
│   ├── models  // 后端的模型
│   └── views   // 后端的模板
├── config  // 后端的配置
│   ├── config.js // 连接数据库
│   └── express.js // express的
├── node_modules // 第三方的依赖
├── public  // 前端的文件的文件夹
│   ├── components // bower依赖存在的目录
│   ├── css
│   ├── img
│   └── js
├── .bowerrc // bower安装目录的配置
├── .editorconfig // 保证代码在不同编辑器可视化的工具
├── .gitignore // git上传时忽略的文件
├── .yo-rc.json
├── app.js // 整个项目的入口文件
├── bower.json // 当前项目bower包的配置，与package.json类似。
├── gulpfile.js  // gulp的配置文件
├── package-lock.json
└── package.json // 当前整一个项目的依赖

4，运行我们这个项目，在blog根目录下，使用gulp

 ~/Desktop/blog $ gulp

如图，我们的项目跑起来了。

《从零开始使用express搭建博客系统（一）：前期环境构建与代码初始化》 image

5，为了项目的快速迭代，我们使用bootstrap来构建我们的前端应用

bower install bootstrap --save

6，然后我们将bootstrap引入到我们的项目中，在app/views/layout

// layout.jade
doctype html
html(lang='en')
 head
 meta(charset='UTF-8')
 meta(name='viewport', content='width=device-width')
 title= title
 block css
 link(rel='stylesheet', href='/components/bootstrap/dist/css/bootstrap.min.css')

 body
 block main

 block js
 script(src='/components/jquery/dist/jquery.min.js')
 script(src='/components/bootstrap/dist/js/bootstrap.min.js')

 block scripts

看到如图所示，说明bootstrap已经引入了页面。至此我们页面的环境配置以及项目的初始化已经完成。

《从零开始使用express搭建博客系统（一）：前期环境构建与代码初始化》 image