首頁 >web前端 >js教程 >node透過express搭建伺服器的實例

node透過express搭建伺服器的實例

黄舟
黄舟原創
2017-10-01 07:25:351811瀏覽

這篇文章主要介紹了node透過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,也可以真實模擬上線資料庫。

下面會劃成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 完美!

總結

想學好一樣東西,需要長久的累積。作為一個前端,一些伺服器資料庫的知識除了可以幫助我們更好的跟兄弟(後端)交流,對前端來說也是如魚得水一般的存在。

以上是node透過express搭建伺服器的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn