Node.js 蠶食計劃（四）—— Express + SQL Server 搭建電影網站

前段時間在慕課網上看了 scott 大神的《node+mongodb建站攻略》課程，按照本身的思路作了一遍，發博客記錄一下

 

1、項目介紹

這個項目是一個簡單的電影網站，由首頁、詳情頁、評論列表三個頁面構成

其中首頁展現全部電影；詳情頁展現指定電影的詳細信息，並具有提交評論的功能；評論頁展現全部的評論信息（原計劃是放在後臺管理裏面的，後來懶癌發做，就不作後臺了）

 

效果以下：

 

項目使用 SQL Server 2008 作數據庫（電腦上有現成的），Express 框架搭建服務，前端頁面都是經過 jade 模板引擎生成，爲了少寫點 css 就引入了 Bootstrap （懶...）

GitHub 地址：https://github.com/wisewrong/node-test

網站連接：http://www.wisewrong.com/

歡迎拍磚~

 

2、配置路由

首先使用 express 建立一個項目

express node-movie

 

由於使用 SQL Server 做爲數據庫，因此須要引入 mssql 模塊

而後還須要引入 bootstrap 和 jquery，因此在 package.json 中添加這幾個字段

而後 npm install 安裝依賴項

 

在 app.js 中能找到這樣的一段代碼

這裏將 views 目錄設置爲視圖目錄，用來存放靜態頁面，而且只識別 .jade 類型的文件

若是直接使用 .html 文件，就須要把第二行代碼改成

app.set('view engine', 'html');

可是經過模板引擎，在後端渲染頁面的效率更高

經常使用的模板引擎有 ejs 和 jade，經過 Express 搭建的項目會默認使用 jade，因此這裏咱們也使用 jade 寫模板

// jade 由於商標衝突，已經更名爲 pug，可是 express 默認依賴還沒更名，就先繼續用 jade 吧

若是還不熟悉 jade 的語法，能夠看一看這篇文章學習一下  http://www.javashuo.com/article/p-rpweacxh-h.html

 

我一共寫了這五個模板，其中 error.jade 是 404 頁面，layout.jade 是基本結構，包含 header 和 footer

index.jade 是首頁，detail.jade 是詳情頁，list.jade 是評論列表

 

上一篇博客中提到，若是須要引入 css 或者 js，通常是css 和 js 文件拷貝到 public 目錄下，而後在頁面中引入

項目中須要引入 bootstrap，若是以這種方式引入，還得去 node_modules 目錄下找到對應的文件

因此我在 app.js 中添加了這一行代碼

app.use('/lib', express.static(path.join(__dirname, 'node_modules')));

這樣在 layout.jade 中引入的依賴文件的時候，就能夠這麼寫

 

頁面內容能夠先忽略，先把路由給配置好

在 routes 目錄下建立三個頁面對應的 js 文件

 

而後在 app.js 中引入

在 app.js 中配置路由結點

而後在瀏覽器中打開項目，就能正確的渲染頁面了

 

3、建立數據

熟悉 SQL Server 的小夥伴能夠跳過這一節，這部分只是介紹如何在 SQL Server 中建立簡單的數據

 

具體的頁面開發再也不贅述，熟悉了 jade 的語法以後，寫起來仍是很順手的

在開發頁面的時候，頁面上的數據能夠先寫死，以方便查看頁面效果

頁面開發完成以後，再把數據挪到數據庫裏面

 

在 SQL Server 中建立數據並不複雜，首先打開 SQL Server，鏈接本地服務器，建立一個登陸名

 

而後建立一個數據庫

 

展開剛纔新建的數據庫，新建表

將 id 設爲惟一標識，不可爲 null，其餘字段只設定數據類型便可

編輯完成後 CTRL+S 保存並命名（記住這個表名）

而後選擇剛纔建立的表，右鍵 「編輯前200行」，而後錄入數據

 

4、鏈接數據庫

以首頁爲例，在鏈接數據庫以前，頁面上須要這些參數：

爲了獲取到 movies，須要鏈接數據庫，首先在 index.js 裏面引入 mssql 模塊

關於 mssql 的詳細信息能夠看這裏（英文）https://www.npmjs.com/package/mssql

 

而後建立配置項：

 

鏈接數據庫

const sql = require('mssql') /* GET home page. */ router.get('/', function(req, res, next) { sql.connect(config).then(() => { // 插入SQL語句 
     return sql.query`select * from mytable` }).then(result => { res.render('index', { title: 'WiseWrong', movies: result.recordset //查詢結果
 }); sql.close(); // 斷開數據庫的鏈接，很關鍵
  }).catch(err => { res.render('error'); console.log('出錯了 ', err); }) sql.on('error', err => { res.render('error'); console.log('出錯了 ', err); }) });

上面的代碼是直接寫在 index.js 裏面了，若是每一個頁面都寫一套，確定會有大量的重複性代碼，因此必定得封裝一下

 

若是是提交表單，只須要把接口地址改一改，而後處理數據，編寫SQL就行