Documentos de diseño y desarrollo web del sistema de autodetección COVID-19
El primer proyecto de Sylvan Ding basado en Vue.js. La información proporcionada en este proyecto es solo de referencia y no se garantiza la exactitud, validez, puntualidad e integridad de la información. Para obtener más información, consulte la Comisión Nacional de Salud y Salud. ¡sitio web!
Explore los documentos »
Ver demostración · Informar error · Solicitar función
El servidor Express integrado del proyecto resuelve el problema de error 404 de Axios al enviar un datagrama simulado de solicitud POST
Expresses un marco de aplicación web Node.js mínimo y flexible que proporciona un conjunto sólido de funciones para aplicaciones web y móviles.
Cuando axios usaba el método 'POST' para solicitar datos simulados en /static/mock, arrojaba un error 404, lo que indicaba que no se encontró el archivo JSON. Nosotros, sin embargo, podemos hacerlo utilizando el método 'GET'. Es un problema que el servidor no puede responder correctamente, en lugar de un problema de axios. En nuestro proyecto, construimos un servidor web simple con Express para solucionar el error 404 'POST'. Tenga en cuenta que el servidor sólo funcionará en un entorno de desarrollo .
entorno de desarrollo
| nodo | 14.16.1 |
|---|---|
| npm | 8.18.0 |
| ver-cli | 2.9.6 |
| vista | 2.5.2 |
solución
Enrutador
# Installation
npm i express morgan -D --legacy-peer-deps
morganes un middleware de registro de solicitudes HTTP para node.js.
Para seguir el estándar, CommonJS, creamos un módulo denominado dev.server.jscomo config/nuestro archivo de inicio y configuración Express:
// 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 }
La configuración de la aplicación Express anterior le permite acceder a cualquier recurso estático mediante /staticel método 'GET', mientras que recursos específicos como los que /mock/feedback_success.jsontambién se pueden obtener mediante 'POST'.
Configuración del puerto
Se le permite designar el puerto de su servidor Express en 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
// ...
}
// ...
}
También configuramos process.envuna variable global DEVSERVERPORTpara que pueda hacer referencia devServerPorta cualquier parte del proyecto.
// 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
// ...
Uso
Importe dev.server.jsy config/dev.env.jsejecute el servidor:
// config/dev.env.js
const devServer = require('./dev.server')
const port = require('./index').dev.devServerPort
// ...
devServer.run(port)
Por ejemplo, al enviar 'POST' a http://localhost:devServerPort/static/mock/feedback_success.json, obtendrás la devolución { "res": "1", "msg": "反馈提交成功！" }.
Indique la fuente al reimprimir: ©️ Sylvan Ding 2022