梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > 重庆网站建设 > 忠县网站建设要从登录界面设计开始(html5+Spring Boot)

忠县网站建设要从登录界面设计开始(html5+Spring Boot)

时间:2018-08-26 00:01 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

 
忠县网站建设要从登录界面设计开始(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.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部