绍

介绍

前面我们以及学会了Bootstrap框架和jQuery库的基本使用方法，并且已经把这两个软件包整合到了我们的TFPHP框架里面，接下来我们就可以使用它们去制作用户管理系统的视图模板了。

用户管理系统包含几个主页模板：

1）用户信息表

2）用户登录页面

3）用户注册页面

4）个人资料修改

5）登录密码重置

6）用户头像上传

7）安全问题设置

8）绑定邮箱设置

9）忘记密码页面

页面比较多，我们一点点地设计。万事开头难，福哥今天下带着大家完成先完成第一个表单页面——用户登录页面。

用户登录页面

HTML

登录页面的html部分包括一个页头和一个表单。

<div class="wrapper">

    <div class="wrapper-header">

        <!-- top bar begin -->
        <div class="row topbar">
            <div class="navbar navbar-text">
                TFUMS v1.0 - TONGFU.net
            </div>
            <ul class="nav ml-md-auto">
                <li class="nav-item"><a href="" class="nav-link">首页</a></li>
                <li class="nav-item"><a href="" class="nav-link">登录</a></li>
                <li class="nav-item"><a href="" class="nav-link">注册</a></li>
            </ul>
        </div>
        <!-- top bar end -->

    </div>

    <div class="wrapper-content">

        <!-- login form begin -->
        <div class="row login-form">
            <div class="col-sm-12">
                <h3 class="text-center">登录</h3>
                <p>请输入正确的用户名和密码登录用户管理系统</p>
                <form>
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" type="text" name="user" />
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password" name="pass" />
                    </div>
                    <div class="form-group overflow-hidden">
                        <label class="float-left">
                            <input type="checkbox" name="remember" value="Y" />
                            保存登录状态
                        </label>
                        <a href="" class="float-right">忘记密码</a>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm form-control">登录</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- login form end -->

    </div>

    <div class="wrapper-footer">

    </div>

</div>

CSS

用户登录页面的CSS也是一个top bar和一个login form两个部分。

/**
 * top bar
 */
.topbar{
    padding: 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.topbar a{
    color: #333;
}
.topbar a:hover{
    color: #007bff;
}

/**
 * login form
 */
.login-form{
    margin: 0 auto;
    width: 350px;
}

讲解

用户登录页面

首先，因为这是TFUMS系统的第一个模板，所以福哥先设计了页头的样式。这个页头也会作为其他页面的共用的页头。页头使用了bs的nav样式组的样式，简化了自己写CSS的工作。

其次，表单部分使用了bs的form-group样式作为每一行表单项的容器样式，加上label和form-control简简单单就把一个漂亮的表单做出来了。

还有福哥使用浮动加清除实现了“保存登录状态”和“忘记密码”的左右布局设计。

最后，福哥给button增加了form-control样式，使按钮撑满了整个容器，看起来比较工整了。

总结

今天我们完成了第一个表单页面的模板，包括：HTML和CSS部分。有了这个基础之后，再去制作其他表单页面就容易多了。

下一课我们将尝试完成用户注册页面、忘记密码页面、登录密码重置三个页面的模板的制作。

https://m.tongfu.net/home/35/blog/512901.html

定义设置登录页面

启动ant design vue pro脚手架

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

自定义设置登录页面

ant design vue pro提供了一套登录页面模板，可以基本满足我们的业务需求，但是有些地方还需要修改以达到满足我们系统的业务需求。其中需要修改的地方主要有以下四点，修改的地方如下图所示。

1. 修改系统小图标和文字

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

修改方式：首先我们需要准备系统图标，推荐一个阿里巴巴出品的矢量图标库—— iconfont。我以XX大学毕业生就业信息管理系统为例，修改图标和文字。下载好的图标我们修改名为logo.png，并替换public下的logo.png。然后修改index.html的head部分的title标签内容为XX大学毕业生就业信息管理系统，修改之后的index.html如下图所示。

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

2. 自定义修改页面系统图标、 大标题、小标题描述

修改路径：ant-design-vue-pro/src/layouts/UserLayout.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，具体修改小标题描述位置如下图所示。

修改后的结果如下图所示。

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

我们可以根据自身系统业务需求来取舍页面功能，比如只需保留账户密码登录，无需设置手机号登录。不设置自动登录，并且不提供其它登录方式。修改路径为ant-design-vue-pro/src/views/Login.vue。修改位置如下图所示。

修改输入框提示语，可以定位到用户名和密码输入框，看到其placeholder属性也是使用代码定义，那我们可以通过在locals/lang/zh_CN/user.js

4. 修改页脚内容

修改路径：ant-design-vue-pro/src/layouts/UserLayout.vue

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

到此自定义设置登录页面就设置完成了，修改之后的效果如下图所示。

配置路由菜单

输入用户名和密码（都为admin）即可进入前端首页。脚手架首页如下图所示。

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

修改浏览器标题内容

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

修改路径：ant-design-vue-pro/src/config/defaultSetting.js

修改位置：修改位置如下图所示。

配置路由菜单

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

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

asyncRouterMap数组中定义了对象属性有path、name、component、meta、redirect、children。

• path属性可以自定义设置
• name属性建议和页面中定义export的name属性保持一致
• component属性除首页定义为BasicLayout，其余定义为RouteView即可
• meta属性里面定义了title、icon、permission属性，其中title属性定义了路由菜单名称、icon属性定义了图标，permission定义了路由权限
• redirect属性设置为子路由path路径
• children属性定义父路由的子路由，以及孙子路由等等。属性可按照脚手架给出的模板进行定义。配置的路由属性如下图所示。

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

总结

第二章给大家详细介绍了如何自定义设置登录页面内容、如何配置路由菜单项。每一步都有详细的路径和截图作为参考。请大家跟着图片进行配置，如有配置不正常的可以留言，我看到会及时回复。第三章给大家主要讲解右上角用户名的配置以及设置头像下挂菜单，去掉mock数据初步入门。这可能是全网唯一的分享这套优秀的前端框架的系列文章，大家多多鼓励，你的每一次点赞收藏转发都是鼓励我不断更新下去的动力，敬请期待！

家好，今天给大家介绍一款，html+css实现的扁平简洁登录页面html源码（图1）。送给大家哦，获取方式在本文末尾。

打开页面有图片动画特效，看起来非常不错（图2）

源码完整，需要的朋友可以下载学习（图3）

本源码编码：10186，需要的朋友，访问[92ui点net]，搜索10186，即可获取。