WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2025-03-24 433cf5bfd7d0bd602c3147c15720a654ea47b028
Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
2 files added
149 ■■■■■ changed files
_cursor.ai/prompts/创建一个请求.prompts.md 79 ●●●●● patch | view | raw | blame | history
_cursor.ai/prompts/创建一个页面.prompts.md 70 ●●●●● patch | view | raw | blame | history
_cursor.ai/prompts/创建一个请求.prompts.md
New file
@@ -0,0 +1,79 @@
# 指令:创建一个请求
我们以会员信息为例新开请求
## 第一步:添加请求数据JSON文件
在 mocks 文件夹下新建数据文件 `getUserInfo.json`
```
src/public/static/项目名称/mocks/user/getUserInfo.json
```
内容为:
```json
{
    "state": {
        "code": 2000,
        "msg": "OK"
    },
    "data": {
    }
}
```
## 第二步:在请求集中添加请求
在 `src/fetchers` 文件夹下,以 F 开头的请求请求集中,添加一个独立的请求方法,方法名和 json 文件一样
例如:在 `FUser.js` 中添加 `getUserInfo`
```js
class FUser extends Fetcher {
    constructor() {
        super({
            urlPrefix: ['/api/user/', '/mini/'],
        });
    }
    // 读取会员信息
    getUserInfo(user) {
        const url = this.spellURL('getUserInfo', 'User/Info');
        const send = {
            ...this.transKeyName('underline', user),
        };
        return this.post(url, send);
    }
}
export const $fetchUser = new FUser();
```
如果创建一个全新的请求集,那么构造器的 urlPrefix 参数的第一个值为 `'/api/分类名/'`
## 第三步:在数据控制器中调用请求
在需要的需要的数据控制文件中:
- 使用 `import` 引入需要的使用的请求集
- 在类中,添加一个独立方法,调用对应的数据请求
```js
import { $fetchUser } from '@fetchers/FUser';
export class PLogisSender extends Pilot {
    // 加载用户详情
    onLoadUserDetail(user) {
        Taro.showLoading();
        $fetchUser.getUserDetail(user)
            .then(res => {
                Taro.hideLoading();
                if (!res) {
                    return;
                }
                this.userDetail = res.detail;
            });
    }
}
```
_cursor.ai/prompts/创建一个页面.prompts.md
New file
@@ -0,0 +1,70 @@
# 指令:创建一个页面
我们以会员中心为例新开页面
## 第一步:创建界面文件夹
在界面层的目录 `src/pages/某分类名/` 下新建页面文件夹 `userCenter`
```
src/pages/user/userCenter
```
## 第二步:创建界面配置文件
在刚刚新建的文件夹下新建配置文件 `userCenter.config.js`
内容为:
```js
export default {
    navigationBarTitleText: '会员中心',
}
```
## 第三步:创建空白界面
继续在刚刚新建的文件夹下新建界面文件 `userCenter.vue`
内容参考文件 `src/components/_cursor.ai/rules/type-surface.mdc` 中的空白模版
### 样式
同时创建样式文件 `userCenter.scss`
```css
/**
 * userCenter
 * @author 作者
 */
@import "../../../components/common/sassMixin";
.user-center {}
```
## 第四步:创建数据控制器
在业务数据控制层的目录 `src/pilots/某分类名/` 下创建数据控制器 `PUserCenter.js`
内容参考文件:`src/components/_cursor.ai/rules/type-pilot.mdc` 中的空白模版
## 第五步:添加页面路由
在路由文件 `src/app.config.js` 中,添加会员中心的路由
```js
export default {
    pages: [
        'pages/home/index/index',
        // 添加会员中心
        'pages/user/userCenter/userCenter',
    ],
};
```
## 第六步:添加首页入口
在首页菜单配置文件 `src/fetchers/datas/menu.json` 文件中,在 `menu` 属性的数组中,添加一条数据
```json
{
    "authId": 1,
    "name": "会员中心",
    "url": "/pages/user/userCenter/userCenter",
    "icon": ""
}
```
注意:`authId` 不要重复