前端Vue和后端node.js交互案例

//创建服务器
//第一个引入express框架
const express = require(‘express‘)
//第二 把express 方法付给app 
const app = express()
//创建一个接口，当用户访问‘/‘
app.get(‘/‘,(req,res)=>{
    res.send(‘当前服务器已连接‘)
})
app.get(‘/foodList‘,(req,res)=>{
    const json = [
        {
            id:1,
            name:‘海底捞‘
        },
        {
            id:2,
            name:‘水煮鱼‘
        },
        {
            id:3,
            name:‘烧烤‘
        },
    ]
    res.send(json)
})

//第三步监听我的端口
app.listen(3000)

import axios from ‘axios‘
export default {
    mounted() {//生命周期函数，挂载
        //组件一加载就调取美食列表接口
        axios({
            url:‘/api/foodList‘,
           // params:{}
           //method:‘get‘ get方法可以省略
        })
        .then((res)=>{
            console.log(res,‘响应‘)
        })
        .catch((err)=>{

        })
    },
}

   proxyTable: {//利用代理服务器去解决跨域问题（本地开发的时候）vue中的方法
      ‘/api‘:{ 
        //‘/api‘ 地址是自己定义的
        target:‘http://localhost:3000‘, //你要解决跨域的地址
        changeOrigin:true,//在本地搭建一个虚拟服务，去发送种请求拦截服务
        pathRewrite:{//地址重写
          ‘^/api‘:‘http://localhost:3000‘
        }
      }
    },

//引入axios库
import axios from ‘axios‘
//把axios挂载到Vue原型
Vue.prototype.http = axios

 this.http.post(‘/api/postInfo‘)
           .then(res=>{
               console.log(res,‘成功之后的响应‘)
               this.list = res.data
           })
           .catch(err=>{})

`npm install(i) jquery`

import jquery from ‘jquery‘
Vue.prototype.jq = jquery