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

[db:作者]

设置自定义登录页面以启动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数据。这可能是全网唯一一篇分享这个优秀前端框架的系列文章。请鼓励我。每次喜欢，收藏，转发都是鼓励我不断更新的动力。敬请期待！