vue+node全棧移動商城【3】-安裝express,實現第一個nodeJs接口

作一個全棧項目少不了nodeJs,總有些同窗不太理解nodeJs能作什麼。 其實很簡單,前端

一、js自己不安全,因此有些操做之前是後端來作的,例如登陸、註冊什麼的。但如今有了nodeJs,這些以前由後端作的工做,我們前端也能夠作了。vue

二、爲何是node?由於nodeJs的開發語言默認就是js。node


express是一個工做在nodeJs裏的框架,它和koa2什麼的都是一路貨色。就是操做一些http、router、template方面的更方便的操做。只要你會了express,那麼其它的都差很少。ios


安裝expressvue-cli

另外新建一個目錄,打開cmd,執行:npm install express -save 在目錄中新建文件: api_dev.js,在裏面寫:express

var express = require('express');
var app = express();

// 解決跨域問題,網上成熟的解決方案,我是直接拷貝的
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Method", "*");
    res.header("Access-Control-Allow-Headers","Content-Type");
    res.header("Access-Control-Max-Age", "3600");
    next();
});

// 第一個nodeJs接口,接收
app.get('/test_api', function(req, res){
	res.send({a:123});
});

app.listen( 5679,function(){
	console.log( '5679,中間件已經啓動!' )
});
複製代碼

而後打開cmd,運行 node api_dev.jsnpm


回到你的vue-cli項目裏,進入src目錄,新建proMain.vue,在script部分寫上:axios

created(){
        axios.get('http://localhost:5679/test_api')
            .then( _d=>{
                console.log( _d.data );
            });
    }
複製代碼

運行項目,若是在控制檯可以輸出,{a:123},你的第一個接口,就ok了。後端

注意,此時你要分別打開二個cmd窗口api

相關文章
相關標籤/搜索