从零开始使用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,这个是一个基于yeomanexpress脚手架生成器。

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来完成我们的这个项目,所以我们需要做如下的配置。

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

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

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已经引入了页面。至此我们页面的环境配置以及项目的初始化已经完成。

image

四:结语

这篇文章讲了前期的express的环境的配置,以及项目的初始化。

第二篇文章我会完成博客系统前后端页面的开发。其中使用了bootstrap的相应的主题。

image
  • 后台页面又这个主题控制台构建

    image

五:文章的一些说明

1,这个专题我将会花三篇文章来讲,每篇文章都会很简单,分为:环境的构建、博客前端实现、博客后端功能实现。

2,此篇文章的demo是我在学习一个express视频时的demo做的,同时加上了自己的一些思考非常感谢这个老师的视频,如需要这个视频的小伙伴,可以在私信我向我要。

3,文章的代码我已经上传到了我的coding账号,博客系统开发https://coding.net/u/darrell0904/p/Node_blog/git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容