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

一、利用node創建后端服務器

1. 初始化目錄結構 npm init -y

2. 下載express npm i express

3. 利用 express 搭建服務器

　　

//創建服務器
//第一個引入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)

　　　　4.啟動服務

　　　　***注意***       但凡app.js有修改記得重啟服務器（node搭建的服務器）      

二、利用vue創建前端項目

1. 創建項目命令 vue init webpack mydemo(項目)

2. 初始化項目，刪除你該刪除的內容

3. 下載axios http庫 npm i axios

4. 創建組件

5. 在組件中調取接口

import axios from 'axios'
export default {
    mounted() {//生命周期函數，掛載
        //組件一加載就調取美食列表接口
        axios({
            url:'/api/foodList',
           // params:{}
           //method:'get' get方法可以省略
        })
        .then((res)=>{
            console.log(res,'響應')
        })
        .catch((err)=>{

        })
    },
}

如果產生跨域問題（解決跨域問題） 

　　　　配置config文件夾     =>       index.js文件

   proxyTable: {//利用代理服務器去解決跨域問題（本地開發的時候）vue中的方法
      '/api':{ 
        //'/api' 地址是自己定義的
        target:'http://localhost:3000', //你要解決跨域的地址
        changeOrigin:true,//在本地搭建一個虛擬服務，去發送種請求攔截服務
        pathRewrite:{//地址重寫
          '^/api':'http://localhost:3000'
        }
      }
    },

如果配置代理，一定要重啟！！！！

調取接口地址就變成了：url:'/api/foodList', 不再是url:'http://localhost:3000/foodList'

全局引入axios：

　　main.js頁面

　　　　

//引入axios庫
import axios from 'axios'
//把axios掛載到Vue原型
Vue.prototype.http = axios

　　song.vue組件　　　

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

在vue項目中 引入 jquery

　　下載命令：

　　　　

`npm install(i) jquery`

　　如果全局引入：　　　

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