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

node透過實作express來搭建自己的伺服器實例

May 14, 2018 am 11:16 AM
express node 搭建

本文主要介紹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.js使用Express.Router實例詳解

jq Paginator結合express實現分頁效果

詳解使用nodejs+express實作簡單的檔案上傳功能

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

node專案中如何使用express來處理檔案的上傳 node專案中如何使用express來處理檔案的上傳 Mar 28, 2023 pm 07:28 PM

怎麼處理文件上傳?以下這篇文章為大家介紹一下node專案中如何使用express來處理文件的上傳,希望對大家有幫助!

深入淺析Node的進程管理工具'pm2” 深入淺析Node的進程管理工具'pm2” Apr 03, 2023 pm 06:02 PM

這篇文章跟大家分享Node的進程管理工具“pm2”,聊聊為什麼需要pm2、安裝和使用pm2的方法,希望對大家有幫助!

Pi Node教學:什麼是Pi節點?如何安裝和設定Pi Node? Pi Node教學:什麼是Pi節點?如何安裝和設定Pi Node? Mar 05, 2025 pm 05:57 PM

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點,並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後,成為眾多先鋒積極參與測試的重要環節,為即將到來的主網發布做準備。如果您還不了解PiNetwork,請參考Pi幣是什麼?上市價格多少? Pi用途、挖礦及安全性分析。什麼是PiNetwork? PiNetwork項目始於2019年,擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與

Vue框架下,如何快速建構統計圖表系統 Vue框架下,如何快速建構統計圖表系統 Aug 21, 2023 pm 05:48 PM

在Vue框架下,如何快速建立統計圖表系統在現代網頁應用中,統計圖表是必不可少的組成部分。 Vue.js作為一個流行的前端框架,提供了許多方便的工具和元件,能夠幫助我們快速建立統計圖表系統。本文將介紹如何利用Vue框架以及一些外掛程式來建立一個簡單的統計圖表系統。首先,我們需要準備一個Vue.js的開發環境,包括安裝Vue腳手架以及一些相關的插件。在命令列中執行以下命

使用Angular和Node進行基於令牌的身份驗證 使用Angular和Node進行基於令牌的身份驗證 Sep 01, 2023 pm 02:01 PM

身份驗證是任何網路應用程式中最重要的部分之一。本教程討論基於令牌的身份驗證系統以及它們與傳統登入系統的差異。在本教程結束時,您將看到一個用Angular和Node.js編寫的完整工作演示。傳統身份驗證系統在繼續基於令牌的身份驗證系統之前,讓我們先來看看傳統的身份驗證系統。使用者在登入表單中提供使用者名稱和密碼,然後點擊登入。發出請求後,透過查詢資料庫在後端驗證使用者。如果請求有效,則使用從資料庫中獲取的使用者資訊建立會話,然後在回應頭中傳回會話訊息,以便將會話ID儲存在瀏覽器中。提供用於存取應用程式中受

什麼是單一登入系統?用nodejs怎麼實作? 什麼是單一登入系統?用nodejs怎麼實作? Feb 24, 2023 pm 07:33 PM

什麼是單一登入系統?用nodejs怎麼實作?以下這篇文章為大家介紹一下使用node實作單一登入系統的方法,希望對大家有幫助!

霧鎖王國能野地搭建築嗎 霧鎖王國能野地搭建築嗎 Mar 07, 2024 pm 08:28 PM

玩家在霧鎖王國中進行遊戲時可以收集不同的材料用來建造建築,有很多玩家想知道野地搭建築嗎,霧鎖王國能野地是不能搭建築的,必須要在祭壇的範圍內才可以搭建。霧鎖王國能野地搭建築嗎答:不能。 1.霧鎖王國能野地是不能搭建築的。 2、建築必須要在祭壇的範圍內才可以搭建。 3、玩家可以自行放置靈火祭壇,但一旦離開了範圍,將無法進行建築搭建。 4.我們也可以直接在山上挖個洞當做我們的家,這樣不用耗建築材料。 5.玩家自己搭建的建築中,有舒適度機制,也就是說,內裝越好,舒適度越高。 6.高舒適度將為玩家帶來屬性加成,例如

深入比較Express和Laravel:如何選擇最佳框架? 深入比較Express和Laravel:如何選擇最佳框架? Mar 09, 2024 pm 01:33 PM

深入比較Express和Laravel:如何選擇最佳框架?在選擇一個適合自己專案的後端框架時,Express和Laravel無疑是兩個備受開發者歡迎的選擇。 Express是基於Node.js的輕量級框架,而Laravel則是基於PHP的流行框架。本文將深入比較這兩個框架的優缺點,並提供具體的程式碼範例,以幫助開發者選擇最適合自己需求的框架。效能和擴展性Expr

See all articles