二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > 重慶網站建設 > 忠縣網站建設要從登錄界面設計開始(html5+Spring Boot)

忠縣網站建設要從登錄界面設計開始(html5+Spring Boot)

時間:2018-08-26 00:01 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

 
忠縣網站建設要從登錄界面設計開始(html5+Spring Boot)
 
對于大多數忠縣企業網站來說,登錄功能都是需要的,那么怎么做一個好看的登錄界面,又能實現登錄的作用呢?今天來看一下吧。
 
既然要實現登錄,那么首先是頁面的呈現,先看一下效果圖:
 
忠縣網站電腦端登錄頁面效果圖:
 
忠縣網站電腦端登錄頁面效果圖:

 
忠縣網站手機端登錄頁面效果圖:

 忠縣網站手機端登錄頁面效果圖:
 
 
那么如何實現的呢?
 
首先是背景圖片,要想保證一張圖片剛好作為背景圖呢?這就需要CSS來實現了:
 
body {
    height: 100%;
    background: url(image/loginbg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #CCCCCC;
    display: flex;
    align-items: center;
    justify-content: center;
}
這樣能保證圖片平鋪在屏幕上且不會被拉伸和截取。
 
那么登錄的模塊是如何放在屏幕的中間,且背景設置相應的透明度:
 
 
<div style="height: 500px;width: 500px;background: #555;
opacity: 0.5;border-radius: 20px;">
</div>
<div style="color: #FFFFFF;position:absolute;top: 0px;
height: 500px;width: 500px;display: flex;align-items: 
center;justify-content: center;flex-direction: column">
    <div class="login-contain-box">
        <span class="paddr10" style="width: 30%">賬戶:</span>
        <input autocomplete="off" id="username" 
         class="input-login " style="width: 70%">
    </div>
    <div class="login-contain-box">
        <span class="paddr10" style="width: 30%">密碼:</span>
        <input id="pwd" class="input-login " 
         style="width: 70%"  type="password">
    </div>
    <div class="login-contain-box">
        <input type="submit" value="登錄" class="btn" 
         style="width: 100%" onclick="toVaild()">
    </div>
</div>
 
.input-login {
    background-color: transparent !important;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px solid white;
    outline: none;
    color: white
}
 
.login-contain-box {
    padding: 15px;
    width: 50%;
    display: flex;
    justify-content: center;
}
 
.btn {
    background-color: transparent;
    color: white;
    font-size: 15px;
    border-radius: 12px;
    outline: none;
}
 
.btn:hover {
    opacity: 0.8;
    cursor: pointer;
}
 
.paddr10 {
    /*padding-right: 10px;*/
    border-bottom: 1px solid;
}
如此便簡單的實現了一個登錄頁面,那么就要和后端進行交互了。這里我使用Spring Boot框架來開發接口。
 
 
登錄按鈕的點擊事件:
 
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/md5.js"></script>
<script src="js/http.js"></script>
<script type="application/javascript">
       function toVaild() {
        var id = document.getElementById("username").value;
        var pwd = document.getElementById("pwd").value;
        pwd = hex_md5(pwd);
        postRequset("http://localhost:8089/user/login/", 
   JSON.stringify({"name": id, "pwd": pwd}), function (res) {
            alert(res.data)
        })
    }
</script>
這里說明一下:其一是MD5碼編碼是不可逆的,對密碼進行編碼后就不能還原;其二是不同的密碼可能會對應相同的MD5編碼。其三是這里封裝來一個ajax請求:
 
 
function postRequset(url, data, callback) {
    $.ajax({
        headers: getHeader(),
        type: "POST",
        url: url,
        data: data,
        success: function (res) {
            return typeof callback == "function" &&
             callback(res)
        },
        fail: function (res) {
            alert("failed")
        }
    })
}
那么后端呢?
 
這里關于如何新建一個Spring Boot項目就不多說了,網上很多教程,公眾號的微服務欄目也有對應的文章,大家可自行查閱。
 
這里僅僅展示一下后端的代碼:
 
@CrossOrigin
@RestController
@RequestMapping("/user/")
public class UserController extends BaseController{
 
    @RequestMapping("login")
    @ResponseBody
    public BaseModel<String> login(){
        BaseModel<String> res = new BaseModel<>();
        res.setData(convertRequestBody().getString("pwd"));
        return res;
    }
}
其中CrossOrigin是解決跨域的問題的注解。BaseController是自己封裝的一個類用來獲取請求中的參數。BaseModel也是自己封裝的一個類作為返回結果的封裝類。
 

版權聲明:本文:忠縣網站建設要從登錄界面設計開始(html5+Spring Boot) 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

推薦文章

熱門文章

最新文章

回到頂部
二十二世纪古墓奇兵爱慕影院 老时时龙虎和走势 最新澳门博彩线上娱乐 云娱乐 21点规则及玩法攻略 pt电子吧 时时彩老玩家的经验 后三包胆必中法有哪些 四川时时开奖结果 pk10冠军百期错一计划软件 2018棋牌游戏二八杠 重庆时时彩预测 快乐时时是哪里的