ホームページ ウェブフロントエンド jsチュートリアル ノードは Express を実装することで独自のサーバー インスタンスを構築します

ノードは Express を実装することで独自のサーバー インスタンスを構築します

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

この記事では、Express で独自サーバーを構築するノードを中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

はじめに

シミュレーション プロジェクトを起動するには、データを呼び出すための API を提供するサーバーが必要です。今回は Express Framework を使用して API インターフェイスを作成しました。すべてのリクエストは、サーバーに対して ajax リクエストを通じて行われ、データが返されます。初めてnodeを使ってバックエンドを書くので、石を手探りで川を渡るような感じです。記事に不備があればご指摘ください。

Express Frameworkをインストールします

ポータル: Express公式

次に、Node自体が提供するいくつかのライブラリを導入する必要があるミドルウェアを紹介します。提供されていないライブラリについては、手動の 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 をサポートしていることがわかります。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;
ログイン後にコピー

上記のコードは、ブログデータベースに正常に接続され、プライベートIDが自動的に有効になったことを意味します。 mongodb によって生成されたデータに追加されます。直接使用できます。この時点で、データベースとサーバーは接続されました。

フロントエンドから送信されたリクエストを処理する

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("文件删除成功!");
 });
});
ログイン後にコピー

ここで写真をアップロードするには、必要に応じて、以前に作成したアップロード モジュールを直接使用します。プレビュー プロセスの場合、アップロード インターフェイスを直接呼び出すべきではありません。ネイティブ ノードの fs モジュールを使用して、追加されたファイルを削除したり変更したりすることもできます。

オンラインになった後とオンラインになった後に発生する履歴モードの更新の問題

オンラインプロセスは、プログラムを実行するコンピューターを変更することと考えることができます。ここでは、Alibaba Cloudサーバーを使用しています。クラウド サーバーに適切な環境をインストールし、そこにプロジェクトをクローンし、forever, start ~ ok などの永続的なランタイム ライブラリをインストールすると、プロジェクトは常に実行されます。 www アクセスが必要な場合は、サーバーを指す DNS 解決とドメイン名も購入する必要があります。

上記のプロジェクトをローカルで実行すれば、基本的には問題ありません。ただし、プロジェクトがオンラインになった後は更新されます。ああ? ? 404 どういうこと? Baidu を開いて調べてください。それは大変なことです~~ 履歴モードは現在のエンドで有効になっており、履歴のサポートもバックエンドで有効にする必要があります。 Express 環境は次のとおりです:

var history = require('connect-history-api-fallback');
var connect = require('connect');
///////
app.use(history());
ログイン後にコピー

更新コード更新~OK 完璧!

まとめ

何かをしっかり学びたいなら、長期的な積み重ねが必要です。フロントエンドとして、サーバー データベースに関する知識は、兄弟 (バックエンド) との通信を改善するのに役立つだけでなく、フロントエンドにとっては水を得た魚のようなものでもあります。

関連する推奨事項:

Express.Router インスタンスを使用した Node.js の詳細な説明

jq ページング効果を実現するために Express と組み合わせた Paginator

シンプルなファイルアップロードを実装するための nodejs+express の使用の詳細な説明機能

以上がノードは Express を実装することで独自のサーバー インスタンスを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Mar 28, 2023 pm 07:28 PM

ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。

Nodeのプロセス管理ツール「pm2」を徹底分析 Nodeのプロセス管理ツール「pm2」を徹底分析 Apr 03, 2023 pm 06:02 PM

この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。

PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか? PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか?ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

Vue フレームワークで統計グラフ システムを迅速に構築する方法 Vue フレームワークで統計グラフ システムを迅速に構築する方法 Aug 21, 2023 pm 05:48 PM

Vue フレームワークで統計グラフ システムを迅速に構築する方法 最新の Web アプリケーションでは、統計グラフは不可欠なコンポーネントです。人気のあるフロントエンド フレームワークとして、Vue.js は、統計グラフ システムを迅速に構築するのに役立つ便利なツールとコンポーネントを多数提供します。この記事では、Vue フレームワークといくつかのプラグインを使用して、簡単な統計グラフ システムを構築する方法を紹介します。まず、Vue スキャフォールディングといくつかの関連プラグインのインストールなど、Vue.js 開発環境を準備する必要があります。コマンドラインで次のコマンドを実行します

Angular と Node を使用したトークンベースの認証 Angular と Node を使用したトークンベースの認証 Sep 01, 2023 pm 02:01 PM

認証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認証システムと、それが従来のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従来の認証システム トークンベースの認証システムに進む前に、従来の認証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを実行してバックエンドでユーザーを認証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。

シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか? シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか? Feb 24, 2023 pm 07:33 PM

シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか?次の記事ではnodeを使ってシングルサインオンシステムを実現する方法を紹介しますので、参考になれば幸いです。

Express と Laravel の詳細な比較: 最適なフレームワークを選択するには? Express と Laravel の詳細な比較: 最適なフレームワークを選択するには? Mar 09, 2024 pm 01:33 PM

Express と Laravel の詳細な比較: 最適なフレームワークを選択するには?プロジェクトに適したバックエンド フレームワークを選択する場合、Express と Laravel が開発者の間で人気のある 2 つの選択肢であることは間違いありません。 Express は Node.js ベースの軽量フレームワークであり、Laravel は PHP ベースの人気のあるフレームワークです。この記事では、これら 2 つのフレームワークの長所と短所を詳しく比較し、開発者がニーズに最適なフレームワークを選択できるように、具体的なコード例を示します。パフォーマンスとスケーラビリティExpr

Express と Laravel の比較分析: より自分に合ったフレームワークを選択してください Express と Laravel の比較分析: より自分に合ったフレームワークを選択してください Mar 10, 2024 pm 10:15 PM

Express と Laravel は非常に人気のある 2 つの Web フレームワークで、それぞれ JavaScript と PHP の 2 つの主要な開発言語の優れたフレームワークを代表します。この記事では、開発者がプロ​​ジェクトのニーズにより適したフレームワークを選択できるように、これら 2 つのフレームワークの比較分析を実施します。 1. フレームワークの概要 Express は、Node.js プラットフォームに基づく Web アプリケーション フレームワークであり、開発者が高性能の Web アプリケーションを迅速に構築できるようにする一連の強力な機能とツールを提供します。急行

See all articles