この記事では、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 サイトの他の関連記事を参照してください。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
