七天免登录（Cookie+session）+ 页面显示动画人物效果（萌娘+气泡效果）

一.七天免登录（Cookie+session），基于实现jsp页面

页面效果：勾选7天免登录复选框，输入用户名和密码，点击登录即可，登录后可在cookie中查看用户登录信息，以及用户过期时间

在这里插入图片描述

1.登录页面：

<div class="nav222">
                        <form>
                            <span class="loginSpan1" style="display: block;width: 300px;height: 30px;background: #FEF2F2;border: 1px solid red;font-size: 13px;padding: 5px"></span>
                            <input type="text" name="username" id="username" placeholder="用户名" required="required"><br>
                            <input type="password" name="password" id="password" placeholder="请输入登录密码" required="required"><br>
                            <%--<button onclick="loginUser()" id="loginUser">登录</button>--%>
                            <%--<button  id="loginUser">登录</button>--%>
                            <input type="button" id="loginUser"  style="color: #ffffff" value="登录">
                        </form>
                        <a href="register_user.jsp" style="margin-left: 20px;">免费注册</a>
                        <input type="checkbox" name="read_login" id="read_login"  style="width: 12px;height: 12px;margin-left: 140px;">7天免登录
                    </div>

2.script，登录请求

if(username.trim().length!=0 && password.trim().length!=0){
                    //7天免登录-获取复选框
                    var readLogin = $("#read_login").prop("checked");
                    $.ajax({
                        url:"LoginAndRegister/loginUser",
                        data:{
                            username:username,
                            password:password,
                            readLogin:readLogin
                        },
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            if (data == true) {
                                alert("登录成功");
                                location.href="index.jsp";
                            }else {
                                alert("登录失败");
                            }
                        }
                    })
                }

3.后端登录接口

//用户登录
    @RequestMapping(value = "/loginUser",method = RequestMethod.POST)
    @ResponseBody
    public boolean usernameAndPassword(@RequestParam(defaultValue = "") String username,
                                       @RequestParam(defaultValue = "") String password,
                                       @RequestParam String readLogin, HttpServletRequest request, HttpServletResponse response){



        password= MD5Utils.stringToMD5(password);
        password="96e79218965eb72c92a549dd5a330112";
        HttpSession session = request.getSession();
        User user=userService.selectUsernameAndPassword(username,password);
        if (user!=null){
          
            /*每次用户登录之后判断  用户账户金额 从而修改用户的等级  从而打相应的折扣*/
            Double user_money = user.getUser_money();
            if (user_money>=0.0 && user_money<100){
                user.setGrade("钻石");
            }else if (user_money>=100 && user_money<500){
                user.setGrade("星耀");
            }else if (user_money>=500){
                user.setGrade("王者");
            }
            int i = userService.updateUserGrade(user);
            
		    //设置session，在前端中根据参数获取值
            session.setAttribute("user",user);
            session.setAttribute("username",username);

            //判断用户是否勾选七天免登录，设置cookie
            if ("true".equals(readLogin)){
                Cookie cookie = new Cookie("username",username);
                cookie.setPath("/");
                //设置cookie，有效期时间
                cookie.setMaxAge(60*60*24*7);
                response.addCookie(cookie);
            }
            return true;
        }else {
            session.setAttribute("user",null);
            session.setAttribute("username","");
            //session.setAttribute("password","");
            return false;
        }
    }

我这里是使用jsp方式实现的，因此使用jsp方式，获取由后端传递的数据信息

在这里插入图片描述

4.启动程序，跳转页面时，会加载数据，同时，获取cookie中的数据，验证cookie

我这里是，使用Tomcat启动程序，启动完成后，会调用selectProductsByIndex，然后跳转到对应的页面，我这里是跳转到首页

http://localhost:8088/ccis_Web_exploded/product/selectProductsByIndex

在这里插入图片描述

selectProductsByIndex方法，代码实现

    //用户刚打开网页时  验证7天免登录
    @RequestMapping("/selectProductsByIndex")
    public String selectProductsByIndex(HttpServletRequest request){
        HttpSession session = request.getSession();
        if (session.getAttribute("user")==null){
            //读取cookie
            Cookie[] cookies = request.getCookies();
            if (cookies!=null){
                for (Cookie cookie : cookies) {
                	//根据创建时自定义的名称，获取cookie
               		//Cookie cookie = new Cookie("username",username);
                    if ("username".equals(cookie.getName())){
                        session.setAttribute("username",cookie.getValue());
                        session.setAttribute("subtotal",0.0);
                        User user2 = userService.findByUsername(cookie.getValue());
                        if (user2!=null){
                            session.setAttribute("user",user2);
                       
                        }
                    }
                }
            }
        }

System.out.println("\"///\\n\"+\n" +
                "\"//                      _ao0oo_                          //\\n\"+\n" +
                "\"//                     o8888888o                         //\\n\"+\n" +
                "\"//                     88* , *88                         //\\n\"+\n" +
                "\"//                     (| '_' |)                         //\\n\"+\n" +
                "\"//                     0\\\\  = /0                         //\\n\"+\n" +
                "\"//                  ——/'——‘——                        //\\n\"+\n" +
                "\"//                ,`  \\\\\\\\|    |// ‘,                    //\\n\"+\n" +
                "\"//                /  \\\\\\\\||| : |||  \\\\                   //\\n\"+\n" +
                "\"//               /   _|||| -:- |||- \\\\                   //\\n\"+\n" +
                "\"//               |    |\\\\\\\\\\\\ - /// |  |                 //\\n\"+\n" +
                "\"//               | \\\\_| ''\\\\——/'' |  |                  //\\n\"+\n" +
                "\"//               \\\\ .-\\\\_ '_'  ___/-.  /                 //\\n\"+\n" +
                "\"//              ___'. .'  /-.-\\\\`. .___                  //\\n\"+\n" +
                "\"//            .\\'\\' '<  '._\\\\_<|>_/_.` >'\\'.             //\\n\"+\n" +
                "\"//           | | : `_ \\\\ '.:\\\\ _ /' :. '/-.:||           //\\n\"+\n" +
                "\"//           \\\\ \\\\ `-.  \\\\_ __\\\\ /__ _  .-` //           //\\n\"+\n" +
                "\"//        =======`-.___`-.___\\\\____/___.-`__.=`=====     //\\n\"+\n" +
                "\"//                       '==========='                   //\\n\"+\n" +
                "\"//       ********************************************    //\\n\"+\n" +
                "\"//            佛祖保佑        永不宕机       永无bug        //\\n\"+\n" +
                "\"//                                                       //\\n\"+\n" +
                "\"///\\n\");*/");

        System.out.println("佛祖保佑不出错");
		
		//跳转到，首页
        return "index";
    }

可在浏览器页面中，删除自定义的cookie，这样7天免登录就失效了

二.页面显示动画人物效果（萌娘+气泡效果）

1.雪花效果

在这里插入图片描述

<script>
    /*样式一*/
    (function($){
        $.fn.snow = function(options){
            var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '0px'}).html('&#10052;'),
                documentHeight 	= $(document).height(),
                documentWidth	= $(document).width(),
                defaults = {
                    minSize		: 10,
                    maxSize		: 20,
                    newOn		: 1000,
                    flakeColor	: "#FF7C00" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                },
                options	= $.extend({}, defaults, options);
            var interval= setInterval( function(){
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 200,
                    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake.clone().appendTo('body').css({
                    left: startPositionLeft,
                    opacity: startOpacity,
                    'font-size': sizeFlake,
                    color: options.flakeColor
                }).animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                },durationFall,'linear',function(){
                    $(this).remove()
                });
            }, options.newOn);
        };
    })(jQuery);
    $(function(){
        $.fn.snow({
            minSize: 5, /* 定义雪花最小尺寸 */
            maxSize: 50,/* 定义雪花最大尺寸 */
            newOn: 100  /* 定义密集程度，数字越小越密集 */
        });
    });
</script>

2.鼠标滑动出气泡效果

<!-- 鼠标滑动出气泡效果 -->
<script src="https://cdn.bootcss.com/sketch.js/1.1/sketch.min.js"></script>
<script>
    function Particle(x, y, radius) {
        this.init(x, y, radius);
    }

    Particle.prototype = {
        init: function (x, y, radius) {
            this.alive = true;
            this.radius = radius || 10;
            this.wander = 0.15;
            this.theta = random(TWO_PI);
            this.drag = 0.92;
            this.color = '#fff';
            this.x = x || 0.0;
            this.y = y || 0.0;
            this.vx = 0.0;
            this.vy = 0.0;
        },
        move: function () {
            this.x += this.vx;
            this.y += this.vy;
            this.vx *= this.drag;
            this.vy *= this.drag;
            this.theta += random(-0.5, 0.5) * this.wander;
            this.vx += sin(this.theta) * 0.1;
            this.vy += cos(this.theta) * 0.1;
            this.radius *= 0.96;
            this.alive = this.radius > 0.5;
        },
        draw: function (ctx) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    };
    let MAX_PARTICLES = 280;
    let COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
        '#FF4E50', '#F9D423'];
    let particles = [];
    let pool = [];
    let demo = Sketch.create({
        container: document.getElementById('fireworks')
    });
    demo.spawn = function (x, y) {
        if (particles.length >= MAX_PARTICLES)
            pool.push(particles.shift());
        particle = pool.length ? pool.pop() : new Particle();
        particle.init(x, y, random(10, 20)); //出气泡的大小在5px 到 10px之间
        particle.wander = random(0.5, 2.0);
        particle.color = random(COLOURS);
        particle.drag = random(0.9, 0.99);
        theta = random(TWO_PI);
        force = random(2, 8);
        particle.vx = sin(theta) * force;
        particle.vy = cos(theta) * force;
        particles.push(particle);
    };
    demo.update = function () {
        let i, particle;
        for (i = particles.length - 1; i >= 0; i--) {
            particle = particles[i];
            if (particle.alive)
                particle.move();
            else
                pool.push(particles.splice(i, 1)[0]);
        }
    };
    demo.draw = function () {
        demo.globalCompositeOperation = 'lighter';
        for (let i = particles.length - 1; i >= 0; i--) {
            particles[i].draw(demo);
        }
    };
    demo.mousemove = function () {
        let touch, max, i, j, n;
        for (i = 0, n = demo.touches.length; i < n; i++) {
            touch = demo.touches[i], max = random(1, 4);
            for (j = 0; j < max; j++) {
                demo.spawn(touch.x, touch.y);
            }
        }
    };
</script>

3.点击出富强民主效果

在这里插入图片描述

<script>
    /* --   Beautiful Mouse  -- */
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("❤富强❤", "❤民主❤", "❤和谐❤", "❤文明❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤",
                "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 5) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math
                    .random() * 255) + "," + Math.floor(Math.random() * 255) + ")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 1
                },
                3000,
                function () {
                    $i.remove();
                });
        });
    });
</script>

4.萌娘动画人物效果

在这里插入图片描述

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    //默认使用的萌娘
    L2Dwidget.init({ "model": { jsonPath:"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 0 }, "display": { "position": "right", "width": 150, "height": 200,
            "hOffset": 0, "vOffset": -10 }, "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.8, "opacityOnHover": 0.8 } });

</script>