前端模擬后端接口返回數據常用的三種方法

一、請求本地 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請求返回數據。

官網 gitHub源碼地址

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 -vnpm -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地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,182評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,489評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,290評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,776評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,510評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,866評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,860評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,036評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,585評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,331評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,536評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,058評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,754評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,154評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,469評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,273評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,505評論 2 379

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,826評論 18 139
  • 在現在的前端開發中,前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,467評論 1 32
  • Node.js是目前非常火熱的技術,但是它的誕生經歷卻很奇特。 眾所周知,在Netscape設計出JavaScri...
    w_zhuan閱讀 3,631評論 2 41
  • 烏云,就是狂飚 在梅雨停下的黃昏時 我從遠方返回 我有信心是,任何一段自傳性的抒發 即便不成為抒情 也是有預兆的,...
    詩人金子閱讀 343評論 1 0
  • 《生活不止茍且,還有詩與遠方》這本書光是聽名字,就已經引起來我的無限遐想。我一直都希望我的生活可以像書名一樣充滿詩...
    阿寶的育兒寶典閱讀 1,140評論 0 2