代码拉取完成,页面将自动刷新
ant-design-vue2.x typescript vue3.x vite 集成的一个小平台
Typescript4.x vite2.x vue3.x ant-design-vue2.x(UI框架) axios(请求) g2plot(图表库)
https://web.jiubanqingchen.cn/ demo 123456
#直接下载项目
git clone https://gitee.com/jbqc/wish-web.git
#安装前端依赖文件 类似后端的mavne
npm install
#运行项目
npm run dev
#打包代码
npm run build
├── /src/ # 源码目录
│ ├── /_types/ # 类型定义文件
│ ├── /api/ # 请求接口文件
│ ├── /assets/ # 组件静态资源(图片)
│ ├── /components/ # 公共组件
│ ├── /framework/ # 框架配置
│ ├── /i18n/ # 国际化文件
│ ├── /kit/ # 一些工具类的存放
│ ├── /layouts/ # 文件布局
│ ├── /router/ # 路由配置
│ ├── /store/ # vuex状态管理
│ ├── /styles/ # 样式文件
│ ├── /views/ # 路由组件(页面文件)
│ ├── App.vue # 组件入口
│ └── main.js # 程序入口
├── .gitignore # git忽略文件
├── index.html # 页面入口
├── package.json # 项目依赖
├── README.md # 项目文档
├── tsconfig.json # ts配置文件
└── vite.config.ts # vite的配置文件
这里和wish_server中同步 新增一个demo页面出来
/**
* @author light_dust_generator
* @since 2021-06-25 11:39:25
*/
import { ModelApi } from "/@/_types/api";
class DemoApi extends ModelApi {
//...这里可以重写父类方法,也可以增加新的方法
}
const demoApi = new DemoApi("/org/demo", "demoId");
export default demoApi;
/**
* @author light_dust_generator
* @since 2021-06-25 11:39:25
*/
export default {
demoTableTitle: '演示表格',
demoId:'主键',
demoName:'演示名称',
demoDesc:'演示描述',
demoDate:'演示时间',
demoPerson:'演示人',
//提示
formPlhDemoId:'请输入主键',
formPlhDemoName:'请输入演示名称',
formPlhDemoDesc:'请输入演示描述',
formPlhDemoDate:'请输入演示时间',
formPlhDemoPerson:'请输入演示人',
//校验
formRuleDemoId:'主键为必填项',
//表单头部
addDemoTitle: '新建演示',
editDemoTitle: '编辑演示'
}
/**
* @author light_dust_generator
* @since 2021-06-25 11:39:25
*/
import { t } from '/@/i18n/index'
export const demoTableColumns =[
{ title: t('org.demo.demoId'), key: "demoId", dataIndex: "demoId"},
{ title: t('org.demo.demoName'), key: "demoName", dataIndex: "demoName",slots: { customRender: "customDemoId" } },
{ title: t('org.demo.demoDesc'), key: "demoDesc", dataIndex: "demoDesc"},
{ title: t('org.demo.demoDate'), key: "demoDate", dataIndex: "demoDate"},
{ title: t('org.demo.demoPerson'), key: "demoPerson", dataIndex: "demoPerson"},
]
//查询字段
export const demoQueryColumns = [
]
//表单必填规则
export const demoFormRule = {
demoId: [{ required: true, message: t('org.demo.formRuleDemoId') }],
}
//这个对应路由
export const demoIndexPageUrl = "/org/demo/list";
export const demoAddPageUrl = "/org/demo/add";
export const demoEditUrl = "/org/demo/edit/";
上面是三个辅助文件 其实也可以写在页面之中 但是为了方便扩展所以分割了出来
对于页面 又做了一个拆分 建demoList demoForm单独拆分了出来作为组件 在用index 和form分别引用他们 这样做的好处是我在其他页面嵌入demoList不用将列表页面的所有元素嵌入过去 一定程度上方便的多次在不同的环境中引用,表单也是一样
├── /demo/ # demo文件夹
│ ├── /component/ # 类型定义文件
| |── |── demoList.vue 列表组件
| |── |── demoForm.vue 表单组件
│ ├── index.vue # 路由上的列表页
│ ├── from.vue #路由上的表单页
下面上代码
<template>
<qc-page-table ref="demoPageTableRef" :columns="columns" :loadData="loadData" :rowKey="(record) => record[primaryKey]">
<template #toolbarTitle>
{{ t("org.demo.demoTableTitle") }}
</template>
<template #toolbarButton>
<qc-add-button @click="addButtonClick"></qc-add-button>
<qc-delete-button @click="deleteButtonClick"></qc-delete-button>
</template>
<template #customDemoId="{ text, record }">
<qc-link :url="demoEditUrl + record[primaryKey]">
{{ text }}
</qc-link>
</template>
</qc-page-table>
</template>
<script lang='ts'>
import { defineComponent,onMounted, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import demoApi from "/@/api/org/demo";
import {demoTableColumns,demoQueryColumns,demoAddPageUrl,demoEditUrl} from "../interface";
import { useModelPageTable } from "/@/kit/model-kit";
export default defineComponent({
name: "DemoList",
setup(props) {
const { t } = useI18n();
const router = useRouter();
const demoPageTableRef = ref();
//这个是自己定义的一个表格方法 之前是直接对表格做封装太笼统了 现在使用这种api的方式使得更容易拆分 好处自己体会吧
const {primaryKey,searchTable,reloadTable,loadData,deleteSelectData} = useModelPageTable(demoPageTableRef, demoApi, );
const demoState = reactive({
demoEditUrl,
columns: demoTableColumns,
primaryKey,
loadData,
addButtonClick: () => router.push({ path: demoAddPageUrl }),
deleteButtonClick: () => deleteSelectData(),
});
onMounted(() => searchTable());
return {
t,
...toRefs(demoState),
demoPageTableRef,
searchTable,
};
},
});
</script>
<template>
<a-form ref="demoFormRef" :model="demoModel" :rules="demoFormRule" v-bind="layout">
<a-form-item name="demoId" :label="t('org.demo.demoId')">
<a-input v-model:value="demoModel.demoId" :placeholder="t('org.demo.formPlhDemoId')" />
</a-form-item>
<a-form-item name="demoName" :label="t('org.demo.demoName')">
<a-input v-model:value="demoModel.demoName" :placeholder="t('org.demo.formPlhDemoName')" />
</a-form-item>
<a-form-item name="demoDesc" :label="t('org.demo.demoDesc')">
<a-input v-model:value="demoModel.demoDesc" :placeholder="t('org.demo.formPlhDemoDesc')" />
</a-form-item>
<a-form-item name="demoDate" :label="t('org.demo.demoDate')">
<a-input v-model:value="demoModel.demoDate" :placeholder="t('org.demo.formPlhDemoDate')" />
</a-form-item>
<a-form-item name="demoPerson" :label="t('org.demo.demoPerson')">
<a-input v-model:value="demoModel.demoPerson" :placeholder="t('org.demo.formPlhDemoPerson')" />
</a-form-item>
</a-form>
</template>
<script lang='ts'>
import { defineComponent, ref } from "vue";
import demoApi from "/@/api/org/demo";
import { demoFormRule,demoEditUrl } from "../interface";
import { useModelForm } from "/@/kit/model-kit";
import { useI18n } from "vue-i18n";
export default defineComponent({
props: {
demoId: String,
},
setup(props, { emit }) {
const { t } = useI18n();
const demoFormRef = ref();
const demoModel = ref({});
const { save } = useModelForm(demoFormRef, demoModel, props.demoId, demoApi)
//提交方法
const onSubmit = () => save().then((res) => emit('submitSuccess', res.data.data))
const layout = {
labelCol: { span: 7 },
wrapperCol: { span: 15 },
};
return {
t,
demoFormRef,
demoModel,
demoFormRule,
layout,
onSubmit,
};
},
});
</script>
/**
* @author light_dust_generator
* @since 2021-06-25 11:39:25
*/
<template>
<qc-page-header></qc-page-header>
<demo-table ref="demoRef"></demo-table>
</template>
<script lang='ts'>
import { defineComponent,ref } from "vue";
import DemoTable from "./component/demo-list.vue";
export default defineComponent({
components: {DemoTable},
setup() {
const demoRef=ref();
return {demoRef}
},
});
</script>
/**
* @author light_dust_generator
* @since 2021-06-25 11:39:25
*/
<template>
<qc-page-header @back="goBack"></qc-page-header>
<a-card :bordered="false" :title="t('org.demo.demoCardTitle')">
<template #extra>
<qc-save-button @click="save"></qc-save-button>
</template>
<demo-form ref="demoFormRef" :demoId="demoId"></demo-form>
</a-card>
</template>
<script lang='ts'>
import { computed, defineComponent, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { demoIndexPageUrl } from "./interface";
import DemoForm from "./component/demo-form.vue";
export default defineComponent({
components: {DemoForm},
setup() {
const { t } = useI18n();
const demoFormRef = ref();
const router = useRouter();
const formState = reactive({
demoId: router.currentRoute.value.params.id,
save: () => demoFormRef.value.onSubmit(),
goBack: () => router.push({ path: demoIndexPageUrl }),
});
return {
t,
demoFormRef,
...toRefs(formState),
};
},
});
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型