后端学习者的关于登录页面可复用代码

最新推荐文章于 2024-07-25 23:17:17 发布

蜗牛变涡流

最新推荐文章于 2024-07-25 23:17:17 发布

阅读量397

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Kristabo/article/details/128762387

版权

背景：

介绍（附代码）

背景：

对于后端开发者来说，如果要直观的去测试后台数据与前端数据间的交互情况，除了找熟悉前端的小伙伴帮忙，就是自己得需要了解前端的三大件（HTML、CSS、JavaScript）。在此基础上去编写一个简单的可与后端进行数据交互的、可被对应浏览器解析的展示页面。这意味着我们需要花费额外时间去学习这些语法，那么对于心急的开发者来说，当主要精力花费在后端业务上的学习时，前端代码是可以借用一些框架的，例如登录/注册页面等。当然建议后端开发者能简单地去了解如何去写个表单、如何提交数据，也便于后续更多的交互处理。

介绍（附代码）：

学习后端登录/注册业务功能的小伙伴，也许需要一个简洁的登录页面，这里提供一个基本的可复用html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<div style="width: 350px; margin: 100px auto 0 auto; height: 400px; border: 1px solid #ccc;
        border-radius: 5px; box-shadow:#ccc 0 0 10px; ">
    <div style="margin-top: 30px; text-align: center; ">
        <div style="text-align: center; margin-top: 80px; font-size: 30px; color: dodgerblue">欢迎登录</div>
        <div style="margin-top: 30px">
            <input type="text" id="username" style="width: 60%; border: 1px solid #ccc; padding: 10px"
                   placeholder="请输入账号">
        </div>
        <div style="margin-top:10px">
            <input type="password" id="password" style="width: 60%; border: 1px solid #ccc; padding: 10px"
                   placeholder="请输入密码">
        </div>
        <div style="margin-top: 30px">
            <button style="width: 60%; border: none; background-color: dodgerblue; color: white; font-size: 16px;
                 box-sizing: content-box; padding: 10px; cursor: pointer" onclick="login()">登录
            </button>
        </div>
    </div>
</div>

<script src="jquery.min.js"></script>


</body>
</html>

界面效果如图所示：