我正在嘗試為我的 Vue Express 應用程式創建一個注冊頁面，并且客戶端和服務器端正在運行，并且在 Postman 中它顯示它正在接收請求，但在我的瀏覽器中我仍然無法獲取/注冊。節點版本是 16.13.2，Vue 是 @vue/cli 5.0.1。另外，我不知道這是否相關，但是對于我的路由器，我嘗試從 vue-router 匯入，但后來我查看 node_modules 我在任何地方都看不到它。任何幫助將不勝感激，我的代碼如下：
應用程式.js
console.log('hello')
const express = require('express')
//const router = express.Router()
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
//app assigned to express server and functionality below
const app = express()
app.use(morgan('combine'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cors())
app.get('/', function(req, res) {
res.send({
message: 'Welcome'
})
})
app.post('/register', function (req, res) {
res.send({
message: 'Hello, you have been registered. Enjoy!'
})
})
app.listen(process.env.PORT || 8081)
index.js
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
import Hello from '@/components/HelloWorld.vue'
import Register from '@/components/Register.vue'
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/register',
name: 'register',
component: Register
}
]
})
注冊.vue
<template>
<div>
<h1>Register</h1>
<input
type="email"
name="email"
v-model="email"
placeholder="email" />
<br>
<input
type="password"
name="password"
v-model="password"
placeholder="password" />
<br>
<button
@click="register">
Register
</button>
</div>
</template>
<script>
import AuthenticationService from "@/services/AuthenticationService"
export default {
data () {
return {
email: '',
password: ''
}
},
methods: {
async register () {
const response = await AuthenticationService.register({
email: this.email,
password: this.password
})
console.log(response.data)
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
uj5u.com熱心網友回復：
首先，您需要考慮到您的應用程式的前端部分與您的后端分開運行（即使它們在同一臺機器上），所以前端的路由器與后端無關，這就是為什么您可以使用郵遞員訪問服務器，但沒有任何渲染。
這是我所看到的：
- 您讓后端運行并監聽 2 個位置：
GET "/"和POST "/register". - 如果您運行服務器，然后在瀏覽器中轉到根目錄 (/)，您將在控制臺中看到該訊息，但沒有呈現任何內容，因為服務器只是在回應一條訊息，所以沒有呈現任何內容。
- 當您使用郵遞員測驗 POST 時，服務器正在回應一條訊息（也沒有呈現任何內容），因為服務器沒有“提供”任何內容。
如果您希望用戶在導航到任何路線時看到某些內容，則服務器需要回傳瀏覽器可以顯示的內容（您的前端）。使用 Vue，你有一個單頁應用程式，這意味著你不需要服務器檢查每個位置的服務，你有內部的 Vue 路由器，但你需要服務器在某個時候回傳你的索引。
為此，您需要將您index.html的檔案作為靜態檔案提供，因此您需要添加：
app.use(express.static("PathToTheFolderContainingYourVueApplication"))
相關檔案
然后在任何路由中，您應該開始為您index.html的情況（以及許多 vue 應用程式）提供服務，您希望為服務器不知道的任何路由提供索引，因為 Vue 路由器可以決定顯示某些內容，當然還有您的Vue 應用程式應該處理沒有人知道的路線被擊中的場景（著名的 404）。
您的代碼將如下所示：
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
// Here you need the path to your vue index
// __dirname is pointing to the current path where this node process is running
// check the docs for __dirname https://nodejs.org/docs/latest/api/modules.html#__dirname
const path = __dirname '/PathToTheFolderContainingYourVueIndex';
const app = express();
app.use(express.static(path)); // express now knows that it will serve files from here
//app assigned to express server and functionality below
const app = express()
app.use(morgan('combine'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cors())
// I'm commenting this, because you want Vue to show somwthing in this route
// app.get('/', function(req, res) {
// res.send({
// message: 'Welcome'
// })
// })
// leaving this because you want the server handling this route
app.post('/register', function (req, res) {
res.send({
message: 'Hello, you have been registered. Enjoy!'
})
})
// The routes are solved in order, if none of the previous ones was hit, then this one will be checked
// The * is telling express that any route will be accepted (that is why this is the last one)
app.get('*', function(req, res) {
// The server doesn't know what to show, but you will return the Vue index and then let the vue-router do its thing
res.sendFile(path "index.html");
});
app.listen(process.env.PORT || 8081)
現在您可以在瀏覽器中嘗試轉到您的 Vue 應用程式處理的任何路線（我自己沒有測驗代碼，但我假設您可以做到并發現任何問題）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/439222.html
標籤：javascript 节点.js Vue.js 表示