doc: 增加网络请求和代理相应文档

examples/website/config/routes.js

@@ -17,6 +17,7 @@ const routeList = [
       { path: '/authorized/*', element: '@/pages/authorized' },
       { path: '/newPages/*', element: '@/pages/newPages' },
       { path: '/mocker/*', element: '@/pages/mocker' },
+      { path: '/request/*', element: '@/pages/request' },
       { path: '/proxy/*', element: '@/pages/proxy' },
       { path: '/basic-layouts/*', element: '@/pages/basic-layouts' },
       { path: '/components/*', element: '@/pages/components' },

examples/website/src/menus.json

@@ -38,7 +38,11 @@
     "path": "/mocker"
   },
   {
-    "label": "开发代理",
+    "label": "网络请求",
+    "path": "/request"
+  },
+  {
+    "label": "代理",
     "path": "/proxy"
   },
   {

examples/website/src/pages/proxy/README.md

@@ -1,23 +1,50 @@
-# 开发代理
-开发时，要与后端进行接口对接，可以通过mocker-api代理与后端进行连接，开发代理配置在mocker/index.js中编写
-
-## 基本使用
-```js
-const proxy = {
-  _proxy: {
-    proxy: {
-      // "/api/member/selectList": "http://192.168.188.90:8081",
-      "/api/(.*)": "http://192.168.188.222:33401/",
-    },
-    // changeHost: true,
-  }
-}
-module.exports = proxy;
+# 代理
+在前后端分离的今天，跨域也成了每个前端工程师都需要了解的基本知识，在各种面试题中的日经话题。这个文章就是想总结一下关于同源策略的前世今生，以及怎么解决它。
 
-```
+## 同源策略
+在[MDN](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)中我们可以看到关于同源策略是一个安全机制。详细的说明如下：
 
-注：更多代理配置请参考[mocker-api](https://github.com/jaywcjlove/mocker-api)
-<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
+```bash
+同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
+```
+这个机制本身出发点是很好的，但是同源的限制非常严格，url，端口任一不同都会造成跨域错误。
+![](https://user-images.githubusercontent.com/59959718/227846530-0b341502-b59e-4606-be22-04c60806e4db.png)
+
+而且在控制台中你不会发现任何问题。随着前后端分离越来越普遍，这件事就越来越常见。那么它应该如何解决呢?
+
+同源策略全称叫《浏览器的同源策略》，它是浏览器内建的一种安全机制。那么我们不要使用浏览器请求就能完美解决问题了。对于前端来说最方便的自然就是 node.js 了。
+
+## 在开发中使用
+
+在 Uiw Admin 中是用 proxy 更加简单在 kktprc.ts  中配置即可，配置出来可能是这样的：
+
+```bash
+import { createProxyMiddleware } from 'http-proxy-middleware'
+import path from 'path'
+
+const kktpConfig = {
+  ...
+  proxySetup: (app) => {
+    app.use(
+      '/api',
+      createProxyMiddleware({
+        // target: 'http://192.168.188.222:33202', // 测试环境地址
+        // target: 'http://192.168.188.84:7500', // 安江锋
+        // target: 'http://192.168.188.159:7500/', // 邓伟伟
+        // target: 'http://192.168.188.81:7500/', // 曾王杰
+        // target: 'http://192.168.188.199:7500/', // 王龙飞
+        target: 'https://dtpms-dev.nihaosi.com/', //  测试环境
+        changeOrigin: true,
+        // headers: {Authorization: 'Bearer ' + token},
+      })
+    )
+    return {
+      path: path.resolve('./mocker/index.js'),
+    }
+  },
+}
+export default kktpConfig
+```
 
 ## 贡献者
 

examples/website/src/pages/request/README.md

@@ -0,0 +1,133 @@
+# 网络请求
+简介
+对于中后台应用来说，很大一部分工作就在于请求后端的 CRUD 的接口，为进一步降低用户对请求层的感知，我们移除了默认生成的 utils/request.ts 文件，改成通过配置化的方式暴露给开发者做请求的配置和增强处理；同时通过业务总结出一套标准的接口结构规范，并提供统一的接口解析、错误处理的能力；后续将持续完善可配置项、提供垂直场景如列表、登录失效等解决方案。
+## request
+
+系统的请求基于axios进行了二次封装，参见[axios](https://axios-http.com/)
+
+## 方法
+基于restful规范，提供了2个方法：
+- get 获取服务端数据，参数拼接在url上，以 query string 方式发送给后端
+- post 新增数据，参数以body形式发送给后端
+
+
+## 参数
+
+| 参数    | 说明     | 类型           | 默认值 |
+| :------ | :------- | :------------- | :----- |
+| url | 请求地址 | string        | -      |
+| options   | 请求配置，即axios的配置，     | Options         | -     |
+
+### Options
+| 参数    | 说明     | 类型           | 默认值 |
+| :------ | :------- | :------------- | :----- |
+| body | 请求传递给后端的参数 | any      | -      |
+| requestType   | 数据格式    | 'form' 或 'json' 或 'urlencoded'        | -     |
+
+## 调用方式
+### ✨配和swr调用
+> 如果已全局配置过swr,可不用传入request
+
+```tsx
+import React from 'react'
+import useSWR from 'swr';
+import { request } from "@uiw-admin/utils"
+
+export default const Index = () => {
+  const [ name ,setName ] = React.useState('')
+  const { mutate } = useSWR(
+    ['/api/selectById',{ method: 'POST', body: {id:1} }],
+    request,
+    {
+      revalidateOnMount: false,
+      revalidateOnFocus: false,
+      onSuccess: (data) => {
+        if (data && data.code === 200) {
+          setName(data.data)
+         }
+      },
+    }
+  )
+
+  React.useEffect(()=>mutate(false),[mutate])
+
+  return <div>{name}</div>
+}
+
+```
+### 在rematch中使用
+> 在servers/index.js中
+```ts
+import { request } from "@uiw-admin/utils"
+
+export const selectById  = (params:{id:string}) => request("/api/selectById",{ method:"POST",body: { ...params } })
+
+```
+> 在model/index.ts中
+```ts
+import { RootModel } from '@uiw-admin/models'
+import { createModel } from '@rematch/core'
+import { selectById } from '../servers'
+
+const index = createModel<RootModel>()({
+  name: 'index',
+  state: {
+    name:''
+  },
+  reducers: {
+    updateState: (state: any, payload: any) => ({
+      ...state,
+      ...payload,
+    }),
+  },
+  effects: (dispatch) => ({
+    async selectById(payload: {id:string}) {
+      const dph = dispatch
+      const data = await selectById(payload)
+      if (data.code === 200) {
+        dph.index.dispatch({
+          type:"updateState",
+          payload:{
+            name:data.data || ''
+          }
+        })
+      }
+    },
+  }),
+})
+export default index
+
+```
+
+> 在页面中调用
+```tsx
+import React from 'react'
+import { useDispatch,useSelector } from 'react-redux'
+import { RootState,Dispatch } from '@uiw-admin/models'
+
+export default const Index = () => {
+  const dispatch = useDispatch<Dispatch>()
+  const stores = useSelector((state: RootState) => state) || {}
+  const { index:{ name } } = stores
+  React.useEffect(()=>{
+     dispatch({
+      type: 'index/selectById',
+      payload:{id:1},
+    })
+  },[])
+  return <div>{name}</div>
+}
+
+```
+
+## ❤️贡献者
+
+感谢所有的贡献者，欢迎开发者为开源项目贡献力量。
+
+<a href="https://github.com/uiwjs/uiw-admin/graphs/contributors">
+  <img src="https://uiwjs.github.io/uiw-admin/CONTRIBUTORS.svg" />
+</a>
+
+## License
+
+Licensed under the MIT License.

examples/website/src/pages/request/index.tsx

@@ -0,0 +1,5 @@
+import Preview from '../../components/Preview';
+
+const Page = () => <Preview path={() => import('./README.md')} />;
+
+export default Page;