一、請求本地 json 文件,返回數據。
1)注意json格式;
// list.json
{
"code":"000",
"message":"message信息",
"lists":[
{
"name":"小明",
"sex":"男",
"age": "3"
},
{
"name":"小紅",
"sex":"女",
"age":"3"
}
]
}
2)==請求路徑是相對路徑==,相對于當前發送請求的文件。
// 項目路徑
.
├──index.html
└──list.json
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>請求本地json文件數據</title>
<!--<script src="../js/jquery-1.7.2.min.js"></script>-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
// 請求路徑是當前文件的相對路徑
$.ajax({
url:'list.json',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == '000'){
console.log(res);
$('body').html(JSON.stringify(res));
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>
</body>
</html>
二、使用第三方框架(mockjs),攔截ajax請求返回數據。
1)引入mockjs,可以是在線地址,或者是下載到本地引入,一般==在body結束標簽前引入==。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>第三方框架,mockjs攔截ajax請求返回數據</title>
</head>
<body>
<!--內容-->
<!--body結束標簽前引用-->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
</body>
</html>
2)根據數據模板生成模擬數據。(一般場景配置兩個參數夠用了Mock.mock( rurl, template ))
- Mock.mock( rurl?, rtype?, template|function( options ) )
- rurl(可選)。表示需要攔截的 URL,可以是 URL 字符串或 URL 正則。例如 //domain/list.json/、'/domian/list.json'。
- rtype(可選)。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
- template (可選)。表示數據模板,可以是對象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
- function(options)(可選)。表示用于生成響應數據的函數。
- options 指向本次請求的 Ajax 選項集,含有 url、type 和 body 三個屬性
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- (必選)加載 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
$(function () {
/*
* Mock.mock( rurl, template )
* rurl:表示需要攔截的 URL,可以是 URL 字符串或 URL 正則。
* template:表示數據模板,可以是對象或字符串
* */
// mock攔截ajax請求并返回數據
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL',
'name': '@name'
}]
})
$.ajax({
url:'list.json',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == 000){
console.log(res);
$('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>
- 把html文件在瀏覽器里打開,出現以下格式的json數據;
- ==注意:每次打開頁面或刷新一次頁面數據會隨機改變==;
{
"code": "000",
"message": "message信息",
"list": [
{
"id": 1,
"email": "u.skubdwsbs@nfuzlwgd.et",
"name": "Michael Clark"
},
{
"id": 2,
"email": "u.sokjrkoja@lnmxlkx.kp",
"name": "Brian Davis"
},
{
"id": 3,
"email": "t.chpjw@jnidn.se",
"name": "Margaret Allen"
}
]
}
3)(可選)配置攔截ajax請求時的行為;
- Mock.setup( settings );
- settings必選,支持的配置項有:timeout;
- 指定被攔截的 Ajax 請求的響應時間,單位是毫秒。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- (必選)加載 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
$(function () {
// mock攔截ajax請求并返回數據
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL',
'name': '@name'
}]
})
/*
* Mock.setup( settings )
* 配置攔截 Ajax 請求時的行為。支持的配置項有:timeout。
* settings必選。配置項集合。timeout可選。指定被攔截的 Ajax 請求的響應時間,單位是毫秒。值可以是正整數,例如 400,表示 400 毫秒 后才會返回響應內容;也可以是橫杠 '-' 風格的字符串,例如 '200-600',表示響應時間介于 200 和 600 毫秒之間。默認值是'10-100'。*/
Mock.setup({
timeout: 4000
})
$.ajax({
url:'list.json',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == 000){
console.log(res);
$('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>
- 配置
Mock.setup({timeout: 4000})
之后網頁打開4000毫秒之后才會返回數據;
4) Mock.Random 是一個工具類,用于生成各種隨機數據。(其實上面例子中已經有使用)
- Mock.Random 提供的完整方法(占位符)如下:
- 基本:boolean, natural, integer, float, character, string, range,
- 時間:date, time, datetime, now;
- 圖片:image, dataImage;
- 顏色:color,hex,rgb,rgba,hsl;
- 文本:paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle;
- 名字:first, last, name, cfirst, clast, cname;
- web:url, domain, email, ip, tld;
- 地址:region,province,city,county,zip;
- Helper:capitalize, upper, lower, pick, shuffle;
- Miscellaneous:guid, id, increment;
使用方法:在模板數據中定義參數,值為@加上對應的占位符用引號引起來,比如'nowTime':'@now'
,請求返回的數據就是當前發送請求時的時間 "2017-09-02 11:42:06";下面我使用了三個占位符,
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL', //郵箱
'name': '@name', //名字
'time':'@now' //當前時間
}]
})
頁面顯示:
{
"code": "000",
"message": "message信息",
"list": [
{
"id": 1,
"email": "z.urorqdo@prrfhjnly.mil",
"name": "Joseph Taylor",
"time": "2017-09-02 11:42:06"
},
{
"id": 2,
"email": "m.oshsxmd@ewcolhl.na",
"name": "Mary Harris",
"time": "2017-09-02 11:42:06"
},
{
"id": 3,
"email": "l.zcbunjphx@hvdgteo.ir",
"name": "Susan Thomas",
"time": "2017-09-02 11:42:06"
}
]
}
這里簡單介紹一下mockjs怎么使用的,想了解更詳細的使用,請參考官方文檔和官方示例,寫的很詳細,這里就不多說了還有Mock.valid( template, data )
效驗真實數據的方法,個人覺得用的不多,想了解的自行查看文檔。
三、使用node搭建簡單服務器接收請求返回數據
1) 首先安裝node
可以參考菜鳥教程node.js安裝配置,或者自行搜索安裝教程,訪問官網下載慢的這里提供node-v8.40.msi安裝包下載,百度網盤地址鏈接: https://pan.baidu.com/s/1boWTBQn 密碼: w32w;
安裝node 會自動安裝npm包管理工具;
檢查是否有安裝node和 npm包管理工具,打開cmd命令行工具,輸入
node -v
和npm -v
,會輸出對應的版本號,如下所示:
C:\Users\liuzk
$ node -v
v8.4.0
C:\Users\liuzk
$ npm -v
5.3.0
- 全局安裝 npm ,最好同時安裝cnpm 淘寶npm鏡像,如果npm 安裝依賴包的時候報錯,有時候是網絡不好,可以使用淘寶鏡像cnpm來安裝;
npm install -g npm
npm install -g cnpm
2)安裝express應用程序生成器
- 全局安裝
express-generator
;
npm install -g express-generator
- 有安裝Git Bash Here等第三方命令行工具,我們打開文件管理,進入到想要生成項目的位置后,右鍵打開Git Bash Here 就可以在當前位置啟動命令行工具了;
- 如果沒有安裝git等第三方cmd命令行工具,我們打開文件管理,進入到想要生成項目的位置后,直接在地址欄輸入cmd,會在當前目錄打開cdm命令行工具;
- 在我們想要的位置打開命令行工具之后,就可以開始以下步驟:
- 創建一個名為myapp的express應用程序
express --view=pug myapp
成功后會自動在目標位置創建一個名為myapp的項目并生成很多文件,命令行顯示效果如下:
E:\my_work
$ express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
install dependencies:
> cd myapp && npm install
run the app:
> SET DEBUG=myapp:* & npm start
在命令行最下面有提示,install dependencies: cd myapp && npm install
然后 run the app: npm start
,我們按照提示來;
- 進入myapp項目;
cd myapp
- 安裝package.json文件中的依賴;
npm install
- 網絡不好可以用cnpm安裝
cnpm install
- 運行項目
E:\my_work\myapp
$ npm start
> myapp@0.0.0 start E:\my_work\myapp
> node ./bin/www
- 在瀏覽器輸入localhost:3000,會打開一個頁面顯示Welcome to Express,說明已經成功啟動服務了。
3)配置
- 打開myapp項目,可以看到目錄是下面這樣的;
.
├── app.js
├── bin
│ └── www
├── node_modules //安裝的依賴
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
- 這個時候,瀏覽器打開localhost:3000/users,可以看到頁面顯示respond with a resource
- 打開routes 文件夾下的users看到以下代碼:
// routes/users.js文件
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
- 可以看到頁面顯示的內容就是users.js文件中返回的內容,我們定義自己想要返回的內容。
// routes/users.js文件
var express = require('express');
var router = express.Router();
var data = {
'code':'000',
'message':'message消息',
'lists':[
{
'naem':'小明',
'age': '12',
'sex':'男'
},{
'naem':'小紅',
'age': '12',
'sex':'女'
}
]
}
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send(data);
});
module.exports = router;
- 改了之后再請求沒有改變,查看命令行信息,304發現我們的請求給我們緩存了;
GET /users 304 2.543 ms - -
- 我們重新啟動一下試試,刷新頁面返回:
{
"code": "000",
"message": "message消息",
"lists": [
{
"naem": "小明",
"age": "12",
"sex": "男"
},
{
"naem": "小紅",
"age": "12",
"sex": "女"
}
]
}
- 這樣雖然可以請求,但是有緩存問題,而且接口多的話每次都得配置一個路徑,太復雜,所以要封裝一下,重復使用,每次請求重新請求不加載緩存。
在項目下新建一個config文件夾并新建一個api.js
,配置一下:
// config/api.js
var fs = require('fs');
/**
* 檢查請求的路徑是否存在
* @param apiName 請求路徑
* @param method 請求方式
* @param params 請求參數
* @param res 返回請求
*/
function getDataFromPath (apiName,method,params,res){
if(apiName){
fs.access(
// 提取請求路徑中的js文件
apiName.substring(1)+'.js',
// 回調函數,檢查請求的路徑是否有效失敗返回一個錯誤參數
function(err){
if(!err){
// 每次請求都清除模塊緩存重新請求
delete require.cache[require.resolve('..'+apiName)];
try{
addApiResult(res,require('..'+apiName).getData(method,params));
}catch(e){
console.error(e.stack);
res.status(500).send(apiName+' has an error,please check the code.');
}
}else{
addApiResult(res);
}
}
);
}else{
addApiResult(res);
}
};
/**
* 響應頭
* @param res
*/
function addApiHead(res){
res.setHeader('Content-Type', 'application/json;charset=utf-8');
// 跨域
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
// 控制http緩存
res.header("Cache-Control", "no-cache, no-store, must-revalidate");
res.header("Pragma", "no-cache");
res.header("Expires", 0);
}
/**
* 返回參數,如無返回參數返回404
* @param res
* @param result
*/
function addApiResult(res,result){
if(result){
res.send(result);
}else{
res.status(404).send();
}
}
/*請求方式*/
// get
exports.get = function(req, res){
addApiHead(res);
getDataFromPath(req.path,'GET',req.query,res);
};
// post
exports.post = function(req, res){
addApiHead(res);
getDataFromPath(req.path,'POST',req.body,res);
};
- 打開根目錄下
app.js
,在上面引入剛剛新建的文件api.js
;
//引入API
var api = require('./config/api');
- 替換請求配置
/*配置請求*/
app.get('/', function(req, res){
res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);
- app.js最終代碼:
// app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
/*引入api*/
var api = require('./config/api');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//配置請求
app.get('/', function(req, res){
res.send('hello world');
});
app.get('/api/*', api.get);
app.post('/api/*', api.post);
app.options('/api/*', function(req, res, next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
res.sendStatus(200);/*讓options請求快速返回*/
});
module.exports = app;
- 根目錄新建api文件夾,新建demo.js;
// api/demo.js
var dataDemo={
'code':'000',
'message':'message消息',
'lists':[
{
'naem':'小明',
'age': '12',
'sex':'男'
},{
'naem':'小紅',
'age': '12',
'sex':'女'
}
]
}
exports.getData = function(method,data){
var backData={
"code":'000',
"msg":"",
"data":dataDemo
}
if(method=='DELETE'){
backData={
"code":'999',
"msg":"不支持DELETE方法"
}
}
return JSON.stringify(backData);
}kData);
}
- 重新運行npm start,瀏覽器打開localhost:3000,此時應該顯示的是hello world;
- 打開localhost:3000/api/demo,頁面顯示
{
"code": "000",
"msg": "",
"data": {
"code": "000",
"message": "message消息",
"lists": [
{
"naem": "小明",
"age": "12",
"sex": "男"
},
{
"naem": "小紅",
"age": "12",
"sex": "女"
}
]
}
}
- 以上都成功了,那就說明配置成功了,復制一個js文件命名為demo2.js,改動一下數據,瀏覽器訪問
localhost:3000/api/demo2
應該也是可以的;
4) 使用
- 假如線上接口是
https://www.baidu.com/mydata/java/school/list
,我們在api文件夾按照路徑新建文件夾和文件即可:
├── api
│ └── mydata
│ └── java
│ └── school
│ └── list.js
- 開發的時候指向本地服務器器接口,聯調測試上線的時候只需要把指向本地服務器地址替換成線上地址一下就可以了。
<script type="text/javascript">
$(function () {
// var baseUrl = 'https://www.baidu.com'; //線上地址
var baseUrl = 'http://localhost:3000/api'; //本地服務器地址
$.ajax({
url: baseUrl+'/mydata/java/school/list',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == '000'){
console.log(res);
$('body').html(JSON.stringify(res));
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>
最后附源碼 GitHub地址