这里会有三篇文章,教你从零开始使用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来完成我们的这个项目,所以我们需要做如下的配置。
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
如图,我们的项目跑起来了。
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的环境的配置,以及项目的初始化。
第二篇文章我会完成博客系统前后端页面的开发。其中使用了bootstrap
的相应的主题。
- 前端页面由这个博客主题构建
-
后台页面又这个主题控制台构建
五:文章的一些说明
1,这个专题我将会花三篇文章来讲,每篇文章都会很简单,分为:环境的构建、博客前端实现、博客后端功能实现。
2,此篇文章的demo是我在学习一个express视频时的demo做的,同时加上了自己的一些思考非常感谢这个老师的视频,如需要这个视频的小伙伴,可以在私信我向我要。
3,文章的代码我已经上传到了我的coding账号,博客系统开发https://coding.net/u/darrell0904/p/Node_blog/git