成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue2從0到1(五)：使用nodejs+koa2和axios實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)通信

legendmohe / 867人閱讀

摘要：前面講了環(huán)境的搭建用打包的使用的使用以及組件化及組件間傳值下面講一下使用提供接口，訪問接口，前后端數(shù)據(jù)通信的相關(guān)內(nèi)容。

前面講了環(huán)境的搭建用webpack打包vue,Vue-router,vuex的使用的使用以及Vue組件化及組件間傳值 下面講一下使用nodejs+koa提供接口，axios訪問接口，前后端數(shù)據(jù)通信的相關(guān)內(nèi)容。 11.使用nodejs+koa2提供后臺(tái)接口

npm install koa koa-router --save-dev

在根目錄下下新建server/index.js文件index.js:
    const Koa = require("koa");
    const router = require("koa-router")();
    const app = new Koa();
    router.get("/", (ctx, next)=> {
        ctx.response.body = "111"
    });

    app
        .use(router.routes())
        .use(router.allowedMethods());

    app.listen(3000,()=>{
       console.log("server is start at port 3000")
    });
    
package.json里面設(shè)置命令:"server":"node server index.js"
啟動(dòng)服務(wù):npm run server
瀏覽器里面訪問localhost/3000可看到返回值
12.設(shè)置koa允許前端跨域訪問 
使用koa2-cors設(shè)置跨域
安裝npm install koa2-cors --save-dev
   ...
    app.use(cors({
        origin: function (ctx) {
            if (ctx.url === "/test") {
                return false;
            }
            return "http://localhost:9001";
        },
        exposeHeaders: ["WWW-Authenticate", "Server-Authorization"],
        maxAge: 5,
        credentials: true,
        allowMethods: ["GET", "POST", "DELETE"],
        allowHeaders: ["Content-Type", "Authorization", "Accept"],
    }));
    ...
13 使用axios訪問后臺(tái)接口 
安裝axios：
   npm install axios --save

在根目錄新建server/request.js
封裝一個(gè)request函數(shù)，所有的請求都通過request函數(shù),便于對于請求統(tǒng)一處理

   export default {
    post(url, data) {
        return axios({
            method: "post",
            baseURL: BASE_URL,
            url,
            data: JSON.stringify(data),
            timeout: 10000,
            headers: {
                "X-Requested-With": "XMLHttpRequest",
                // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                "Content-Type":"application/json",
                // "Accept": "application/json",
                // "charset":"utf-8"
            }
        }).then(
            (response) => {
                return checkStatus(response)
            }
            ).then(
            (res) => {
                return checkCode(res)
            }
            ).catch((e)=>{
                console.log(e)
                return new Promise((resolve, reject) => {
                    reject(e);
                })
            })
    },
    get(url, params) {
        return axios({
            method: "get",
            baseURL: BASE_URL,
            url,
            params, // get 請求時(shí)帶的參數(shù)
            timeout: 10000,
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        }).then(
            (response) => {
                return checkStatus(response)
            }
            ).then(
            (res) => {
                return checkCode(res)
            }
            )
    }
}

function checkStatus(response) {

// loading
// 如果http狀態(tài)碼正常，則直接返回?cái)?shù)據(jù)
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response
    // 如果不需要除了data之外的數(shù)據(jù)，可以直接 return response.data
}
// 異常狀態(tài)下，把錯(cuò)誤信息返回去
return {
    status: -404,
    msg: "網(wǎng)絡(luò)異常"
}

}

function checkCode(res) {

// 如果code異常(這里已經(jīng)包括網(wǎng)絡(luò)錯(cuò)誤，服務(wù)器錯(cuò)誤，后端拋出的錯(cuò)誤)，可以彈出一個(gè)錯(cuò)誤提示，告訴用戶
if (res.status === -404) {
    let vue = new Vue;
    vue.$message({ type: "error", message:res.msg});
}
// if (res.data && (!res.data.success)) {
//     alert(res.data.error_msg)
// }
return res

}

調(diào)用：
import request from ".././request.js"; 
let {data} =await request.post(options.url,data1);
let {data} =await request.get(options.url,data1);
請注意這里踩了兩個(gè)坑：
1.設(shè)置axios.defaults.withCredentials = true   //請求時(shí)帶上cookie這樣請求時(shí)才會(huì)帶上cookie
2.設(shè)置"Content-Type":"application/json",并JSON.stringify(data),這樣后臺(tái)才能正確接收到數(shù)據(jù)
3.當(dāng)設(shè)置請求時(shí)帶上cookie時(shí)后端允許的跨域不能用"*"要說明協(xié)議+域名+端口[相關(guān)問題](https://segmentfault.com/q/1010000011878964?_ea=2792154)

請求數(shù)據(jù)效果圖：

后面將講一下element-ui的使用 代碼托管于github 歡迎star

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89544.html

相關(guān)文章

  • vue+koa2+mongo前后端分離restful，配置和部署到云

    摘要：前端項(xiàng)目使用搭建項(xiàng)目，這里就不發(fā)了安裝和配置或加載。目錄下文件修改來個(gè)請求，查看結(jié)果。 一。前端項(xiàng)目 1.使用vue-cli（vue2.0）搭建項(xiàng)目，這里就不發(fā)了. axios安裝和配置 ～ npm install axios 1. main.js或app.js加載axios。 import axios from axios Vue.prototype.$axios =...

    miracledan 評論0 收藏0

  • vue+node+mongodb 搭建一個(gè)完整博客

    摘要：開發(fā)一個(gè)完整博客流程前言前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫完，于是這段時(shí)間因?yàn)槭虑椴皇翘?，便整理了一下，寫了個(gè)簡易版的博客系統(tǒng)服務(wù)端用的是框架進(jìn)行開發(fā)技術(shù)棧目錄結(jié)構(gòu)講解的配置文件放置代碼文件項(xiàng)目參數(shù)配置的文件日志打印文件項(xiàng)目依賴模塊 Vue + Node + Mongodb 開發(fā)一個(gè)完整博客流程 前言 前段時(shí)間剛把自己的個(gè)人網(wǎng)站寫完， 于是這段時(shí)間因?yàn)槭虑椴皇翘?，便整理了一下，寫了個(gè)簡易...

    Miracle_lihb 評論0 收藏0

  • 基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL實(shí)現(xiàn)京東移動(dòng)web商

    摘要：項(xiàng)目地址經(jīng)過一個(gè)多月總算完成第一個(gè)版本前端架構(gòu)頁面結(jié)構(gòu)原生框架基于腳手架進(jìn)行搭建數(shù)據(jù)請求處理框架進(jìn)行路由處理進(jìn)行圖片賴加載服務(wù)端架構(gòu)選用進(jìn)行后臺(tái)開發(fā)中間件進(jìn)行服務(wù)的配置，路由請求的處理官網(wǎng)中間件處理與數(shù)據(jù)庫的通信中間件進(jìn)行前端請求參 項(xiàng)目地址https://github.com/huangche00... 經(jīng)過一個(gè)多月總算完成第一個(gè)版本 前端架構(gòu) 頁面結(jié)構(gòu)(H5,CSS3,原生JS)...

    Neilyo 評論0 收藏0

  • 基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL實(shí)現(xiàn)京東移動(dòng)web商

    摘要：項(xiàng)目地址經(jīng)過一個(gè)多月總算完成第一個(gè)版本前端架構(gòu)頁面結(jié)構(gòu)原生框架基于腳手架進(jìn)行搭建數(shù)據(jù)請求處理框架進(jìn)行路由處理進(jìn)行圖片賴加載服務(wù)端架構(gòu)選用進(jìn)行后臺(tái)開發(fā)中間件進(jìn)行服務(wù)的配置，路由請求的處理官網(wǎng)中間件處理與數(shù)據(jù)庫的通信中間件進(jìn)行前端請求參 項(xiàng)目地址https://github.com/huangche00... 經(jīng)過一個(gè)多月總算完成第一個(gè)版本 前端架構(gòu) 頁面結(jié)構(gòu)(H5,CSS3,原生JS)...

    lylwyy2016 評論0 收藏0

發(fā)表評論

0條評論

legendmohe

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<