UJCMS后端二次开发教程04-前端示例代码

后台使用前后端分离的方式开发，后台前端工程为ujcms-cp。

如项目不需要国际化功能，除日志模块外，其它国际化代码可以直接用中文代替。

路由

src/router/index.ts

{
    path: 'example',
    name: 'ExampleList',
    component: () => import('@/views/interaction/ExampleList.vue'),
    meta: { title: 'menu.interaction.example', requiresPermission: 'example:page' },
},

本段代码默认已被注释，如需开启示例功能，可以取消本段代码的注释。

菜单国际化代码src/locales/zh-cn/menu.json：

  "menu.interaction.example": "示例管理",

权限

src/data.ts

{
    label: t('menu.interaction.example'),
    key: 'example.key',
    perms: ['example:page', 'example:list'],
    children: [
        { label: t('list'), key: 'example:page' },
        { label: t('add'), key: 'example:create', perms: ['example:create'] },
        { label: t('edit'), key: 'example:update', perms: ['example:update', 'example:show'] },
        { label: t('delete'), key: 'example:delete', perms: ['example:delete'] },
    ],
},

本段代码默认已被注释，如需开启示例功能，可以取消本段代码的注释。

日志

src/data.ts

日志模块

export const logModules = [
    ...
    'example',
    ...
]

日志名称

export const logNames = [
  ...
  'example.create',
  'example.update',
  'example.delete',
  ...
];

日志国际化代码src/locales/zh-cn/log.json：

  "log.example": "示例管理",
  "log.example.create": "新增示例",
  "log.example.update": "修改示例",
  "log.example.delete": "删除示例",

列表页及表单页

• src/views/interaction/ExampleList.vue
• src/views/interaction/ExampleForm.vue

页面国际化代码src/locales/zh-cn/interaction.json：

  "example.name": "名称",
  "example.description": "描述",
  "example.height": "身高",
  "example.height.tooltip": "单位：cm(厘米)",
  "example.birthday": "出生日期",
  "example.enabled": "是否启用",