2 lines
8.3 KiB
JavaScript
2 lines
8.3 KiB
JavaScript
import{_ as s,c as n,a as r,o as e}from"./app-CDlLWk6N.js";const a=""+new URL("custom_page_pc_1-CXjVoBOn.png",import.meta.url).href,o=""+new URL("custom_page_pc_2-8e_g1uGT.png",import.meta.url).href,p=""+new URL("custom_page_pc_3-PVAgZmk6.png",import.meta.url).href,g=""+new URL("custom_page_pc_4-BJ6TU5rW.png",import.meta.url).href,i=""+new URL("custom_page_pc_5-67hJreQO.png",import.meta.url).href,c=""+new URL("custom_page_pc_6-D0qmIZZb.png",import.meta.url).href,l=""+new URL("custom_page_app_1-7IYO8Eyo.png",import.meta.url).href,h=""+new URL("custom_page_app_2-BSYSeOjb.png",import.meta.url).href,m=""+new URL("custom_page_app_3-B3tOwhE2.png",import.meta.url).href,_=""+new URL("custom_page_app_4-2qED3-kx.png",import.meta.url).href,d=""+new URL("custom_page_app_5-DVBTSAZJ.png",import.meta.url).href,u={};function f(v,t){return e(),n("div",null,t[0]||(t[0]=[r('<h1 id="自定义页面" tabindex="-1"><a class="header-anchor" href="#自定义页面"><span>自定义页面</span></a></h1><h2 id="pc端" tabindex="-1"><a class="header-anchor" href="#pc端"><span>PC端</span></a></h2><h3 id="第一步-新建页面" tabindex="-1"><a class="header-anchor" href="#第一步-新建页面"><span>第一步：新建页面</span></a></h3><p>自定义页面，需要在 <strong>/src/views</strong> 文件夹下新建你所需开发的页面，并且尽量规范化，比如：你新建页面的路由为: <strong>/custom/index</strong>，则你新建的页面的路径则为：src -> views -> custom -> index.vue。 如下图，我在 <strong>/src/views</strong> 下，新建了一个文件夹为custom，并且里面有一个index.vue的文件</p><p><img src="'+a+'" alt="自定义页面"></p><h3 id="第二步-自定义路由" tabindex="-1"><a class="header-anchor" href="#第二步-自定义路由"><span>第二步：自定义路由</span></a></h3><p>自定义路由，需要在 <strong>/src/router/routes</strong> 文件夹下的 <strong>basic.ts</strong> 和 <strong>index.ts</strong> 下进行自定义，如下图，我在 <strong>basic.ts</strong> 中新建了一个自定义路由 <strong>CUSTOMFORM_ROUTE</strong>，并在 <strong>index.ts</strong> 中引入了这个自定义路由。</p><p><img src="'+o+'" alt="自定义路由"></p><h3 id="第三步-配置路由权限-菜单权限" tabindex="-1"><a class="header-anchor" href="#第三步-配置路由权限-菜单权限"><span>第三步：配置路由权限（菜单权限）</span></a></h3><p>配置路由（菜单）权限需要用管理员账号登录，在 <strong>菜单管理</strong> 页面 <strong>新增菜单</strong> 进行操作，其中 <strong>菜单名称</strong>、<strong>组件名称</strong>、<strong>编码</strong>、<strong>上级菜单</strong>、<strong>所属系统</strong> 根据实际情况填写或者选择，<strong>路由地址</strong> 则必须与第二步中 <strong>自定义路由</strong> 一致，否则会找不到页面的。<strong>组件路径</strong> 则与第一步中的 <strong>新建页面</strong> 新建的页面的路径一致。</p><p><img src="'+p+'" alt="配置路由权限（菜单权限）"></p><h3 id="第四步-配置角色权限" tabindex="-1"><a class="header-anchor" href="#第四步-配置角色权限"><span>第四步：配置角色权限</span></a></h3><p>要显示 <strong>自定义页面</strong> 还需在特定的角色分配权限，在 <strong>角色管理</strong> 页面选择对应的角色，点击 <strong>功能授权</strong> -> <strong>菜单</strong> 进行配置</p><p><img src="'+g+'" alt="配置角色权限"></p><p>选择你新建的页面，点击 <strong>确定</strong> 按钮进行配置即可，如下图：</p><p><img src="'+i+'" alt="配置角色权限"></p><h3 id="第五步-查看效果" tabindex="-1"><a class="header-anchor" href="#第五步-查看效果"><span>第五步： 查看效果</span></a></h3><p>经过上面的操作，点击你新建的路由，即可显示你自定义的页面</p><p><img src="'+c+'" alt="查看效果"></p><h2 id="app端" tabindex="-1"><a class="header-anchor" href="#app端"><span>APP端</span></a></h2><h3 id="第一步-新建页面-1" tabindex="-1"><a class="header-anchor" href="#第一步-新建页面-1"><span>第一步：新建页面</span></a></h3><p>自定义页面，需要在 <strong>pages</strong> 文件夹下新建你所需开发的页面，比如：我在 <strong>pages</strong> 下新建了一个文件夹 <strong>custom</strong>，并且里面新建两个文件 <strong>list.vue</strong> 和 <strong>detail.vue</strong>，并在根目录下的 <strong>pages.json</strong> 下的配置了这两个文件的路由 <strong>pages/custom/list</strong> 和 <strong>pages/custom/detail</strong></p><p><img src="'+l+'" alt="自定义页面"></p><h3 id="第二步-配置路由权限" tabindex="-1"><a class="header-anchor" href="#第二步-配置路由权限"><span>第二步：配置路由权限</span></a></h3><p>由于APP端的权限与PC端的分开，所以配置APP端的路由权限，需要在数据库中找到表名为： <strong>xjr_app_menu</strong> 的表，并在表中插入你新建页面的相关信息。如下图，我插入了一条name为“<strong>自定义页面</strong>”，url为“<strong>/pages/custom/list</strong>”（必须以/开头，否则跳转会有问题），create_user_id填写一般为管理员的id，其他字段根据实际情况填写。</p><p><img src="'+h+'" alt="数据库插入自定义路由权限"></p><h3 id="第三步-分配权限" tabindex="-1"><a class="header-anchor" href="#第三步-分配权限"><span>第三步：分配权限</span></a></h3><p>经过第三步后，APP端并不会显示新建的页面，要显示则需要在PC端的 <strong>角色管理</strong> 页面选择对应的角色，点击 <strong>移动端功能授权</strong> 进行配置。</p><p><img src="'+m+'" alt="配置角色权限"></p><p>选择你在数据库插入的数据，点击 <strong>确定</strong> 按钮进行配置即可，如下图：</p><p><img src="'+_+'" alt="配置角色权限"></p><h3 id="第五步-查看效果-1" tabindex="-1"><a class="header-anchor" href="#第五步-查看效果-1"><span>第五步： 查看效果</span></a></h3><p>经过上面的操作，点击你新建的路由，即可显示你自定义的页面</p><p><img src="'+d+'" alt="查看效果"></p>',34)]))}const b=s(u,[["render",f]]),P=JSON.parse('{"path":"/front_dev/adv/custom_page.html","title":"自定义页面","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[{"level":3,"title":"第一步：新建页面","slug":"第一步-新建页面","link":"#第一步-新建页面","children":[]},{"level":3,"title":"第二步：自定义路由","slug":"第二步-自定义路由","link":"#第二步-自定义路由","children":[]},{"level":3,"title":"第三步：配置路由权限（菜单权限）","slug":"第三步-配置路由权限-菜单权限","link":"#第三步-配置路由权限-菜单权限","children":[]},{"level":3,"title":"第四步：配置角色权限","slug":"第四步-配置角色权限","link":"#第四步-配置角色权限","children":[]},{"level":3,"title":"第五步： 查看效果","slug":"第五步-查看效果","link":"#第五步-查看效果","children":[]}]},{"level":2,"title":"APP端","slug":"app端","link":"#app端","children":[{"level":3,"title":"第一步：新建页面","slug":"第一步-新建页面-1","link":"#第一步-新建页面-1","children":[]},{"level":3,"title":"第二步：配置路由权限","slug":"第二步-配置路由权限","link":"#第二步-配置路由权限","children":[]},{"level":3,"title":"第三步：分配权限","slug":"第三步-分配权限","link":"#第三步-分配权限","children":[]},{"level":3,"title":"第五步： 查看效果","slug":"第五步-查看效果-1","link":"#第五步-查看效果-1","children":[]}]}],"git":{"updatedTime":1744701845000,"contributors":[{"name":"chen_junior","username":"","email":"chen_junior@163.com","commits":2}],"changelog":[{"hash":"9a7f9b39198bf7daa0ccccc7958891d8a3d3c982","time":1744701845000,"email":"chen_junior@163.com","author":"chen_junior","message":"feat: 新增高级二开关于APP端自定义页面的文档"},{"hash":"d15190d832ce06fe71b004d3de70455a08f87aec","time":1744108134000,"email":"chen_junior@163.com","author":"chen_junior","message":"feat: 新增高级二开关于PC端自定义页面的文档"}]},"filePathRelative":"front_dev/adv/custom_page.md"}');export{b as comp,P as data};
|