本文主要介紹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中文網其他相關文章!