COVID-19 自己検出システムの Web デザインおよび開発ドキュメント
Vue.js をベースにした Sylvan Ding の最初のプロジェクト。このプロジェクトで提供される情報は参照のみを目的としており、情報の正確性、有効性、適時性、完全性は保証されません。詳細については、国家衛生健康委員会委員会を参照してください。 Webサイト！
ドキュメントを参照する »
デモを表示する·バグを報告する·機能をリクエストする
プロジェクトの組み込み Express サーバーは、Axios が POST リクエストのモック データグラムを送信する際の 404 エラーの問題を解決します。
Expressは、Web アプリケーションとモバイル アプリケーションに堅牢な機能セットを提供する、最小限で柔軟な Node.js Web アプリケーション フレームワークです。
axios が 'POST' メソッドを使用して のモック データをリクエストすると/static/mock、JSON ファイルが見つからなかったことを示す 404 エラーがスローされました。ただし、「GET」メソッドを使用してこれを行うことができます。axiosの問題ではなく、サーバーが正しく応答できない問題です。私たちのプロジェクトでは、「POST」 404 エラーに対処するために、Express を使用して単純な Web サーバーを構築します。サーバーは開発環境でのみ動作することに注意してください。
開発環境
| ノード | 14.16.1 |
|---|---|
| npm | 8.18.0 |
| ビュー-cli | 2.9.6 |
| ビュー | 2.5.2 |
解決
ルーター
# Installation
npm i express morgan -D --legacy-peer-deps
morganは、node.js の HTTP リクエスト ロガー ミドルウェアです。
標準の CommonJS に従うために、 Express 構成および起動ファイルとしてdev.server.jsという名前のモジュールを作成します。config/
// config/dev.server.js
const path = require('path')
const logger = require('morgan')
const express = require('express')
const feedback_success = require('../static/mock/feedback_success.json')
const feedback_error = require('../static/mock/feedback_error.json')
function run(port) {
const app = express()
const router = express.Router()
// every request gets logged
router.use(logger())
// POST method route
router.post('/mock/feedback_success.json', function(req, res) {
// send a JSON response
res.json(feedback_success)
})
router.post('/mock/feedback_error.json', function(req, res) {
res.json(feedback_error)
})
// express.static serves all static files
router.use('/', express.static(path.resolve(__dirname, '../static')))
// load the router module in the app
app.use('/static', router)
// start app
app.listen(port)
}
module.exports = {
run }
上記の Express アプリ構成では、「GET」メソッドで静的リソースにアクセスできます/staticが、/mock/feedback_success.json「POST」でも特定のリソースを取得できます。
ポート設定
次の場所で Express サーバー ポートを指定できますconfig/index.js。
// config/index.js
const port = 8080
const devServerPort = 8081
module.exports = {
dev: {
// ...
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
devServerPort // Express web server port
// ...
}
// ...
}
また、プロジェクト内のどこでも参照できるように、グローバルprocess.env変数も設定します。DEVSERVERPORTdevServerPort
// build/webpack.dev.conf.js
//...
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
process.env.DEVSERVERPORT = config.dev.devServerPort // !!!
// add port to devServer config
devWebpackConfig.devServer.port = port
// ...
使用法
サーバーにインポートして実行しdev.server.jsます。config/dev.env.js
// config/dev.env.js
const devServer = require('./dev.server')
const port = require('./index').dev.devServerPort
// ...
devServer.run(port)
たとえば、 に 'POST' を送信するとhttp://localhost:devServerPort/static/mock/feedback_success.json、 が返されます{ "res": "1", "msg": "反馈提交成功！" }。
転載の際は出典を明記してください: ©️ Sylvan Ding 2022