小结-登录页面配置

以上介绍了模板编写、菜单配置、用户配置功能，下面结合实际示例，进行简单的登录页面配置，用户展示配置方法。

假设 web_name = www.sexbao.net

前置检查

首先检查程序是否已经启动运行：

docker ps

可以看到 weijuncug/hardmall、 weijuncug/auth-server 、 weijuncug/user-manager 三个微服务都在运行中。 weijuncug/consul 、weijuncug/mariadb两个基础设施也在运行中。

如果不成功，请仔细阅读基础环境安装

模板编写

然后再服务器上打开consul地址 http://127.0.0.1:8500，如果需要远程访问，将127.0.0.1替换为服务器的IP即可，注意防火墙是否设置了白名单。

打开kv 编辑界面，一路点击到 www.sexbao.net/files/views/目录，新建 login.html

详见前端模板编写

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="/static/login.css">
</head>
<body>
    <form action="/login" method="post">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">登录</button>
    </form>
    <div class="login-tip">{{.err}}</div>
</body>
</html>

菜单配置

打开数据库，编辑 menus表。设置 ename='login'、cname='登录' 。具体SQL是

详见菜单配置

insert into menus (ename,cname) values ('login','登录');

配置用户

打开用户管理器的数据库，编辑 user_stores表，增加一条 user_name=admin,password='123456',role_id='1'的数据。

详见用户配置

insert ino user_stores (user_name,password,role_id) values('admin','password',1);

配置样式

样式文件，以 /static/开头的默认到consul中读取。

详见样式和JS文件编写

在consul中新建 /www.sexbao.net/files/static/login.css文件，写入样式信息：

.login-tip{color:red;}

测试是否成功

打开网站 /login.html页面，可以看到上面编写的html代码已经生效。填写错误的用户名密码，点击登录后，跳转到 /login/err-1.html中，同时网页中红色现在 用户名或者密码不存在.

至此，一个完整的前端页面就已经配置完成了。