vue-resource
- 特點：
- 體積小
- 壓縮后大約12KB
- 支持主流瀏覽器
+不支持IE9以下的瀏覽器 - 支持promise
- promise 為es6的異步計算
- 支持攔截器
- 攔截器可以在請求發送前和發送后做一些操作
- 體積小
服務器 express + ejs + body-parser
想要請求數據，必然少不了服務器
準備工作
- 準備需要的文件 bootstrap.css + vue.js + vue-resource.js
- 初始化文件，生成packge.json文件，記錄線上和線下所需的插件等
npm init --y
- 下載服需要的插件 : npm/ cnpm 等
- node ：自帶的包管理器
- install ：下載
- --save ：在package.json中存儲為線上需要的插件
- --save-dev ： 在package.json中存儲為線下需要的插件
- express ：基于node.js 平臺，快速、開放、極簡的文本開發框架
- ejs ：通過數據和模板，可以生成HTML標記文本，可以同時運行在客戶端和服務器端，0 學習成本
- body-parser ：配合post 通過req.body獲取前端的請求數據
- node .\app.js : 開啟服務器，鏈接端口為listen設置的值
- 注意 ：只要更改app.js ，都需要重新開啟服務器
npm install --save-dev express ejs body-parser
- 創建一個服務器文件 app.js 和 index.html文件
// 創建 app.js
touch app.js
// 創建 index.html
touch index.html
最終的文件目錄為
最終文件目錄.png
- html 頁面準備
// html 頁面就不贅述了......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="app">
1111
</div>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
</script>
</body>
</html>
- app.js 準備
// 引入express
const express = require('express');
// 引入 body-parser 插件，
const bodyParser = require('body-parser');
// 調用express
const app = express();
// 設置HTML模本
app.engine('html',require('ejs').renderFile);
// 中間件 : 設置靜態資源文件夾
app.use(express.static('./'));
// 中間件 : 設置bodyParser
app.use(bodyParser.json());
// 鏈接服務器端口
app.listen(3000);
// 路由 req:存儲的為用戶發送的請求數據，res:存儲的為服務器響應給用戶的數據
app.get('/',(req,res)=>{
/*
* end : 只能發送字符串
* send : 發送字符串 和 對象
* render : 渲染頁面
*/
res.render('index');
});
- node .\app.js 開啟服務器，并在瀏覽器訪問localhost：3000 ，頁面正常顯示出 1111，證明成功
準備工作到此結束，下面開始正式代碼，直接上代碼了
html 頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div id="app">
<div class="container" :style="{padding: '20px'}">
<div class="getdata">
<button type="button" class="btn btn-info btn-lg" @click="get">getData</button>
<h4>{{gs}}</h4>
</div>
<div class="posdata">
<button type="button" class="btn btn-info btn-lg" @click="post">postData</button>
<h4>{{ps}}</h4>
</div>
<div class="jsonptdata">
<button type="button" class="btn btn-info btn-lg" @click="jsonp">jsonptData</button>
<h4>{{ss}}</h4>
</div>
</div>
</div>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
gs: '',
ps: '',
ss: ''
},
methods: {
get(){
this.$http.get('/get',{
params: {name:"dandan",sex:"gril"}
}).then(res=>{
this.gs = res.body;
})
},
post(){
this.$http.post('/post',{name:"dandan",sex:"gril"})
.then(res=>{
this.ps = res.body;
})
},
jsonp(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'dandan'
},
jsonp: 'cb'
}).then(res=>{
this.ss = res.body.s;
})
}
}
})
</script>
</body>
</html>
app.js 頁面
// 引入express
const express = require('express');
// 引入 body-parser 插件，
const bodyParser = require('body-parser');
// 調用express
const app = express();
// 設置HTML模本
app.engine('html',require('ejs').renderFile);
// 中間件 : 設置靜態資源文件夾
app.use(express.static('./'));
// 中間件 : 設置bodyParser
app.use(bodyParser.json());
// 鏈接服務器端口
app.listen(3001);
// 路由 req:存儲的為用戶發送的請求數據，res:存儲的為服務器響應給用戶的數據
app.get('/',(req,res)=>{
/*
* end : 只能發送字符串
* send : 發送字符串 和 對象
* render : 渲染頁面
*/
res.render('index');
});
// get : req.query 獲取前端傳入的請求數據
app.get('/get',(req,res)=>{
// console.log(req.query);
res.send('這是get請求的數據')
});
/*
* post
* 想要通過req.body獲取數據需要配合 body-parser 插件
*/
app.post('/post',(req,res)=>{
// console.log(req.body);
res.send('這是post請求的數據');
});
