loacl mosk

README.md

@@ -4,8 +4,8 @@
 
 # to do list
 - [ ] 登录示例
-- [ ] 主布局示例
-- [ ] 数据列表
+- [x] 主布局示例
+- [x] 数据列表
 - [ ] 表单相关
 - [ ] 可视化图表
 

package.json

@@ -34,7 +34,8 @@
   },
   "scripts": {
     "start": "dora --plugins \"proxy,webpack,webpack-hmr\"",
+    "dev": "dora --plugins \"webpack,webpack-hmr\"",
     "lint": "eslint --fix --ext .js,.jsx .",
     "build": "atool-build"
   }
-}
+}

proxy.config.js

@@ -1,10 +1,10 @@
-'use strict';
+'use strict'
 
-const mock = {};
+const mock = {}
 
 require('fs').readdirSync(require('path').join(__dirname + '/mock'))
   .forEach(function (file) {
-    Object.assign(mock, require('./mock/' + file));
-  });
+    Object.assign(mock, require('./mock/' + file))
+  })
 
-module.exports = mock;
+module.exports = mock

src/mock/users.js

@@ -0,0 +1,136 @@
+'use strict'
+
+const qs = require('qs')
+const mockjs = require('mockjs')
+
+// 数据持久
+let tableListData = {}
+if (!global.tableListData) {
+  const data = mockjs.mock({
+    'data|100': [{
+      'id|+1': 1,
+      name: '@cname',
+      nickName:'@name',
+      phone:/^1[34578]\d{9}$/,
+      'age|11-99': 1,
+      address: '@county(true)',
+      isMale:'@boolean',
+      email:'@email',
+      createTime:'@datetime',
+      avatar:mockjs.Random.image('100x100',mockjs.Random.color()),
+    }],
+    page: {
+      total: 100,
+      current: 1
+    }
+  })
+  tableListData = data
+  global.tableListData = tableListData
+} else {
+  tableListData = global.tableListData
+}
+
+module.exports = {
+
+  'GET /api/users' (req, res) {
+    const page = qs.parse(req.query)
+    const pageSize = page.pageSize || 20
+    const currentPage = page.page || 1
+
+    let data
+    let newPage
+
+    let newData = tableListData.data.concat()
+
+    if (page.field) {
+      const d = newData.filter(function (item) {
+        return item[page.field].indexOf(page.keyword) > -1
+      })
+
+      data = d.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+
+      newPage = {
+        current: currentPage * 1,
+        total: d.length
+      }
+    } else {
+      data = tableListData.data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+      tableListData.page.current = currentPage * 1
+      newPage = {
+        current: tableListData.page.current,
+        total: tableListData.page.total
+      }
+    }
+
+
+    setTimeout(function () {
+      res.json({
+        success: true,
+        data,
+        page: newPage
+      })
+    }, 500)
+  },
+
+  'POST /api/users' (req, res) {
+    setTimeout(function () {
+      const newData = qs.parse(req.body)
+
+      newData.id = tableListData.data.length + 1
+      tableListData.data.unshift(newData)
+
+      tableListData.page.total = tableListData.data.length
+      tableListData.page.current = 1
+
+      global.tableListData = tableListData
+      res.json({
+        success: true,
+        data: tableListData.data,
+        page: tableListData.page
+      })
+    }, 500)
+  },
+
+  'DELETE /api/users' (req, res) {
+    setTimeout(function () {
+      const deleteItem = qs.parse(req.body)
+
+      tableListData.data = tableListData.data.filter(function (item) {
+        if (item.id == deleteItem.id) {
+          return false
+        }
+        return true
+      })
+
+      tableListData.page.total = tableListData.data.length
+
+      global.tableListData = tableListData
+      res.json({
+        success: true,
+        data: tableListData.data,
+        page: tableListData.page
+      })
+    }, 500)
+  },
+
+  'PUT /api/users' (req, res) {
+    setTimeout(function () {
+      const editItem = qs.parse(req.body)
+
+      tableListData.data = tableListData.data.map(function (item) {
+        if (item.id == editItem.id) {
+          return editItem
+        }
+        return item
+      })
+
+      global.tableListData = tableListData
+      res.json({
+        success: true,
+        data: tableListData.data,
+        page: tableListData.page
+      })
+    }, 500)
+  }
+
+}

src/utils/index.js

@@ -1,6 +1,7 @@
 import config from './config'
 import menu from './menu'
 import request from './request'
+require('./mock.js');
 
 // 连字符转驼峰
 String.prototype.hyphenToHump = function () {

src/utils/mock.js

@@ -0,0 +1,27 @@
+'use strict'
+
+const qs = require('qs')
+const fs = require('fs')
+const Mock = require('mockjs')
+const Ajax = require("robe-ajax")
+
+Mock.mock(/\.json/, function (options) {
+  console.log(options);
+  return options
+})
+
+const mock = {};
+console.log(fs);
+
+
+Ajax.ajax({
+    url: 'hello.json',
+    dataType: 'json',
+    data: {
+        foo: 1,
+        bar: 2,
+        faz: 3
+    }
+}).done(function(data, status, jqXHR) {
+  console.log(data)
+})

src/utils/request.js

@@ -22,6 +22,7 @@ function checkStatus(response) {
  * @return {object}           An object containing either "data" or "err"
  */
 export default function request(url, options) {
+  console.log(url, options);
   return fetch(url, options)
     .then(checkStatus)
     .then(parseJSON)