vue+node全棧移動商城【3】-安裝express，實現第一個nodeJs介面

我是老尚xxx發表於2019-02-10
Vue全棧ExpressNodeJS

做一個全棧專案少不了nodeJs，總有些同學不太理解nodeJs能做什麼。 其實很簡單，

1、js本身不安全，所以有些操作以前是後端來做的，例如登入、註冊什麼的。但現在有了nodeJs，這些之前由後端做的工作，我們們前端也可以做了。

2、為什麼是node？因為nodeJs的開發語言預設就是js。

express是一個工作在nodeJs裡的框架，它和koa2什麼的都是一路貨色。就是操作一些http、router、template方面的更方便的操作。只要你會了express，那麼其它的都差不多。

安裝express

另外新建一個目錄，開啟cmd，執行:npm install express -save 在目錄中新建檔案： api_dev.js，在裡面寫：

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.js

回到你的vue-cli專案裡，進入src目錄，新建proMain.vue，在script部分寫上：

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

執行專案，如果在控制檯能夠輸出，{a:123}，你的第一個介面，就ok了。

注意，此時你要分別開啟二個cmd視窗

相關文章