无法更新,但可以使用axios将数据发布到数据库

时间:2018-06-28 14:21:05

标签: express vuejs2 axios vuetify.js nuxt.js

我正在使用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天的所有工作,但似乎无法解决此问题。

0 个答案:

没有答案