如何使用 javascript 中的输入表单更新对象数组 属性 的值?
How do I update an array of object property value with input form in javascript?
我目前正在学习 node.js、express.js 和把手
我有 2 个表单,添加表单和编辑表单以制作 blog/news 类型的页面
/添加项目:
app.get('/addproject', function(req, res) {
res.render('addproject', { title: "Add Project", apActive: true, active: "active" })
})
app.post('/addproject', function(req, res) {
const projectImage = req.body.projectImage;
const projectTitle = req.body.projectTitle;
const projectContent = req.body.projectContent;
const projectDate = {
startDate: req.body.projectStartDate,
endDate: req.body.projectEndDate
}
const projectTech = {
checkHtml: req.body.checkHtml,
checkNode: req.body.checkNode,
checkCss: req.body.checkCss,
checkReact: req.body.checkReact
}
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
let endDate = new Date(projectDate.endDate)
let startDate = new Date(projectDate.startDate)
function getProjectDuration(endDate, startDate) {
endDate = new Date(projectDate.endDate)
startDate = new Date(projectDate.startDate)
const distance = endDate - startDate
const miliseconds = 1000
const secondInMinute = 60
const minuteInHour = 60
const secondInHour = secondInMinute * minuteInHour // 3600
const hourInDay = 23
const dayInMonth = 30
let dayDistance = distance / (miliseconds * secondInHour * hourInDay)
if (dayDistance >= 30) {
return `${Math.floor(dayDistance / dayInMonth)}` + ` Bulan`
} else {
return `${Math.floor(dayDistance)}` + ' Hari'
}
}
const projectDetailDate = {
edDate: endDate.getDate(),
edMonth: month[endDate.getMonth()],
edYear: endDate.getFullYear(),
sdDate: startDate.getDate(),
sdMonth: month[startDate.getMonth()],
sdYear: startDate.getFullYear()
}
const projectDuration = getProjectDuration()
const projectData = {
projectImage,
projectTitle,
projectContent,
projectDate,
projectDuration,
projectTech,
projectDetailDate
}
project.push(projectData)
res.redirect('/')
})
<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
{{> navbar}}
<!--ADD PROJECT-->
<div class="ap-title my-5">
<p>ADD PROJECT</p>
</div>
<div class="ap-form m-auto">
<form action="/addproject" method="POST">
<div class="mb-3">
<label for="projectInputName" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectInputName" aria-describedby="emailHelp" name="projectTitle">
</div>
<div class="mb-3 d-flex" style="gap: 10px;">
<div class="start-date w-100">
<label for="projectInputStartDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="projectInputStartDate" name="projectStartDate">
</div>
<div class="end-date w-100">
<label for="projectInputEndDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="projectInputEndDate" name="projectEndDate">
</div>
</div>
<div class="mb-3">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" class="form-control" name="projectContent"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" name="projectImage" hidden />
</div>
</div>
<div class="ap-btn text-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!--ADD PROJECT END-->
</body>
</html>
/编辑项目:
app.get('/editproject/:id', function(req, res) {
let data = req.params.id
let edit = project[data]
res.render('editproject', { title: 'Edit Project', editForm: edit })
})
app.post('/editproject', function(req, res) {
let projectEdit = project.map(function(data) {
return {
...data = req.body
}
})
project.push(projectEdit)
res.redirect('/')
})
<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
{{> navbar}}
<!--ADD PROJECT-->
<div class="ap-title my-5">
<p>EDIT PROJECT</p>
</div>
<div class="ap-form m-auto">
<form action="/editproject" method="POST">
<div class="mb-3">
<label for="projectInputName" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectInputName" value="{{ editForm.projectTitle }}" aria-describedby="emailHelp" name="projectTitle">
</div>
<div class="mb-3 d-flex" style="gap: 10px;">
<div class="start-date w-100">
<label for="projectInputStartDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="projectInputStartDate" name="projectStartDate">
</div>
<div class="end-date w-100">
<label for="projectInputEndDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="projectInputEndDate" name="projectEndDate">
</div>
</div>
<div class="mb-3">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" class="form-control" name="projectContent">{{ editForm.projectContent }}</textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" name="checkHtml" {{#if editForm.projectTech.checkHtml}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode" {{#if editForm.projectTech.checkNode}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss" {{#if editForm.projectTech.checkCss}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact" {{#if editForm.projectTech.checkReact}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="edit-img">
<img src="/public/assets/{{ editForm.projectImage }}" alt="">
</div>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" name="editImage" onChange={data => editForm(data)} hidden />
</div>
</div>
<div class="ap-btn text-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!--ADD PROJECT END-->
</body>
</html>
/index(仅博客缩略图):
app.get('/', function(req, res) {
let cardData = project.map(function(data) {
return {
...data
}
})
res.render('index', {
title: "Home",
homeActive: true,
active: "active",
card: cardData,
})
})
<!--MP = My Project-->
<div class="mp-container">
<div class="mp-title mb-5">
<p>My Project</p>
</div>
<div class="mpc-container">
<div class="row">
{{#each card}}
<div class="col-3 mp-card mx-5">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="public/assets/{{ this.projectImage }}" alt="Thumbnail Image">
</div>
<div class="mpc-title">
<a href="/project-detail/{{ this.projectTitle }}" action="/project-detail" target="_blank">
<p>{{ this.projectTitle }}</p>
</a>
<small>Durasi: {{ this.projectDuration }}</small>
</div>
<div class="mpc-content">
{{ this.projectContent }}
</div>
<div class="mpc-icons">
{{#if this.projectTech.checkHtml}} <i class="fa-brands fa-html5"></i> {{/if}}
{{#if this.projectTech.checkCss}} <i class="fa-brands fa-css3-alt"></i> {{/if}}
{{#if this.projectTech.checkNode}} <i class="fa-brands fa-node-js"></i> {{/if}}
{{#if this.projectTech.checkReact}} <i class="fa-brands fa-react"></i> {{/if}}
</div>
<div class="mpc-mod">
<a href="/editproject/{{ @index }}" action="/edit-project">Edit</a>
<a href="/delete-project/{{ @index }}">Delete</a>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!--MP END-->
/项目详情:
app.get('/project-detail/:projectTitle', function(req, res) {
let data = project.find(item =>
item.projectTitle === req.params.projectTitle
)
res.render('project-detail', { title: "Project Detail", project: data })
})
<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
<!--NAV START-->
{{> navbar}}
<!--NAV END-->
<!--Blog Detail-->
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>{{ project.projectTitle }}</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="/public/assets/{{ project.projectImage }}" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div>
<i class="fa-solid fa-calendar-days"></i>
<p class="pt-3">{{ project.projectDetailDate.sdDate }} {{ project.projectDetailDate.sdMonth }} {{ project.projectDetailDate.sdYear }} - {{ project.projectDetailDate.edDate }} {{ project.projectDetailDate.edMonth }} {{ project.projectDetailDate.edYear }} </p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p class="pt-3">{{ project.projectDuration }}</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="tech-body">
{{#if project.projectTech.checkHtml }}
<div class="tech-html">
<i class="fa-brands fa-html5"></i>
<p>HTML</p>
</div>
{{/if}}
{{#if project.projectTech.checkCss }}
<div class="tech-css">
<i class="fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
{{/if}}
{{#if project.projectTech.checkNode }}
<div class="tech-node">
<i class="fa-brands fa-node-js"></i>
<p>nodeJs</p>
</div>
{{/if}}
{{#if project.projectTech.checkReact}}
<div class="tech-react">
<i class="fa-brands fa-react"></i>
<p>reactJs</p>
</div>
{{/if}}
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
{{ project.projectContent }}
</p>
</div>
</div>
<!--xBlog Detailx-->
</body>
</html>
主数组:
let project = []
所有的 js 代码和主数组都放在一个文件中,如下所示:
let project = [] app.get() app.post()
在 /editproject 页面我使用:
let projectEdit = project.map(function(data) { return { ...data = req.body }})
操作数组并根据我在 req.body
编辑表单中输入的内容更新它,当我 console.log(projectEdit)
它显示更新的值但是当我使用 console.log(project)
它仍然没有改变, /addproject 中的值仍然相同,它仅在编辑表单中更新。
我的目标是使用编辑表单通过索引更新数组中的对象(所有博客内容值)。
卡了几个小时,我搜索并尝试了很多,但没有任何效果。
提前致谢。
您需要更改 URL 以包含项目 ID
然后通过合并两个对象简单地更新项目。
app.post('/editproject/:id', function(req, res) {
project[req.params.id] = {
...project[req.params.id],
...req.body
};
res.redirect('/')
})
您还需要将id发送给客户端
app.get('/editproject/:id', function(req, res) {
let data = req.params.id
let edit = project[data]
// pass the data as id property and render it so you can use it in the url
res.render('editproject', { id: data, title: 'Edit Project', editForm: edit })
})
我目前正在学习 node.js、express.js 和把手
我有 2 个表单,添加表单和编辑表单以制作 blog/news 类型的页面
/添加项目:
app.get('/addproject', function(req, res) {
res.render('addproject', { title: "Add Project", apActive: true, active: "active" })
})
app.post('/addproject', function(req, res) {
const projectImage = req.body.projectImage;
const projectTitle = req.body.projectTitle;
const projectContent = req.body.projectContent;
const projectDate = {
startDate: req.body.projectStartDate,
endDate: req.body.projectEndDate
}
const projectTech = {
checkHtml: req.body.checkHtml,
checkNode: req.body.checkNode,
checkCss: req.body.checkCss,
checkReact: req.body.checkReact
}
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
let endDate = new Date(projectDate.endDate)
let startDate = new Date(projectDate.startDate)
function getProjectDuration(endDate, startDate) {
endDate = new Date(projectDate.endDate)
startDate = new Date(projectDate.startDate)
const distance = endDate - startDate
const miliseconds = 1000
const secondInMinute = 60
const minuteInHour = 60
const secondInHour = secondInMinute * minuteInHour // 3600
const hourInDay = 23
const dayInMonth = 30
let dayDistance = distance / (miliseconds * secondInHour * hourInDay)
if (dayDistance >= 30) {
return `${Math.floor(dayDistance / dayInMonth)}` + ` Bulan`
} else {
return `${Math.floor(dayDistance)}` + ' Hari'
}
}
const projectDetailDate = {
edDate: endDate.getDate(),
edMonth: month[endDate.getMonth()],
edYear: endDate.getFullYear(),
sdDate: startDate.getDate(),
sdMonth: month[startDate.getMonth()],
sdYear: startDate.getFullYear()
}
const projectDuration = getProjectDuration()
const projectData = {
projectImage,
projectTitle,
projectContent,
projectDate,
projectDuration,
projectTech,
projectDetailDate
}
project.push(projectData)
res.redirect('/')
})
<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
{{> navbar}}
<!--ADD PROJECT-->
<div class="ap-title my-5">
<p>ADD PROJECT</p>
</div>
<div class="ap-form m-auto">
<form action="/addproject" method="POST">
<div class="mb-3">
<label for="projectInputName" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectInputName" aria-describedby="emailHelp" name="projectTitle">
</div>
<div class="mb-3 d-flex" style="gap: 10px;">
<div class="start-date w-100">
<label for="projectInputStartDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="projectInputStartDate" name="projectStartDate">
</div>
<div class="end-date w-100">
<label for="projectInputEndDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="projectInputEndDate" name="projectEndDate">
</div>
</div>
<div class="mb-3">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" class="form-control" name="projectContent"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" name="projectImage" hidden />
</div>
</div>
<div class="ap-btn text-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!--ADD PROJECT END-->
</body>
</html>
/编辑项目:
app.get('/editproject/:id', function(req, res) {
let data = req.params.id
let edit = project[data]
res.render('editproject', { title: 'Edit Project', editForm: edit })
})
app.post('/editproject', function(req, res) {
let projectEdit = project.map(function(data) {
return {
...data = req.body
}
})
project.push(projectEdit)
res.redirect('/')
})
<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
{{> navbar}}
<!--ADD PROJECT-->
<div class="ap-title my-5">
<p>EDIT PROJECT</p>
</div>
<div class="ap-form m-auto">
<form action="/editproject" method="POST">
<div class="mb-3">
<label for="projectInputName" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectInputName" value="{{ editForm.projectTitle }}" aria-describedby="emailHelp" name="projectTitle">
</div>
<div class="mb-3 d-flex" style="gap: 10px;">
<div class="start-date w-100">
<label for="projectInputStartDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="projectInputStartDate" name="projectStartDate">
</div>
<div class="end-date w-100">
<label for="projectInputEndDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="projectInputEndDate" name="projectEndDate">
</div>
</div>
<div class="mb-3">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" class="form-control" name="projectContent">{{ editForm.projectContent }}</textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" name="checkHtml" {{#if editForm.projectTech.checkHtml}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode" {{#if editForm.projectTech.checkNode}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss" {{#if editForm.projectTech.checkCss}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact" {{#if editForm.projectTech.checkReact}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="edit-img">
<img src="/public/assets/{{ editForm.projectImage }}" alt="">
</div>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" name="editImage" onChange={data => editForm(data)} hidden />
</div>
</div>
<div class="ap-btn text-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!--ADD PROJECT END-->
</body>
</html>
/index(仅博客缩略图):
app.get('/', function(req, res) {
let cardData = project.map(function(data) {
return {
...data
}
})
res.render('index', {
title: "Home",
homeActive: true,
active: "active",
card: cardData,
})
})
<!--MP = My Project-->
<div class="mp-container">
<div class="mp-title mb-5">
<p>My Project</p>
</div>
<div class="mpc-container">
<div class="row">
{{#each card}}
<div class="col-3 mp-card mx-5">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="public/assets/{{ this.projectImage }}" alt="Thumbnail Image">
</div>
<div class="mpc-title">
<a href="/project-detail/{{ this.projectTitle }}" action="/project-detail" target="_blank">
<p>{{ this.projectTitle }}</p>
</a>
<small>Durasi: {{ this.projectDuration }}</small>
</div>
<div class="mpc-content">
{{ this.projectContent }}
</div>
<div class="mpc-icons">
{{#if this.projectTech.checkHtml}} <i class="fa-brands fa-html5"></i> {{/if}}
{{#if this.projectTech.checkCss}} <i class="fa-brands fa-css3-alt"></i> {{/if}}
{{#if this.projectTech.checkNode}} <i class="fa-brands fa-node-js"></i> {{/if}}
{{#if this.projectTech.checkReact}} <i class="fa-brands fa-react"></i> {{/if}}
</div>
<div class="mpc-mod">
<a href="/editproject/{{ @index }}" action="/edit-project">Edit</a>
<a href="/delete-project/{{ @index }}">Delete</a>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!--MP END-->
/项目详情:
app.get('/project-detail/:projectTitle', function(req, res) {
let data = project.find(item =>
item.projectTitle === req.params.projectTitle
)
res.render('project-detail', { title: "Project Detail", project: data })
})
<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
<!--NAV START-->
{{> navbar}}
<!--NAV END-->
<!--Blog Detail-->
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>{{ project.projectTitle }}</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="/public/assets/{{ project.projectImage }}" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div>
<i class="fa-solid fa-calendar-days"></i>
<p class="pt-3">{{ project.projectDetailDate.sdDate }} {{ project.projectDetailDate.sdMonth }} {{ project.projectDetailDate.sdYear }} - {{ project.projectDetailDate.edDate }} {{ project.projectDetailDate.edMonth }} {{ project.projectDetailDate.edYear }} </p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p class="pt-3">{{ project.projectDuration }}</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="tech-body">
{{#if project.projectTech.checkHtml }}
<div class="tech-html">
<i class="fa-brands fa-html5"></i>
<p>HTML</p>
</div>
{{/if}}
{{#if project.projectTech.checkCss }}
<div class="tech-css">
<i class="fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
{{/if}}
{{#if project.projectTech.checkNode }}
<div class="tech-node">
<i class="fa-brands fa-node-js"></i>
<p>nodeJs</p>
</div>
{{/if}}
{{#if project.projectTech.checkReact}}
<div class="tech-react">
<i class="fa-brands fa-react"></i>
<p>reactJs</p>
</div>
{{/if}}
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
{{ project.projectContent }}
</p>
</div>
</div>
<!--xBlog Detailx-->
</body>
</html>
主数组:
let project = []
所有的 js 代码和主数组都放在一个文件中,如下所示:
let project = [] app.get() app.post()
在 /editproject 页面我使用:
let projectEdit = project.map(function(data) { return { ...data = req.body }})
操作数组并根据我在 req.body
编辑表单中输入的内容更新它,当我 console.log(projectEdit)
它显示更新的值但是当我使用 console.log(project)
它仍然没有改变, /addproject 中的值仍然相同,它仅在编辑表单中更新。
我的目标是使用编辑表单通过索引更新数组中的对象(所有博客内容值)。
卡了几个小时,我搜索并尝试了很多,但没有任何效果。
提前致谢。
您需要更改 URL 以包含项目 ID 然后通过合并两个对象简单地更新项目。
app.post('/editproject/:id', function(req, res) {
project[req.params.id] = {
...project[req.params.id],
...req.body
};
res.redirect('/')
})
您还需要将id发送给客户端
app.get('/editproject/:id', function(req, res) {
let data = req.params.id
let edit = project[data]
// pass the data as id property and render it so you can use it in the url
res.render('editproject', { id: data, title: 'Edit Project', editForm: edit })
})