我正在使用解决数独游戏的 API。如果我理解正确,我的问题是从 API 获取数据。API 正在返回数据。我也尝试过不使用后端并收到 400 bad request 错误。我对编程很陌生,需要你的帮助。
这是错误消息的链接https://imgur.com/a/brFk7Oo
这是网络错误的链接https://imgur.com/PsBsefW
应用程序.js
// Selectors
const puzzleBoard = document.querySelector('#puzzle');
const solveButton = document.querySelector('#solve-button');
const solutionDisplay = document.querySelector('#solution');
const squares = 81;
let submission = [];
//functions
for (let i = 0; i < squares; i++) {
const inputElement = document.createElement('input');
inputElement.setAttribute('type', 'number');
inputElement.setAttribute('min', '1');
inputElement.setAttribute('max', '9');
if (
((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i < 21) ||
((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i < 27) ||
((i % 9 == 3 || i % 9 == 4 || i % 9 == 5) && (i > 27 && i < 53)) ||
((i % 9 == 0 || i % 9 == 1 || i % 9 == 2) && i > 53) ||
((i % 9 == 6 || i % 9 == 7 || i % 9 == 8) && i > 53)
) {
inputElement.classList.add('odd-section')
}
puzzleBoard.appendChild(inputElement);
}
// wrapped the document in a new div
const wrapper = document.createElement('div')
puzzleBoard.parentNode.insertBefore(wrapper, puzzleBoard)
wrapper.appendChild(puzzleBoard)
wrapper.className = "puzzle"
const joinValues = () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
if (input.value) {
submission.push(input.value);
} else {
submission.push('.');
}
})
console.log(submission)
}
const populateValues = (isSolvable, solution) => {
const inputs = document.querySelectorAll('input');
if (isSolvable && solution) {
inputs.forEach((input, i) => {
input.value = solution[i];
})
solutionDisplay.innerHTML = 'Here is the answer!';
} else {
solutionDisplay.innerHTML = 'You made a mistake, this is not solvable';
}
}
const solve = () => {
joinValues()
const data = {numbers: submission.join('')}
console.log('data', data)
fetch('http://localhost:8000/solve', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(data)
}) .then(response => response.json())
.then(data => {
console.log(data)
populateValues(data.solvable, data.solution)
submission = []
})
.catch((error) => {
console.error('Error:', error)
})
}
solveButton.addEventListener('click', solve);
服务器.js
const PORT = 8000
const axios = require('axios').default
const express = require('express')
const cors = require('cors')
require('dotenv').config()
const app = express()
app.use(cors())
app.use(express.json())
app.post('/solve', (req, res) => {
const options = {
method: 'POST',
url: 'https://solve-sudoku.p.rapidapi.com/',
headers: {
'content-type': 'application/json',
'x-rapidapi-host': 'solve-sudoku.p.rapidapi.com',
'x-rapidapi-key': process.env.RAPID_API_KEY
},
data: {
puzzle: req.body.numbers
}
}
axios.request(options).then((response) => {
console.log(response.data)
res.json(response.data)
}).catch((error) => {
console.error(error)
})
})
app.listen(PORT, () => console.log(`server listening on PORT ${PORT}`))
非常感谢任何帮助