目录
背景：
对于后端开发者来说，如果要直观的去测试后台数据与前端数据间的交互情况，除了找熟悉前端的小伙伴帮忙，就是自己得需要了解前端的三大件（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>界面效果如图所示：
