vue获取后台详情页数据

后台

router.get('/article',function(req,res,next){
    db.getConnection(function(err,conn){//连接数据库
        if(err) console.log('connect failed')//数据库连接失败
        conn.query('SELECT * FROM article_table',(err,data) => {//数据库连接成功
            if(err) console.log(err)
            console.log(data)
            res.send(data).end();
        })
        conn.release()//释放连接池
    })
})
http://localhost:8080/api/article

router.get('/article/detail',function(req,res,next){
    db.getConnection(function(err,conn){//连接数据库
        if(err) console.log('connect failed')//数据库连接失败
        conn.query(`SELECT * FROM article_table WHERE id=${req.query.id}`,(err,data) => {//数据库连接成功
            if(err) console.log(err)
            console.log(data)
            res.send(data).end();
        })
        conn.release()//释放连接池
    })
})
http://localhost:8080/api/article/detail?id=1

前台

• 路由

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
        path: '/articles/detail/:id',
        component: Article
    },
  ]
})

• index.vue

<router-link class="read-more" :to="'/articles/detail/' + item.ID" :key="item.ID" tag="li" v-for="item in articleList">{{item.id}} {{item.title}}... continue reading</router-link>

    data(){
        return {
            articleList:[]
        }
    },
    created(){
        Vue.axios.get('/api/article')
            .then(res => {
                this.articleList = res.data;
                // console.log(res.data)
            })
            .catch(err => console.log(err))
    }

• detail.vue

    data() {
        return {
            articleDetail: []
        }
    },
    created(){
        const artId=this.$route.params.id;
        Vue.axios.get(`/api/article/detail?id=${artId}`)
            .then(res => {
                this.articleDetail = res.data[0];
                console.log(res.data[0])
            })
            .catch(err => console.log(err))
        }