使用html自定义登录页怎么增加背景图呢？https://help.fanruan.com/finereport/doc-view-882.html 代码如下 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定义登录Demotitle> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js">script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">script> <style> .container { display: flex; justify-content: center; } .login-box { width: 300px; margin-top: 100px; } .login-box h2 { font-size: 26px; text-align: center; margin-bottom: 25px; } .login-item { margin-bottom: 20px; } style>head> <body><div class="container"> <form class="login-box" action="" method="post" onsubmit="return false;"> <h2>数据决策系统h2> <div class="login-item"> <label for="inputUsername" class="sr-only">用户名label> <input type="text" id="inputUsername" class="form-control" placeholder="用户名" required="" autofocus=""> div> <div class="login-item"> <label for="inputPassword" class="sr-only">密码label> <input type="password" id="inputPassword" class="form-control" placeholder="密码" required=""> div> <button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">登录button> form>div><script src="http://localhost:8075/webroot/decision/file?path=/com/fr/web/ui/fineui.min.js&type=plain&parser=plain">script><script> document.getElementById("submitBtn").addEventListener("click", function () { doSubmit(); }); function doSubmit() { var username = document.getElementById("inputUsername").value.trim(); var password = document.getElementById("inputPassword").value.trim(); if (username === "") { window.alert("请输入用户名"); return false; } if (password === "") { window.alert("请输入密码"); return false; } /** * 通过登录接口发送post请求，携带用户名密码等信息 */ $.ajax({ url: "http://localhost:8075/webroot/decision/login", contentType: "application/json", type: "POST", dataType: "json", data: JSON.stringify({ username: username, password: password, validity: -1, origin: getUrlQuery("origin") }), success: function (res) { // 登录成功后保存是否保持登录状态以及token if (res.data) { var data = res.data; var day = data.validity === -2 ? (14 * 24) : -1; BI.Cache.addCookie("fine_remember_login", data.validity, "/", day); BI.Cache.addCookie("fine_auth_token", data.accessToken, "/", day); // 然后跳转到相应的页面 var response = data.originUrlResponse; if (BI.toUpperCase(response.method) === "GET") { window.location.href = response.originUrl; } else { doActionByForm(response.originUrl, response.parameters, {method: response.method}); } } else { // 提示错误信息 alert(res.errorMsg); } }, error: function () { alert("超时或服务器其他错误"); } }); } // 查询url参数 function getUrlQuery (name) { var reg = new RegExp("(^|&)" + name + "=(*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r !== null) return r; return ""; } // 通过form表单跳转 function doActionByForm (url, data, options) { options = options || {}; var config = { method: options.method, url: url, data: data, target: options.target }; var $form = $("<form method=\"" + config.method + "\" />"); $form.attr("action", config.url); $form.attr("method", config.method || "post"); $form.attr("target", config.target || "_self"); for (var key in config.data) { $form.append("<input type=\"hidden\" name=\"" + key + "\" value=\"" + config.data + "\" />"); } $(document.body).append($form); $form.submit(); $form.destroy(); }script>body> html>
