您的位置: 首页  >  生活常识  >  网络配置路由器(路由器咋配置)

网络配置路由器(路由器咋配置)

分类: 生活常识 • 2023-11-06 20:29:10
自定义设置登录页面启动ant design vue pro脚手架第一篇介绍了如何从git上拉取ant design vue pro脚手架并使用VS Code编辑器启动脚手架。在第二篇开始之前，我们先打开VS Code软件加载脚手架代码，并运行命令 npm run serve命令启动脚手架！通过浏览器访问地址：http://localhost:8000进入登录首页。系统登录首页如下图所示：登录首页自定义设置登录页面ant design vue pro提供了一套登录页面模板，可以基本满足我们的业务需求，但是有

设置自定义登录页面以启动ant design vue pro scaffold

第一篇文章描述了如何从git中提取ant design vue pro scaffold，并使用VS代码编辑器启动该scaffold。在第二篇文章开始之前，我们先打开VS代码软件加载脚手架代码，运行命令npm run serve命令启动脚手架！通过浏览器访问地址:http://localhost:8000进入登录主页。系统登录首页如下图所示:

登录主页

设置自定义登录页面

Design Vue Pro提供了一套登陆页面模板，基本可以满足我们的业务需求，但是有些地方还是需要修改，以满足我们系统的业务需求。有四个要点需要修改，如下图所示。

设置自定义登录页面

  • 修改系统图标和文本。

    • 修改路径:ant-design-vue-pro/public/index . html

    修改方法:首先需要准备系统图标，推荐一个阿里巴巴出品的矢量图标库——icon font。我以XX大学毕业生就业信息管理系统为例，修改了图标和文字。下载好图标。我们将把它改成logo.png，并在public下替换logo.png。然后将index.html头部的标题标签修改为XX大学毕业生就业信息管理系统，修改后的index.html如下图所示。

    修订的index.html文件

    修改完成后，我们来看看保存后浏览器端页面变化的效果，如下图。

    图标标题修改

  • 自定义页面的系统图标、标题和副标题描述。

    • 修改路径:ant-design-vue-pro/src/layouts/user layout . vue

    如何修改:打开UserLayout.vue文件，定位到修改图标标题描述的位置，如下图所示。

    修改位置

    可以看到系统图标引入在img标签的src属性，且格式为svg格式，我们可以在iconfont上复制图标的svg代码，然后将logo.svg内容替换成我们复制的svg代码。同时修改Ant Design标题为XX大学毕业生就业信息管理系统。唯一有点不好理解的是小标题描述是引入一段代码，该代码定义于locals中，路径为ant-design-vue-pro/src/locals/lang/zh_CN.js，具体修改小标题描述位置如下图所示。可以看到img标签的src属性中引入了系统图标，格式为svg。我们可以复制iconfont上图标的svg代码，然后用我们复制的svg代码替换logo.svg内容。同时蚂蚁设计的题目是XX大学毕业生就业信息管理系统。唯一难以理解的是，字幕描述是引入一段代码，用locales定义，路径是ant-design-vue-pro/src/locales/lang/zh _ cn . js，具体字幕描述位置修改如下图所示。

    字幕修改位置

    修改的结果如下图所示。

    系统修改的结果

    3.登录页面功能的自定义设置

    我们可以根据自己的系统业务需求选择页面功能，比如只需要保留账号密码登录，不需要设置手机号登录。未设置自动登录，不提供其他登录方式。将路径改为ant-design-vue-pro/src/views/log in . vue，修改位置如下图所示。

    登录页面功能设置

    登录页面设置

    修改输入框的提示，可以定位用户名和密码输入框，看到它的占位符属性也是代码定义的。然后，我们可以在locales/lang/zh _ cn/user.js中找到用户名。

    修改输入框提示

    4.修改页脚内容。

    修改路径:ant-design-vue-pro/src/layouts/user layout . vue

    修改位置:页脚内容在UserLayout中定义，具体修改位置如下图所示。

    修改页脚

    当你进入这个自定义设置的登录页面时，设置完成，修改后的效果如下图所示。

    登录页面已被修改。

    配置菜单输入用户名和密码(均为admin)进入前台主页。脚手架主页如下图所示。

    脚手架主页

    本节先介绍两个修改前端的地方，一个是浏览器显示内容，一个是系统左侧的路由菜单。

    修改浏览器标题内容

    我们观察到，进入首页后，浏览器正常显示系统图标，但浏览器内容不符合系统标题。分析系统标题的显示规则是菜单名称-系统标题。我们只需要将defaultSetting中的title属性改为系统标题即可。

    修改路径:ant-design-vue-pro/src/config/default setting . js

    修改位置:修改后的位置如下图所示。

    修改主页标题

    路由菜单

    修改路径:ant-design-vue-pro/src/config/router . config . js

    修改位置:打开路由配置文件，修改asyncRouterMap数组。修改位置如下图所示。

    路由配置文件

    asyncRouterMap数组中定义了对象属性，如路径、名称、组件、元、重定向和子级。

  • 可以自定义路径属性。
  • 名称属性建议与页面中定义的导出的名称属性一致。
  • 组件属性除了主页可以定义为BasicLayout，其余都定义为RouteView。
  • meta属性定义了标题、图标和权限属性，其中标题属性定义了路由菜单名称，图标属性定义了图标，权限定义了路由权限。
  • redirect属性设置为子路由路径path。
  • children属性定义了父路由的子路由、子路由等等。可以根据scaffolding给出的模板定义属性。下图显示了配置的路由属性。

    • 路由属性

    如果系统已经定义了需求页面，可以根据模板添加。这里我暂时演示删除一个孙子路由，我们可以演示一下路由配置效果。删除监控页面的效果如下图所示。

    路由后的效果。

    代码配置

    摘要

    第二章详细介绍了如何定制登录页面内容以及如何配置路由菜单项。每一步都有详细的路径和截图可供参考。请按照图片进行配置。如有异常配置，请留言。我看到了会及时回复的。第三章主要讲解了右上角用户名的配置和挂头像菜单的设置，去掉了mock数据。这可能是全网唯一一篇分享这个优秀前端框架的系列文章。请鼓励我。每次喜欢，收藏，转发都是鼓励我不断更新的动力。敬请期待！

    相关推荐