用Express搭建 blog (一)

時間 2019-11-19

標籤 express 搭建 blog 简体版

原文原文鏈接

Info

公司立刻要舉行 hack day 了，此次決定和小夥伴用 Express 做爲框架來搭建咱們的應用，因此昨天搭出來UI後，今天開始系統的學習下 Express。javascript

Start

首先是express的全局設置。css

1	sudo npm install -g express

接着咱們試着用express搭建一個簡單的blog程序
在work path 運行命令html

1	express -e ejs blog

能夠看到express已經幫你建立了一系列的模板程序。接着進入blog目錄安裝ejs等相關依賴。前端

1	cd blog && npm install

運行java

node app

並訪問http://localhost:3000/ ,簡單的hello world 程序已經生成。node

下面來看下程序的整個結構，運行commandmongodb

1	tree -I node*

express的模板程序結構看起來和rails的結構很相像。數據庫

├── app.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── user.js
└── views
    └── index.ejs

Blog Design

對express的模板程序有了基本概念後，咱們開始來實現一個稍微複雜的blog。
blog 須要實現下面的功能。express

/：首頁
/login：登陸
/reg：註冊
/post：發表文章
/logout：登出

blog 的數據存儲採用mongodb。npm

Improve

首先我門先簡單的改進下咱們當前的blog程序。

首先是重寫默認的路由

在 app.js 裏面咱們能夠看到如下兩行語句。

1 2	app.get('/', routes.index); app.get('/users', user.list);

咱們把這部分代碼移到 routes/index.js 使代碼結構看起來更爲清晰。

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，實現後的前端界面結構應該如圖所示。

└── views
    ├── footer.ejs
    ├── header.ejs
    ├── index.ejs
    ├── login.ejs
    └── reg.ejs

footer.ejs

1
2
3

</article>
</body>
</html>

header.ejs

<!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

<%- 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

<%- 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程序的相關配置。

module.exports = { 
  cookieSecret: 'myblog', 
  db: 'blog', 
  host: 'localhost'
};

建立 models 目錄並新建 js 文件 db.js 用來操做 db

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()) 後面添加

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 獲取當前用戶的會話對象，以維護用戶相關的信息。」
至此，數據庫的配置工做完成了，後面咱們就能夠用數據庫了。