记住密码功能

<template>
    <div class="content">
        <div class="loginLogo" style="margin-top: 4rem;">
            <img src="static/logo-ss.png" alt="" />
        </div>         
        <view class="input-group">
            <view class="input-row border">
                <text class="title">账号：</text>
                <m-input class="m-input" type="text" clearable focus v-model="username" placeholder="请输入账号"></m-input>
            </view>
            <view class="input-row">
                <text class="title">密码：</text>
                <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
            </view>
        </view>
        <view class="btn-row">
            <button type="primary" class="primary" @tap="loginByPwd">登录</button>
        </view>
        <!-- 记住密码 -->
        <view class="remember-psw">
            <checkbox-group>
                <label><checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>记住账号密码</label>
            </checkbox-group>
        </view>
        <div class="copyright">
            技术支持：0712-2345658
        </div>
    </div>
</template>

<script>
    import mInput from '../../components/m-input.vue'
    export default {
        components: {
            mInput
        },
        data() {
            return {
                username: '',
                password: '',
                rememberPsw:true,
            }
        },
        mounted() {
                    let that = this;
                    //页面加载完成，获取本地存储的用户名及密码
                    const username = uni.getStorageSync('username');
                    const password = uni.getStorageSync('password');
                    if(username && password){
                        that.username = username;
                        that.password = password;
                    }else{
                        that.username = "";
                        that.password = "";
                    }
                    
                },
        methods: {
            loginByPwd() {
                console.log(this.username)
                var that = this;
                var websiteUrl = this.websiteUrl;
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
                
                //此时从这里开始请求接口
                uni.request({
                        url: websiteUrl + 'app/user/login',
                        header: {
                            'content-type': 'application/x-www-form-urlencoded'
                        },
                        method: 'POST',
                        timeout: 10000,
                        data: {
                            username: this.username,
                            password: this.password,
                        },
                        success: (res) => {
                            console.log(res)
                            uni.hideLoading()
                            if (res.data.code == 200) {
                                uni.showToast({
                                    title: '登录成功',
                                    icon: 'none',
                                    duration: 500
                                });
                                uni.setStorageSync('token', res.data.data.token);
                                uni.setStorageSync('role', res.data.data.user.role);
                                uni.setStorageSync('deptCode', res.data.data.user.deptCode);
                                uni.setStorageSync('userId', res.data.data.user.userId);
                                    //登录成功将用户名密码存储到用户本地
                                                        if(that.rememberPsw){//用户勾选“记住密码”
                                                            uni.setStorageSync('username', res.data.data.user.username);
                                                            uni.setStorageSync('password',  this.password);
                                                        }else{//用户没有勾选“记住密码”
                                                            uni.removeStorageSync('username');
                                                            uni.removeStorageSync('password');
                                                            that.user.username = "";
                                                            that.user.password = "";
                                                        }
                
                                setTimeout(function() {
                                    uni.switchTab({
                                        url:'../homepage/homepage'
                                    })
                                }, 500)
                            } else if (res.data.code == 202) {
                                uni.showToast({
                                    title: res.data.msg,
                                    icon: 'none',
                                    duration: 1500
                                });
                            } else if (res.data.code == 203){
                                uni.showToast({
                                    title: res.data.msg,
                                    icon: 'none',
                                    duration: 2000
                                });
                            }
                        
                        },
                        fail: (res) => {
                            console.log(res)
                            uni.showToast({
                                title: "请求超时！",
                                icon: 'none',
                                duration: 2000
                            });
                        }
                
                    })
            },
            
        },
    }
</script>

<style>
    .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        /* background-color: #efeff4; */
        padding: 10px;
        background: url(../../static/loginBg.jpg);
        background-size: 100% 100%;
    }
    .title{
        text-align: center;
        margin: 20px auto;
    }
    .loginLogo{
        width:30%;
        margin:0 auto;
    }
    .loginLogo img{
        display: block;
        width:100%;
        height:auto;
    }
    .input-group {        
        margin-top: 20px;
        position: relative;
        color: #fff;
    }
    
    .input-group::before {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }
    
    .input-group::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
         
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }
    
    .input-row {
        display: flex;
        flex-direction: row;
        position: relative;
        font-size: 18px;
        line-height: 40px;
        border-bottom: 1px solid #979797;
        width: 90%;
        margin: 0 auto;
    }
    
    .input-row .title {
        width: 100px;
        padding-left: 15px;
    }
    
    .input-row.border::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 8px;
        height: 0px; 
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
         
    }
    .input-group::before{
        background-color: none;
        height: 0px;
    }
    .btn-row {
        margin-top: 25px;
        padding: 10px;
    }
    
    button.primary {
        background-color: #0faeff;
    }
    .copyright{
        position: absolute;
        bottom: 10px;
        left: 10px;
        text-align: center;
        width: 100%;
        color: #e0e0e0;
    }
    
</style>

以上是登录代码：

重点代码如下截图：

 

 

 

 

 

 

第二种，java 后台，使用的thymeleaf 写的页面 手机浏览器访问的，

一：java 后台代码：

  @ApiOperation(value = "登录")
    @RequestMapping(value = "login", method = RequestMethod.POST)
    public String login(String username, String password, String remember, HttpServletRequest req, HttpServletResponse resp, HttpSession httpSession, ModelMap modelMap) {
        User user = userService.byUsername(username);
        if (null != user) {
            String md5Password = MD5Tool.md5(password);
            if (user.getPassword().equals(md5Password)) {
                httpSession.setAttribute("currentUser", user);
                if("true".equals(remember)){
                    Cookie ck1=new Cookie("remember",remember);
                    ck1.setMaxAge(60*60);
                    resp.addCookie(ck1);
                    Cookie ck2=new Cookie("username",username);
                    ck2.setMaxAge(60*60);
                    resp.addCookie(ck2);
                    Cookie ck3=new Cookie("password",password);
                    ck3.setMaxAge(60*60);
                    resp.addCookie(ck3);

                }else{
                    //清cookie
                    Cookie [] cks=req.getCookies();
                    if(cks !=null){
                        for(Cookie c:cks){
                            c.setMaxAge(0);
                            resp.addCookie(c);
                        }
                    }
                }






                modelMap = getIndexDetail(modelMap, user);
                if (user.getRole().equals("company")) {
                    return "qiyehome";
                } else {
                    return "index";
                }
            } else {
                httpSession.setAttribute("message", "密码不正确！");
                return "login";
            }
        } else {
            httpSession.setAttribute("message", "用户不存在！");
            return "login";
        }
    }

j前端代码

<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>登录</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="shortcut icon" href="/favicon.ico">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" th:href="@{/dist/css/sm.min.css}">
        <link rel="stylesheet" th:href="@{/dist/css/sm-extend.min.css}">
        <link rel="stylesheet" th:href="@{/dist/css/comm.css}">

    </head>
    <body>
    <div class="content">
        <div class='login'>
            <form th:action="@{/weChat/login/login}" th:method="post" >
            <div class='login_title'>
                食品报送平台
            </div>
            <div class='login_fields'>
                <div class='login_fields__user'>
                    <div class='icon'>
                        <img src='../../img/user_icon_copy.png'>
                    </div>
                    <input placeholder='用户名'  id="username" name="username" type='text' th:value="${username}">
                    <div class='validation'>
                        <img src='../../img/tick.png'>
                    </div>
                    </input>
                </div>
                <div class='login_fields__password'>
                    <div class='icon'>
                        <img src='../../img/lock_icon_copy.png'>
                    </div>
                    <input placeholder='密码' required name="password" id="password" type='password' th:value="${password}">
                    <div class='validation'>
                        <img src='../../img/tick.png'>
                    </div>
                    <div style="color:red;" th:text="${session.message}" th:if="${session.message!=null}"></div>
                </div>

                <div class='login_fields__remember' style="color:#fff;font-size: 14px;margin-top:10px;padding-left:10px;">
                    <input id="remember" name="remember" type='checkbox' value="true">    记住密码

                </div>
                <div class='login_fields__submit'>
                    <input type='submit' class="loginSubmit" value='登录'>
                </div>
            </div>
            </form>
            <div class='disclaimer'>
                <p>技术支持</p>
            </div>
        </div>
    </div>
        <script src='https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
        <script th:src='@{/dist/js/sm.js}'></script>
        <script th:src='@{/dist/js/sm-extend.js}'></script>
    </body>
<script>
    var cookies=document.cookie.split(';');
    function getCK(mkey) {
        for (var i=0;i<cookies.length;i++){
            var kv=cookies[i].split('=');
            if(kv[0].trim()==mkey){
                return kv[1].trim();
            }
        }
        return '';
    }


    window.onload=function () {
        var remember=getCK('remember');
        var username=getCK('username');
        var password=getCK('password');
        if(remember=='true'){
            var userNameInput=document.getElementById("username");
            userNameInput.value=username;
            var rememberInput=document.getElementById("remember");
            rememberInput.checked="checked";
            var passwordInput=document.getElementById("password");
            passwordInput.value=password;
        }

        console.log("222",remember,username,password)

    }
</script>
</html>