這是服務器
const dotenv = require('dotenv');
dotenv.config();
// Configuring environment variables
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mockAPIResponse = require('./mockAPI.js');
const axios = require('axios');
const PORT = 8081;
const API_URL = 'https://api.meaningcloud.com/sentiment-2.1';
const apiKey = process.env.API_KEY
// Start an instance for the server
const app = express();
// Cors for cors-origin allowance
app.use(cors());
// Configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Configure express static directory.
app.use(express.static('dist'));
app.get('/', function (req, res) {
// res.sendFile('dist/index.html')
res.sendFile(path.resolve('src/client/views/index.html'))
});
app.post('/add-url', async (req, res) => {
const userInput = req.body.url
const URL = `${API_URL}?key=${apiKey}&url=${userInput}&lang=en`
console.log(URL)
try {
const data = await axios(URL)
// console.log(data)
res.json({
// text: data.sentence_list[0].text,
score_tag: data.score_tag,
agreement: data.agreement,
subjectivity: data.subjectivity,
confidence: data.confidence,
irony: data.irony
})
return data
}
catch (error) {
console.log(error.message)
res.json({
status: 'error',
message: 'Error: failed to fetch data'
})
}
});
app.get('/test', function (req, res) {
res.send(mockAPIResponse)
})
// Setup Server
app.listen(PORT, (error) => {
if (error) throw new Error(error)
console.log(`Server listening on port ${PORT}!`)
})
這是客戶端
客戶端/表單處理程式
import { checkURL } from "./checkURL"
const post = async (url = '', data = {}) => {
const response = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
try {
return await response.json()
}
catch (error) {
console.log('error', error)
}
}
const handleSubmit = async (event) => {
event.preventDefault()
const url = document.getElementById('article-url').value
// console.log(url)
if(checkURL(url)) {
post('http://localhost:8081/add-url', {url}).then(data => {
document.getElementById('text').innerHTML = `Text: ${data.text}`
document.getElementById('score_tag').innerHTML = `Polarity: ${data.score_tag}`
document.getElementById('agreement').innerHTML = `Agreement: ${data.agreement}`
document.getElementById('subjectivity').innerHTML = `Subjectivity: ${data.subjectivity}`
document.getElementById('confidence').innerHTML = `Confidence: ${data.confidence}`
document.getElementById('irony').innerHTML = `Irony: ${data.irony}`
// console.log(data)
})
}
else {
alert('Please enter a valid URL')
}
}
export default handleSubmit
客戶端/index.js
import handleSubmit from './js/formHandler';
import { checkURL } from './js/checkURL';
window.addEventListener('DOMContentLoaded', () => {
const buttonSubmit = document.querySelector('.btn-submit')
buttonSubmit.addEventListener("click", () => {
handleSubmit()
})
})
export {
checkURL,
handleSubmit
}
客戶端/index.html
<body>
<main>
<div class="container">
<p>Enter a URL of an article / a blog to discover its sentiment.</p>
<section>
<form id="form" onsubmit="return Client.handleSubmit(event)">
<label for="article-url">URL</label>
<input id="article-url" type="text" name="input" value="" placeholder="Enter Article URL here" />
<button
type="submit"
class="btn-submit"
>
Submit
</button>
</form>
</section>
<section>
<strong>Form Results:</strong>
<div id="text"></div>
<div id="agreement"></div>
<div id="subjectivity"></div>
<div id="confidence"></div>
<div id="irony"></div>
<div id="score_tag"></div>
</section>
</div>
</main>
<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
})
}
</script>
</body>
以下是我得到的錯誤：
1-在控制臺中
未捕獲的型別錯誤：buttonSubmit.addEventListener 不是“在 index.js:10”處的函式
附加的影像是 index.html 中的結果
如果有人可以為我提供解決此問題的任何方法。我是 webpack 和 API 的新手
uj5u.com熱心網友回復：
嘗試這個。
const buttonSubmit = document.querySelector('.btn-submit')
if( document.readyState !== 'loading' ) {
console.log( 'document is already ready, just execute code here' );
buttonSubmit.addEventListener("click", () => {
handleSubmit()
})
} else {
document.addEventListener('DOMContentLoaded', function () {
console.log( 'document was not ready, place code here' );
buttonSubmit.addEventListener("click", () => {
handleSubmit()
})
});
}
IMO 不需要使用 DOMContentLoaded，您可以在 index.html 的最后包含帶有 defer 標簽的 index.js。
<script src="./index.js" defer />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/346350.html
標籤：javascript 节点.js 表达
上一篇：為什么等待會導致我的流被讀取