經過express搭建本身的服務器

前言

爲了模擬項目上線，咱們就須要一個服務器去提供API給咱們調用數據。此次我採用express框架去寫API接口。全部請求都是經過ajax請求去請求服務器來返回數據。第一次用node寫後端，基本就是摸着石頭的過河，文中有什麼不足不處歡迎指出。

安裝express框架

傳送門： express官方

而後介紹一下須要引入的中間件，node自己提供了一些庫。咱們能夠直接經過require去引用，對於未提供的庫，咱們也能夠經過手動npm去安裝

var fs = require('fs');  操做文件模塊
var http = require('http');  http模塊
var url = require('url');   獲取url信息模塊
var qs = require('querystring'); 處理url參數模塊
var path = require('path');  文件路徑模塊
var bodyParser = require('body-parser'); 請求體對象化 （必須）不然後臺沒法解析前端發送的body內容

接下來直接啓用模塊

app.use(bodyParser.json());

// 訪問靜態資源文件 這裏是訪問全部dist目錄下的靜態資源文件
app.use(express.static(path.resolve(__dirname, '../dist')))
app.use(express.static('public'));

// 由於是單頁應用 全部請求都走/dist/index.html
app.get('／', function(req, res) {
  const html = fs.readFile(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
  res.send(html)
});

//處理請求跨域

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Content-Type", "application/json;charset=utf-8");
  res.header("Access-Control-Allow-Headers", "content-type");
  next();
});

準備工做作完能夠開始動手寫接口了。關於數據庫能夠模擬一個json，也能夠真實模擬上線數據庫。關於本文設計的mongodb數據庫，有興趣能夠看個人另外一篇文章
。

快速搭建屬於本身的數據庫——mongodb

下面會劃成3塊說明——數據庫的對接、請求的操做、文件請求的操做。

數據庫鏈接

這裏我假設你已經安裝了mongodb數據庫併成功啓用。仔細閱讀express教程你會發現框架提供了對mongodb的支持，mongodb有很是多的擴展插件去使用該數據庫 好比mongoose。這裏咱們使用express官方提供的mongoskin來連接數據庫。

$ npm install mongoskin

＃＃＃＃＃官方實例

var db = require('mongoskin').db('localhost:27017/animals');

db.collection('mamals').find().toArray(function(err, result) {
  if (err) throw err;
  console.log(result);
});

安裝成功後 ，咱們就首先把使用的數據庫引入，代碼以下

var db = require('mongoskin').db('mongodb://localhost:27017/blog');
var ObjectId = require('mongodb').ObjectID;

以上代碼表示咱們成功鏈接了blog數據庫而且啓用了私有ID，objectID是mongodb生成數據自動添加的ID。能夠直接拿來用。到這裏數據庫和服務器就已經對接完畢了。

對前端發送的請求進行處理

處理get請求

/**
 * 獲取文章信息
 */
app.get('/article/info', function (req, res) {
  >>>  獲取請求參數
  var arg = qs.parse(url.parse(req.url).query);
  var id = arg.id;
  >>>  連接數據庫根據參數查找文檔並返回
  db.collection('articleList').find({ "_id": ObjectId(id)}).toArray(function(err, result) {
    if (err) throw err;
    console.log(result)
    res.end(JSON.stringify(result))
  });
});

以上代碼就實現了對一個get請求的處理，經過參數模塊獲取了url的參數，db也就是已經鏈接的數據庫。根據ID對‘articleList’的數據表進行搜索，處理完畢後 經過res.end()返回數據結束響應。

處理post請求

/**
 * 提交留言信息
 */
app.post('/board/post', function (req, res) {
  >>>>  獲取請求參數
  var data = {
    date: req.body.date,
    name: req.body.name,
    content: req.body.content,
    time: req.body.time,
    position: req.body.position
  };
  
  >>> 連接數據庫並插入數據
  
  db.collection('board').insert(data, function(err, result) {
    if(err) {
      res.end('Error:'+ err)
    }
    res.end('提交成功')
  });
});

post請求的參數獲取和get不一樣 能夠直接經過req.body去獲取前端傳輸的請求體。經過js對象的方式去獲取參數。而後根據參數執行數據庫操做。到此，基本的請求也就介紹完畢了。下面說下怎麼處理圖片的上傳此類常見的文件操做需求。

對前端的文件請求進行處理

爲了簡化操做，咱們能夠引入multer模塊來處理文件，代碼以下

var multer  = require('multer');
var storage = multer.diskStorage({
  //設置上傳後文件路徑，uploads文件夾會自動建立。
  destination: function (req, file, cb) {
    cb(null, './public/uploads')
  },
  //給上傳文件重命名，獲取添加後綴名
  filename: function (req, file, cb) {
    var fileFormat = (file.originalname).split(".");
    cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
／／生成上傳模塊，讓API調用
var upload = multer({
  storage: storage
}).single('file');

以上代碼就成功引入了文件上傳模塊，經過該模塊咱們能夠快速生成相應內容，具體使用方法能夠查看官方文檔。準備工做完成後，在項目中使用：

/**
 * 圖片上傳
 */
app.post('/upload', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      console.log(err)
      return
    }
    console.log(req.file)
    res.end(JSON.stringify(req.file))
  })
});

／／圖片上傳到服務器 ，向客戶端返回文件信息
   好比文件的存儲位置，以後就能夠經過地址訪問服務器的圖片

/**
 * 圖片刪除
 */
app.post('/image/delete', function (req, res) {
  fs.unlink(req.body.path, function(err) {
    if (err) {
      return console.error(err);
    }
    res.end("文件刪除成功！");
  });
});

這裏上傳圖片咱們就直接使用了直接以前已經寫好的upload模塊，當該接口請求成功時 ，文件就已經上傳成功了，若是你須要一個預覽過程，那不該該直接調用上傳接口 。經過原生node fs模塊 咱們也能對添加的文件進行刪除，修改操做。

上線以及上線後遇到的history模式的刷新問題

上線過程咱們能夠看成就是換一臺電腦跑程序，這裏我用的是阿里雲的服務器。在雲服務器安裝好環境好，把項目克隆進去 ，再裝個forever之類的永久運行庫，start ～ok 這樣你的項目就永遠在運行了。若是須要www訪問 ，還須要買個dns解析 和域名，指向你的服務器。

以上咱們若是在本地跑項目基本已經能夠沒問題。但項目上線後一刷新。啊啦？？404什麼鬼？打開百度一查。那爐火多～～當前端啓用hisory模式，後臺也必須開啓對history的支持。express 環境以下：

var history = require('connect-history-api-fallback');
var connect = require('connect');
／／／／／／／
app.use(history());

更新代碼刷新～OK 完美！

總結

想學好同樣東西，須要長久的積累。做爲一個前端，一些服務器數據庫的知識除了能夠幫助咱們更好的跟兄弟（後端）交流，對前端來講也是如魚得水通常的存在。
下一篇文章準備寫electron入門，electron是經過js構建桌面應用的框架，。共勉～～～～～

所有源碼都在個人博客之中，對個人博客源碼有興趣，能夠fork一份自行研究

若是以爲本文對你有所幫助，就star一下吧～大傳送之術！ 個人博客Github