Express框架
Express是適用於Node.js web的框架,提供了大量實用功能,例如路由功能及http功能。
Express 框架核心特性:
- 可以設置中間件來響應 HTTP 請求。
- 定義了路由表用於執行不同的 HTTP 請求動作。
- 可以通過向模板傳遞參數來動態渲染 HTML 頁面。
安裝:
npm install express --save
可能需要的中間件:
body-parser - Node.js 中間件,用於處理 JSON, Raw, Text 和 URL 編碼的數據。
cookie-parser - 這就是一個解析Cookie的工具。通過req.cookies可以取到傳過來的cookie,並把它們轉成對象。
multer - Node.js 中間件,用於處理 enctype="multipart/form-data"(設置表單的MIME編碼)的表單數據。
cors - Node.js跨域解決方案,當需要跨域訪問時使用。
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
npm install cors --save
使用express創建服務端:
var express = require('express');
var app = express();
//分配路由
app.get('/', function (req, res) {
res.send('Hello World');
})
app.get('/about', function (req, res) {
res.send('about web');
})
app.post('/user', function (req, res) {
res.send('user data');
})
//創建服務器並監聽8080端口
var server = app.listen(8080)
訪問 http://127.0.0.1:8080:
界面輸出'Hello World'
訪問 http://127.0.0.1:8080/about:
界面輸出'about web'
訪問 http://127.0.0.1:8080/user:
界面輸出'user data'
Express的路由分爲get和post兩種。兩者用法類似,但post支持的參數長度更大。
express+axios實現vue前後端跨域訪問(拓展)
axios是對ajax封裝後的模塊,使用更簡單,可以與express搭配使用,實現前後端分離跨域訪問。
安裝axios:
npm install axios --save
使用express創建路由:
//router.js
const express = require('express');
const router = express.Router();
router.get('/login', (req, res, next) => {
//to do login
});
創建跨域訪問:
const routerApi = require('./router');
const bodyParser = require('body-parser'); // post 數據需要
const express = require('express');
const cors = require('cors');//跨域訪問依賴的中間件
const app = express();
// 允許請求的域名,如果是*則允許所有域名訪問本服務端(必須寫在所有註冊路由前)
app.use(cors({ origin: 'http://127.0.0.1:8080' }));
//解析Json
app.use(bodyParser.json());
//註冊路由
app.use('/api', routerApi);
//創建服務端,監聽端口
app.listen(3000, '0.0.0.0');
console.log('success listen at port:3000......');
前端main.js(前端以Vue爲例):
import Vue from 'vue'
import axios from 'axios'
//使用ElementUI爲PC前端框架
Vue.use(ElementUI)
// 請求服務器的Url
axios.defaults.baseURL = 'http://127.0.0.1:3000/';
//設置post默認類型爲json
axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.prototype.axios = axios
前端UI請求:
this.axios.get("/api/login", {
params: {
userName: 'Jimmy',
password: '123456'
}
})
.then(res => {
//登錄結果...
})
.catch(error => {
console.log(error.response);
});