ホームページ > 記事 > ウェブフロントエンド > ノードは Express を実装することで独自のサーバー インスタンスを構築します
この記事では、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 サイトの他の関連記事を参照してください。