从零开始用 Node.js 实现一个微博系统,功能包括路由控制、页面模板、数据库访问、用户注册、登录、用户会话等内容。
- Express 框架、
- MVC 设计模式、
- ejs 模板引擎
- MongoDB 数据库
MVC(Model-View-Controller,模型视图控制器)是一种软件的设计模式
- 模型是对象及其数据结构的实现,通常包含数据库操作。
- 视图表示用户界面,在网站中通常就是 HTML 的组织结构。
- 控制器用于处理用户请求和数据流、复杂模型,将输出传递给视图
一.Express 框架 (http://expressjs.com/)
- 1.路由控制;
- 2.模板解析支持;
- 3.动态视图;
- 4.用户会话;
- 5.CSRF 保护;
- 6.静态文件服务;
- 7.错误控制器;
- 8.访问日志;
- 9.缓存;
- 10.插件支持。
1.全局安装 Express
$ npm install -g express
2.最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator),所以我们还需要安装一个命令工具,命令如下:
$ npm install -g express-generator
3.查看版本
$ express --version
二.建立工程
1.在NodeJS指南中利用以下命令建立网站的基本结构:
$ express -e microblog
(模板引擎是jade) 执行命令后ejs模板引擎就安装好了
但是express3以上的版本把layout默认给取消了,所以现在在views文件夹下并没有生成layout.ejs。然后改成include引入
2.运行完这个命令,继续运行,然后进入microblog文件夹,安装npm
$ cd microblog && npm install
3.include引入方法
如头部views/layoutTop.ejs
<!DOCTYPE html> <html> <head> <title><%= title %></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel='stylesheet' href='/stylesheets/reset.css' /> <link rel='stylesheet' href='/stylesheets/main.css' /> <link rel="stylesheet" href="/stylesheets/bootstrap.css"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">Microblog</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="/">首页</a></li> <% if (!user) { %> <li><a href="/login">登入</a></li> <li><a href="/reg">注册</a></li> <% } else { %> <li><a href="/logout">登出</a></li> <% } %> </ul> </div> </div> </div> </div>
底部views/layoutBottom.ejs
</body> <script src="/javascripts/jquery-1.9.1.min.js"></script> <script src="/javascripts/bootstrap.js"></script> </html>
在views/index.ejs页面中include引用入公共部分
<% include layoutTop %> <p>首页</p> <% include layoutBottom %>
4.执行完express -e microblog 命令后, 项目生成,当前目录下出现了子目录 microblog,并且产生了一些文件:
create : microblog create : microblog/package.json create : microblog/app.js create : microblog/routes create : microblog/routes/index.js create : microblog/routes/users.js create : microblog/public create : microblog/views create : microblog/views/index.jade create : microblog/views/layout.jade create : microblog/views/error.jade create : microblog/bin create : microblog/bin/www create : microblog/public/javascripts create : microblog/public/images create : microblog/public/stylesheets create : microblog/public/stylesheets/style.css
5.用 Express 实现的网站实际上就是一个 Node.js 程序,因此可以直接运行。我们运行 node app.js, 看到 Express server listening on port 3000 in development mode。
输入地址 http://localhost:3000, 你就可以看到一个简单的 Welcome to Express 页面了。
6.开发时使用supervisor监听刷新修改
$ supervisor bin/www
7.退出监听:
ctrl + c