我正在使用nuxt.js进行SSR,并使用axios将数据发送到后端。我有以下代码片段:
事件后终结点
router.post('/post-event', (req, res) => {
const sql = 'INSERT INTO events (eventname, startdate, enddate, venue, managedBy) VALUES (?, ?, ?, ?, ?)'
const data = [
req.body.eventName,
req.body.startDate,
req.body.endDate,
JSON.stringify(req.body.venue),
JSON.stringify(req.body.organizer)
]
// insert event to db
db.query({
sql: sql,
options: data,
error: '/post-event event insert failed',
success: '/post-event event insert successful',
chain: () => {
// loop tags inputed by user
req.body.tags.forEach(tag => {
// insert tag to db
db.query({
sql: 'INSERT IGNORE INTO tags(tagname) VALUES (?)', // ignore tagname currently in db
options: [tag],
error: '/post-event tag insert failed',
success: '/post-event tag insert successful',
chain: () => {
// get current tag's id
db.query({
sql: 'SELECT * FROM tags WHERE tagname = ?',
options: [tag],
error: '/post-event ~select from tags failed',
success: '/post-event ~select from tags successful',
chain: tgidData => {
// get newly created event's id
db.query({
sql: 'SELECT idevents FROM events ORDER BY 1 DESC LIMIT 1',
options: [],
error: '/post-event ~select idevent single failed',
success: '/post-event ~select idevent single success',
chain: (eventidData) => {
// insert current tag id and newly created event id to db
db.query({
sql: 'INSERT INTO tag_of_events (idevents, tagID) VALUES (?, ?)',
options: [eventidData[0].idevents, tgidData[0].tagID],
error: '/post-event tag_of_events insert failed',
success: '/post-event tag_of_events insert success'
})
}
})
}
})
}
})
})
}
})
})
编辑事件端点
router.post('/edit-event', (req, res) => {
const sql = 'UPDATE events SET eventname = ?, startdate = ?, enddate = ?, venue = ?, managedBy = ? WHERE idevents = ?'
const data = [
req.body.eventName,
req.body.startDate,
req.body.endDate,
JSON.stringify(req.body.venue),
JSON.stringify(req.body.organizer),
req.body.id
]
// update event to db
db.query({
sql: sql,
options: data,
error: '/edit-event update failed',
success: '/edit-event update successful',
chain: () => {
// delete relationship of tags to event
db.query({
sql: 'DELETE FROM tag_of_events WHERE idevents = ?',
options: [req.body.id],
error: '/edit-event event delete failed',
success: '/edit-event event delete successful',
chain: () => {
// insert new tags to db
req.body.tags.forEach(tag => {
db.query({
sql: 'INSERT IGNORE INTO tags(tagname) VALUES (?)', // ignore tagname currently in db
options: [tag],
error: '/edit-event tag insert failed',
success: '/edit-event tag insert successful',
chain: () => {
// get current tag's id
db.query({
sql: 'SELECT * FROM tags WHERE tagname = ?',
options: [tag],
error: '/edit-event ~select from tags failed',
success: '/edit-event ~select from tags successful',
chain: tgidData => {
// get newly created event's id
db.query({
sql: 'INSERT INTO tag_of_events (idevents, tagID) VALUES (?, ?)',
options: [req.body.id, tgidData[0].tagID],
error: '/edit-event tag_of_events insert failed',
success: '/edit-event tag_of_events insert success',
chain: data => {
return data
}
})
}
})
}
})
})
}
})
}
})
})
由于某种原因,edit事件不起作用,但是post事件起作用。单击我前端@click
中的更新事件进行更新,只是“重新”-查询将要编辑的事件,根本不会更新。
axios
import axios from './axios'
export default {
postEvent(data) {
return axios.post('post-event', data)
},
editEvent(data) {
console.log(data)
return axios.post('edit-event', data)
}
}
.vue文件中的更新事件
<script>
import axios from '~/plugins/axios'
import post from '~/plugins/post'
export default {
async asyncData () {
return {
eventName: '',
organizer: [],
venue: [],
startDate: '',
endDate:'',
tags: [],
savedTags: []
}
},
methods: {
async updateEvent () { // method to update event
const res = await post.editEvent({
eventName: this.eventName,
organizer: this.organizer,
venue: this.venue,
tags: this.tags,
startDate: this.startDate,
endDate: this.endDate,
id: this.$route.params.id
})
}
},
async created () {
// getting the tags ready in dropdown
let dbTags = await axios.get('/tags')
console.log(dbTags)
dbTags.data.forEach(tag => {
this.savedTags.push(tag.tagname)
})
// showing the current data to be edited
let event = await axios.get(`/event?id=${this.$route.params.id}`)
let rawData = JSON.parse(JSON.stringify(event.data[0]))
this.eventName = rawData.eventname
this.organizer = JSON.parse(rawData.managedBy)
this.venue = JSON.parse(rawData.venue)
this.startDate = rawData.startdate
this.endDate = rawData.enddate
event.data.forEach(tag => {
this.tags.push(tag.tagname)
})
}
}
</script>
我已经做了2天的所有工作,但似乎无法解决此问题。