Expressでサーバーを構築するノードの例

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

前書き

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

Expressフレームワークをインストールします

ポータル: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: 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のパラメータを取得します。データベースはすでに接続されたデータベースです。 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でサーバーを構築するノードの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。