用Express搭建 blog (一)

时间：2023-03-08 21:51:26

Info

公司马上要举行 hack day 了，这次决定和小伙伴用 Express 作为框架来搭建我们的应用，所以昨天搭出来UI后，今天开始系统的学习下 Express。

Start

首先是express的全局设置。

1

sudo npm install -g express

接着我们试着用express搭建一个简单的blog程序
在work path 运行命令

1

express -e ejs blog

可以看到express已经帮你创建了一系列的模板程序。接着进入blog目录安装ejs等相关依赖。

1

cd blog && npm install

运行

1

node app

并访问http://localhost:3000/ ,简单的hello world 程序已经生成。

下面来看下程序的整个结构，运行command

1

tree -I  node*

express的模板程序结构看起来和rails的结构很相像。

1

2

3

4

5

6

7

8

9

10

11

12

├── app.js

├── package.json

├── public

│   ├── images

│   ├── javascripts

│   └── stylesheets

│       └── style.css

├── routes

│   ├── index.js

│   └── user.js

└── views

    └── index.ejs

Blog Design

对express的模板程序有了基本概念后，我们开始来实现一个稍微复杂的blog。
blog 需要实现下面的功能。

1

2

3

4

5

/：首页

/login：登录

/reg：注册

/post：发表文章

/logout：登出

blog 的数据存储采用mongodb。

Improve

首先我门先简单的改进下我们当前的blog程序。

首先是重写默认的路由

在 app.js 里面我们可以看到以下两行语句。

1

2

app.get('/', routes.index);

app.get('/users', user.list);

我们把这部分代码移到 routes/index.js 使代码结构看起来更为清晰。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

module.exports = function(app){

    app.get('/',function(req,res){

        res.render('index', { title: '主页' });

    });

    app.get('/reg',function(req,res){

        res.render('reg', { title: '注册' });

    });

    app.post('/reg',function(req,res){

    });

    app.get('/login',function(req,res){

        res.render('login', { title: '登录' });

    });

    app.post('/login',function(req,res){

    });

    app.get('/logout',function(req,res){

    });

    app.get('/post',function(req,res){

        res.render('post', { title: '发表' });

    });

    app.post('/post',function(req,res){

    });

};

同时在 app.js里将上面两行代码替换成。

1

routes(app);

Ok,接下来我们添加相应的ejs，实现后的前端界面结构应该如图所示。

1

2

3

4

5

6

└── views

    ├── footer.ejs

    ├── header.ejs

    ├── index.ejs

    ├── login.ejs

    └── reg.ejs

footer.ejs

1

2

3

</article>

</body>

</html>

header.ejs

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Blog</title>

<link rel="stylesheet" href="stylesheets/style.css">

</head>

<body>

<header>

<h1><%= title %></h1>

</header>

<nav>

<span><a title="主页" href="/">home</a></span>

<span><a title="登录" href="/login">login</a></span>

<span><a title="注册" href="/reg">register</a></span>

</nav>

<article>

index.ejs

1

2

3

<%- include header %>

这是主页

<%- include footer %>

login.ejs

1

2

3

4

5

6

7

<%- include header %>

<form method="post">

用户名：<input type="text" name="username" /><br />

密码：   <input type="password" name="password" /><br />

        <input type="submit" value="登录" />

</form>

<%- include footer %>

reg.ejs

1

2

3

4

5

6

7

8

<%- include header %>

<form method="post">

用户名：<input type="text" name="username" /><br />

密码：    <input type="password" name="password" /><br />

确认密码：<input type="password" name="password-repeat" /><br />

        <input type="submit" value="注册" />

</form>

<%- include footer %>

上面所做的工作简单的概括来说就是把整个 blog 的 header 和 footer 分离开，并按此建立相应的登陆，注册页面。

可以通过访问http://localhost:3000/ 来查看当前主页。

mongo db

首先是安装。mac下安装mongodb很简单。

1

2

brew update

brew install mongodb

测试

1

2

3

mongo

> db.test.save({a:1})

> db.test.find()

mongo db装上后 开始安装node js的依赖。

在 package.json 中加入。

1

2

"mongodb":"*",

"connect-mongo":"*"

运行

1

npm install

安装完成后，我们就能够在程序中对mongo db进行操作了。

我们在blog下面新建 settings.js 用来存储我们blog程序的相关配置。

1

2

3

4

5

module.exports = {

  cookieSecret: 'myblog',

  db: 'blog',

  host: 'localhost'

};

创建 models 目录并新建 js 文件 db.js 用来操作 db

1

2

3

4

5

var settings = require('../settings'),

    Db = require('mongodb').Db,

    Connection = require('mongodb').Connection,

    Server = require('mongodb').Server;

module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT, {}));

而Package connect-mongo 是用来存储会话信息到数据库。

在 app.js 中添加。

1

2

var MongoStore = require('connect-mongo')(express);

var settings = require('./settings');

同时在 app.use(express.methodOverride()) 后面添加

1

2

3

4

5

6

7

app.use(express.cookieParser());

app.use(express.session({

      secret: settings.cookieSecret,

      store: new MongoStore({

      db: settings.db

   })

}));

其中 express.cookieParser() 是 Cookie 解析的中间件。express.session() 则提供会话支持，设置它的 store 参数为 MongoStore 实例，把会话信息存储到数据库中，以避免丢失。
在后面的小节中，我们可以通过 req.session 获取当前用户的会话对象，以维护用户相关的信息。”
至此，数据库的配置工作完成了，后面我们就可以用数据库了。

结论

Express的代码结构看起来还是蛮清晰的，npm上的第三方的资源也很丰富。

由于本人是Express的初学者，所以整个 blog 的过程也是完全参考 【一起学node.js （一）】用node+express搭建多人博客 这篇blog的内容，在此也感谢下原作者。

参考

【一起学node.js （一）】用node+express搭建多人博客

相关文章