m8-mcp-server 1.0.0

package/dist/data/m8mpdoc-develop/003-/345/205/270/345/236/213/346/241/210/344/276/213/003-/345/210/227/350/241/250/350/257/246/346/203/205.md

@@ -0,0 +1,247 @@
+# 列表详情
+
+## 前言
+
+我们使用 `M8.3移动前端框架` 进行下拉刷新列表、详情页面的开发
+
+已根据 教程 章节了解 `M8` 开发的思路
+
+## 新建模块
+
+模块代码统一放在 `src/pages` 下，每个模块应用对应一个文件夹。
+
+我们在此路径下新建文件夹，例如 `m8demo`。
+
+在 `m8demo` 文件夹下新建 `router.js` 文件，如下：
+
+`src/pages/m8demo/router.js` :
+
+```js
+/**
+ * router.js无需import组件，需要path路径与vue组件名称保持匹配。
+ * routers数组下有效参数只有path与style。
+ * 构建时会自动将模块下的路由配置合并到pages.json内。
+ */
+
+// 定义路由规则，url匹配path时，加载component组件页面
+const routes = [
+    {
+        path: 'pages/m8demo/list',
+        style: {
+            navigationBarTitleText: '列表页面',
+        },
+    },
+    {
+        path: 'pages/m8demo/detail',
+        style: {
+            navigationBarTitleText: '详情页面',
+        },
+    },
+];
+
+// 导出路由文件
+export default routes;
+```
+
+## 列表页面
+
+接下来我们在 `m8demo` 下新建 `list.vue` 组件页面
+
+`list.vue` :
+
+```js
+<!-- template部分 -->
+<template>
+    <!-- template内只能有一个根节点 -->
+    <view class="container"></view>
+</template>
+
+<!-- js部分 -->
+<script></script>
+
+<!-- css部分 -->
+<style scoped></style>
+```
+
+`M8`的 `easycom` 机制，将组件引用进一步优化，开发者只管使用，无需在 `JS` 里额外导入和注册。
+
+```js
+<template>
+    <view class="container">
+        <em-minirefresh
+            ref="scrollPull"
+            :initPageIndex="initPageIndex"
+            :page-size="pageSize"
+            :url="url"
+            :request-data="dataRequest"
+            :change-data="dataChange"
+        >
+            <template v-slot:default="{ listData }">
+            <!-- 此处template内为列表list元素，listData为dataChange处理后的接口返回数据 -->
+                <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
+            </template>
+        </em-minirefresh>
+    </view>
+</template>
+
+<script>
+export default {
+    // 定义用到的数据，在template中使用{{ }}包裹，自动实现绑定
+    data() {
+        return {
+            // 请求的url
+            url: `${Config.serverUrl}/rest/list`,
+            // 接口请求的初始页面
+            initPageIndex: 0,
+            // 每次请求的分页大小
+            pageSize: 10
+        };
+    },
+    // 计算属性
+    computed: {
+
+    },
+    // 侦听属性
+    watch: {
+
+    },
+    // 实例数据创建完成后调用
+    created() {
+
+    },
+    // 实例DOM被挂载后调用
+    mounted() {
+
+    },
+    methods: {
+        // 请求参数函数
+        dataRequest(currPage, pageSize) {
+            const data = {
+                // 当前搜索的第几页，数字类型
+                currentpageindex: currPage,
+                // 每页显示记录条数，数字类型
+                pagesize: pageSize
+            };
+            const requestData = {
+                params: JSON.stringify(data)
+            };
+
+            return requestData;
+        },
+        // 修改数据返回参数
+        dataChange(res) {
+            let data;
+
+            if (res && res.status && res.status.code && res.status.code === 1) {
+                data = res.custom.infolist;
+            } else {
+                console.error('接口返回参数错误');
+            }
+
+            return data;
+        },
+        // 列表模板绑定的点击事件函数
+        itemClick(item) {
+              ejs.page.open({
+                    pageUrl: "./detail",
+                    pageStyle: 1,
+                    orientation: 1,
+                    data: {
+                        id: item.id,
+                    },
+                    success: function (result) {},
+                });
+        }
+    }
+};
+</script>
+
+<!-- css部分 -->
+<style lang="scss" scoped>
+.container {
+    height: 100vh;
+}
+</style>
+
+```
+
+## 详情页面
+
+接下来我们在 `m8demo` 下新建 `detail.vue` 组件页面
+
+`detail.vue` :
+
+```js
+<!-- html部分 -->
+<template>
+    <div class="container">
+        <h1>{{ title }}</h1>
+        <div v-html="content"></div>
+    </div>
+</template>
+
+<!-- js部分 -->
+<script>
+    export default {
+        name: "detail",
+        components: {},
+        // 定义用到的数据，在template中使用{{ }}包裹，自动实现绑定
+        data() {
+            return {
+                title: "",
+                content: "",
+            };
+        },
+        // 计算属性
+        computed: {
+
+        },
+        // 侦听属性
+        watch: {
+
+        },
+        // 实例数据创建完成后调用
+        created() {
+            const id = Util.getExtraDataByKey("id") || ""
+            this.getDetail(id);
+        },
+        // 实例DOM被挂载后调用
+        mounted() {
+
+        },
+        methods: {
+            getDetail(id) {
+                let _this = this;
+
+                Util.ajax({
+                    url: `${Config.serverUrl}/rest/detail`,
+                    data: {
+                        params: JSON.stringify({
+                            guid: id,
+                        }),
+                    },
+                })
+                    .then((result) => {
+                        if (
+                            result &&
+                            result.status &&
+                            result.status.code === 1
+                        ) {
+                            _this.title = result.custom.info.title;
+                            _this.content = result.custom.info.data;
+                        }
+                    })
+                    .catch((err) => {
+                        console.error(err);
+                    });
+            },
+        }
+    };
+</script>
+
+<!-- css部分 -->
+<style lang="scss" scoped></style>
+
+```
+
+一个简单的列表详情页面就完成了

package/dist/data/m8mpdoc-develop/003-/345/205/270/345/236/213/346/241/210/344/276/213/003-/345/210/227/350/241/250/350/257/246/346/203/205vue3.md

@@ -0,0 +1,276 @@
+# 列表详情
+
+## 前言
+
+我们使用 `M8.4移动前端框架` 进行下拉刷新列表、详情页面的开发
+
+已根据 教程 章节了解 `M8` 开发的思路
+
+## 新建模块
+
+模块代码统一放在 `src/pages` 下，每个模块应用对应一个文件夹。
+
+我们在此路径下新建文件夹，例如 `m8demo`。
+
+### 路由配置
+
+在 `m8demo` 文件夹下新建 `router.ts` 文件，如下：
+
+`src/pages/m8demo/router.ts` :
+
+```js
+/**
+ * router.js无需import组件，需要path路径与vue组件名称保持匹配。
+ * routers数组下有效参数只有path与style。
+ * 构建时会自动将模块下的路由配置合并到pages.json内。
+ */
+
+// 定义路由规则，url匹配path时，加载component组件页面
+const routes = [
+    {
+        path: 'pages/m8demo/list',
+        style: {
+            navigationBarTitleText: '列表页面'
+        }
+    }
+];
+
+// 导出路由文件
+export default routes;
+```
+
+### Mock数据配置
+
+在 `m8demo` 文件夹下新建 `mock.ts` 文件，定义列表请求模拟数据，如下：
+
+```js
+import Mock from '@mock';
+
+const resultData = [
+    {
+        // 接口地址
+        methodUrl: '/rest/mock/list',
+        // 入参
+        input: {
+            keyword: '',
+            currentpageindex: '',
+            pagesize: ''
+        },
+        // 出参
+        output: Mock.mock({
+            'infolist|10-20': [
+                {
+                    title: () => Mock.Random.csentence(10),
+                    date: ()=> Mock.Random.date(),
+                    id: ()=> Mock.Random.guid(),
+                    content: '来源：综合',
+                    photo: () => Mock.Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
+                }
+            ]
+        })
+    }
+];
+
+export default resultData;
+```
+mock 文件定义请求本地 `/rest/mock/list` 时响应 `output` 数据。
+
+### 列表页面
+
+接下来我们在 `m8demo` 下新建 `list.vue` 组件页面
+
+`list.vue` :
+
+基础结构：
+
+```html
+<!-- template部分 -->
+<template>
+    <view class="container"></view>
+</template>
+
+<!-- script部分 -->
+<script lang="ts" setup></script>
+
+<!-- css部分 -->
+<style scoped lang="scss"></style>
+```
+
+`M8`的 `easycom` 机制，将 M8-UI 组件引用进一步优化，开发者可以直接在 `template` 中使用，无需在 `script` 里额外导入和注册。
+
+根据 下拉刷新 组件 `em-minirefresh` 进行列表数据渲染。补充：
+```html
+<template>
+    <view class="container">
+        <em-minirefresh
+            ref="scrollPull"
+            :initPageIndex="initPageIndex"
+            :page-size="pageSize"
+            :url="url"
+            :request-data="dataRequest"
+            :change-data="dataChange"
+        >
+            <template v-slot:default="{ listData }">
+                <!-- 此处template内为列表list元素，listData为dataChange处理后的接口返回数据 -->
+                <em-cell v-for="(item, index) in listData" :key="index" :title="item.title" @click="itemClick(item)" />
+            </template>
+        </em-minirefresh>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const url = `${Config.serverUrl}rest/mock/list`;
+const initPageIndex = 0;
+const pageSize = 10;
+
+const dataRequest = (_currPage, _pageSize) => {
+    const data = {
+        // 当前搜索的第几页，数字类型
+        currentpageindex: _currPage,
+        // 每页显示记录条数，数字类型
+        pagesize: _pageSize
+    };
+    const requestData = {
+        params: JSON.stringify(data)
+    };
+
+    return requestData;
+};
+const dataChange = (res) => {
+    let data;
+
+    if (res && res.status && res.status.code && res.status.code === 1) {
+        data = res.custom.infolist;
+    } else {
+        console.error('接口返回参数错误');
+    }
+
+    return data;
+};
+const itemClick = (item) => {
+    ejs.page.open({
+        pageUrl: './detail',
+        data: {
+            id: item.id
+        }
+    });
+};
+</script>
+<!-- css部分 -->
+<style lang="scss" scoped>
+.container {
+    height: 100vh;
+}
+</style>
+
+```
+
+## 详情页面
+
+### 页面路由配置
+
+在 `m8demo` 文件夹下的 `router.ts` 文件中补充 `detail` 页面路由配置：
+
+```js
+/**
+ * router.js无需import组件，需要path路径与vue组件名称保持匹配。
+ * routers数组下有效参数只有path与style。
+ * 构建时会自动将模块下的路由配置合并到pages.json内。
+ */
+
+// 定义路由规则，url匹配path时，加载component组件页面
+const routes = [
+    {
+        // ...
+    },
+    {
+        path: 'pages/m8demo/detail',
+        style: {
+            navigationBarTitleText: '详情页面'
+        }
+    }
+];
+
+// 导出路由文件
+export default routes;
+```
+
+### mock数据配置
+
+在 `m8demo` 文件夹中的 `mock.ts` 文件中补充 `detail` 页面的 mock 数据：
+
+```js
+import Mock from '@mock';
+
+const resultData = [
+    {
+        // ...
+    },
+    {
+        // 接口地址
+        methodUrl: '/rest/mock/detail',
+        // 入参
+        input: {
+            guid: ''
+        },
+        // 出参
+        output:  Mock.mock({
+            info: {
+                title: Mock.Random.csentence(5, 10), // 随机生成一段中文文本。
+                data: Mock.Random.csentence(25, 30)
+            }
+        })
+    }
+];
+
+export default resultData;
+```
+
+接下来我们在 `m8demo` 下新建 `detail.vue` 组件页面
+
+`detail.vue` :
+
+```js
+<template>
+    <div class="container">
+        <h1>{{ title }}</h1>
+        <div v-html="content"></div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+const title = ref('');
+const content = ref('');
+const getDetail = (id) => {
+    Util.ajax({
+        url: `${Config.serverUrl}rest/mock/detail`,
+        data: {
+            params: JSON.stringify({
+                guid: id
+            })
+        }
+    })
+        .then((result) => {
+            if (result && result.status && result.status.code === 1) {
+                title.value = result.custom.info.title;
+                content.value = result.custom.info.data;
+            }
+        })
+        .catch((err) => {
+            console.error(err);
+        });
+};
+
+onLoad(({ id }) => {
+    getDetail(id);
+});
+</script>
+
+```
+
+一个简单的列表详情页面就完成了

package/dist/data/m8mpdoc-develop/003-/345/205/270/345/236/213/346/241/210/344/276/213/003-/350/241/250/345/215/225/346/217/220/344/272/244.md

@@ -0,0 +1,130 @@
+# 表单提交
+
+## 前言
+
+我们使用 `M8.3移动前端框架` 进行表单提交页面的开发
+
+已根据 教程 章节了解 `M8` 开发的思路
+
+## 新建模块
+
+模块代码统一放在 `src/pages` 下，每个模块应用对应一个文件夹。
+
+我们在此路径下新建文件夹，例如 `m8form`。
+
+在 `m8form` 文件夹下新建 `router.js` 文件，如下：
+
+`src/pages/m8form/router.js` :
+
+```js
+/**
+ * router.js无需import组件，需要path路径与vue组件名称保持匹配。
+ * routers数组下有效参数只有path与style。
+ * 构建时会自动将模块下的路由配置合并到pages.json内。
+ */
+
+// 定义路由规则，url匹配path时，加载component组件页面
+const routes = [
+    {
+        path: 'pages/m8form/form-sub',
+        style: {
+            navigationBarTitleText: '表单提交',
+        },
+    },
+];
+
+// 导出路由文件
+export default routes;
+```
+
+## 表单页面
+
+接下来我们新建 `form-sub.vue` 组件页面
+
+`form-sub.vue` :
+
+```html
+<template>
+    <em-form @submit="onSubmit" @failed="onFailed">
+        <em-field
+            v-model="form.username"
+            label="用户名"
+            placeholder="用户名"
+            :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <em-field
+            v-model="form.password"
+            type="password"
+            label="密码"
+            placeholder="密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+        />
+        <em-field label="滑动开关" input-align="right">
+            <template #input>
+                <em-switch v-model="form.switchChecked" />
+            </template>
+        </em-field>
+        <em-field label="单选框">
+            <template #input>
+                <em-radio-group v-model="form.radio" direction="horizontal">
+                    <em-radio name="1">单选框 1</em-radio>
+                    <em-radio name="2">单选框 2</em-radio>
+                </em-radio-group>
+            </template>
+        </em-field>
+        <em-field label="数字步进器">
+            <template #input>
+                <em-stepper v-model="form.stepper" />
+            </template>
+        </em-field>
+        <em-field label="评分">
+            <template #input>
+                <em-rate v-model="form.rate" />
+            </template>
+        </em-field>
+        <div style="margin: 16px;">
+            <em-button round block type="info" native-type="submit">提交</em-button>
+        </div>
+    </em-form>
+</template>
+```
+
+`M8`的 `easycom` 机制，将组件引用进一步优化，开发者只管使用，无需在 `JS` 里额外导入和注册。
+
+```js
+// script部分
+export default {
+    data() {
+        return {
+            form: {
+                username: '', // 用户名
+                password: '', // 用户密码
+                switchChecked: false, // 默认滑动开关为false
+                radio: '1', // 默认radio置1
+                stepper: 1, // 默认步进器为1
+                rate: 3, // 默认评分3
+            },
+        };
+    },
+    // 计算属性
+    computed: {},
+    // 侦听属性
+    watch: {},
+    // 实例数据创建完成后调用
+    created() {},
+    // 实例DOM被挂载后调用
+    mounted() {},
+    methods: {
+        // 验证通过后触发
+        onSubmit() {
+            console.log('submit', this.form);
+        },
+        // 验证不通过后触发
+        onFailed(errorInfo) {
+            console.log('error', errorInfo);
+        },
+    },
+};
+```
+
+一个简单的表单提交页面就完成了