七天免登录（Cookie+session）+ 页面显示动画人物效果（萌娘+气泡效果）+购物车的实现代码
2024-04-13 16:56:51
一.七天免登录（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)@ResponseBodypublic 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);//判断用户是否勾选七天免登录，设置cookieif ("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){//读取cookieCookie[] 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('❄'),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();elsepool.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>
三.购物车实现-代码（JSP实现）
<%@ page import="com.tjetc.domain.User" %><%--Created by IntelliJ IDEA.User: 17814Date: 2021/1/28Time: 21:51To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>我的购物车</title><base href="${pageContext.request.contextPath}/"/><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js" charset="utf-8"></script><link href="bootstrap/css/file_mycat.css" rel="stylesheet"><link href="bootstrap/css/bootstrap.css" rel="stylesheet"><script src="bootstrap/js/jquery-1.11.3.js" type="text/javascript"></script><script src="bootstrap/js/bootstrap.js" type="text/javascript"></script><script type="text/javascript">function fenye(pageNum){dopost(pageNum);}function dopost(pageNum) {$("#navPage").html("");$(".nav>div ul").html("");$.ajax({url:"myCat/selectByProduct",data:{pageNum:pageNum},type:"post",dataType:"json",success:function (data) {var row="";var list=data.list;for (var i = 0; i < list.length; i++) {row += "<div class='col-md-2' οnclick='orderDetail("+list[i].id+")'><img src='"+list[i].photopath+"' width='100%'><div>"+list[i].name+"</div><span>"+list[i].price+"元</span></div>"}$("#navPage").append(row);row = "<li>为你推荐</li><li style='float: right' class='glyphicon glyphicon-refresh' οnclick='fenye("+data.nextPage+")'>换一批</li>";$(".nav>div ul").append(row);}});}/*点击 查看商品的详情信息*/function orderDetail(id){location.href="product/selectByIdAndOrderDetail?product_id="+id;}$(function(){if ($("#hidden").val() == "") {alert("请您先登录 您还未登录哟！！")if (confirm("您是否要去登录呢？")) {location.href="login_user.jsp";}else {location.href="index.jsp";}}/*每次加载购物车时都会先删除订单表中尚未提交的订单*/dopost("1");//全选功能 绑定一个点击事件$(".ckAll").click(function(){//获取全选复选框的状态 $(this) 当前的状态 prop方法获取、设置checked属性 复选框的属性var ck=$(this).prop("checked")//设置所有商品复选框的状态$(".chk").prop("checked",ck);jisuan();})//商品选择功能 绑定点击事件$(".chk").click(function(){//默认所有商品都是选中的var all=true;//判断所有商品选择按钮的状态 each()：遍历 遍历每个".chk"元素的状态：$(".chk").each(function(){//当有一个".chk"元素不满足时，复选框checbox的属性checked，假设不成立if($(this).prop("checked")==false){all=false}})//设置全选按钮的状态 设置复选框的值$(".ckAll").prop("checked",all);jisuan();})//加的功能$(".jia").click(function(){//根据当前的 获取下一个元素 进而获取元素的值 获取旁边文本框的值 .next() 直接获取下一个var v=$(this).next().val();//值自增v++;//alert(v);//重新设置文本框的值$(this).next().val(v)//设置小计的值 价格*数量//获取价格的值 parent()找父元素 prev()获取兄弟元素，获取前一个var p=$(this).parent().prev().text();//设置小计的值 text()返回文本内容$(this).parent().next().text(p*v);jisuan();})//减的功能$(".jian").click(function(){//获取旁边文本框的值var v=$(this).prev().val();//值自减v--;//alert(v);if(v<1){v=1;}//重新设置文本框的值$(this).prev().val(v)//设置小计的值 价格*数量//取价格的值 parent()找父元素 prev()获取兄弟元素，获取前一个//通过当前的元素找到父元素，并通过父元素找到父元素的兄弟元素var p=$(this).parent().prev().text();//设置小计的值 text()返回文本内容$(this).parent().next().text(p*v);jisuan();});$(".textMoney").blur(function () {var count = $(this).val();if (count == 0) {count=1;$(this).val(count);}else if (count < 0 || count > 10) {count=1$(this).val(count);alert("购买数量不能过多、或者小于0");}var price = $(this).parent().prev().text();//alert("哈哈哈："+price);var sum = count*price;$(this).parent().next().text(sum);jisuan();})//删除功能/*$(".cartBody a").click(function(){//友情提示if(confirm("确定删除此商品吗？？")){//parents() 查询当前$(this)=$(".cartBody a") 中所有的row,row 是a的父类$(this).parents(".row").remove();emp();}jisuan();})*///批量删除$(".cartFoot a").click(function(){if (confirm("确定要删除这些商品吗？？？")) {$.ajax({url:"myCat/deletesMyCatById",data:{},type:"post",dataType:"json",success:function (data) {location.href="myCat/selectByMyCat";}});emp();/*$(".chk").each(function(){//如果当前复选框是选中状态if ($(this).prop("checked")) {//删除此商品 $(this).prev():获取当前状态的前一个元素var myCatId = $(this).prev().prev().prev().val();/!*$(this).parents(".row").remove();emp();*!/}});*/}jisuan();})//判断购物车是否是空的function emp() {if ($(".cartBody .row").length==1) {$("#ep").removeClass("hidden");}}emp();//计算总价格的方法function jisuan(){//声明变量记录总价格var tt=0;//遍历商品选择按钮$(".chk").each(function(){//如果选中，累加小计金额if ($(this).prop("checked")) {var p=$(this).parents(".row").children(".price").text();tt+=parseInt(p)}})$("#total").text(tt);}//随时查看复选框的情况$(".chk").click(function () {//当前购物车复选框的状态var status = $(this).prop("checked");//获得购买时用户的idvar user_id=$(this).prev().val();//获得商品的idvar product_id=$(this).prev().prev().val();//获得购物车中的 购物车的idvar myCart_id=$(this).prev().prev().prev().val();//获取购买时单件商品的数量//注意： 这里使用find()函数的时候是$(this)下面的元素var count = $(this).parent().next().next().next().next().find("input").val();/*alert(count);*/if (status == true) {$.ajax({url:"provisional/add",data:{user_id:user_id,product_id:product_id,count:count,myCat_status:status,myCart_id:myCart_id},type:"post",dataType:"json",success:function (data) {}})}else {$.ajax({url:"provisional/delByPIdAndUId",data:{user_id:user_id,product_id:product_id},type:"post",dataType:"json",success:function (data) {}})}})/** 结算，所选中的商品,当订单中的支付状态变为已经支付时，清除购物车中所选中的* */$("#settleBtn").on('click',function () {$.ajax({url:"order/selectProvisional",type:"post",dataType:"json",success:function (data) {if (data==true){//获得购买时用户的idvar user_id=$(".chk").prev().val();//获得总价格//声明变量记录总价格var subtotal=0;//遍历商品选择按钮$(".chk").each(function(){//如果选中，累加小计金额if ($(this).prop("checked")) {var p=$(this).parents(".row").children(".price").text();subtotal+=parseInt(p)}})/*alert(user_id+":"+subtotal);*/$.ajax({url:"order/addSettleAccounts",data:{uid:user_id,subtotal:subtotal},type:"post",dataType:"json",success:function (data) {location.href="order/selectByOrderAndUserSubmit";}})}else {alert("请选择您要购买的商品");}}})})})function delById(id){if (confirm("确定删除此商品吗？？")) {$.ajax({url:"myCat/delById",data:{id:id},type:"post",dataType:"json",success:function (data) {alert(data==true?"删除成功":"删除失败");location.href="myCat/selectByMyCat";}})}}/*修改购物车中的商品的相关信息*/function findByMyCartId(id) {$("#update_MyCart").html("");$.ajax({url:"myCat/findByMyCartId",data:{id:id},type:"post",dataType:"json",success:function (data) {var list = data.orderDetailList;var myCat = data.myCat;console.log(list);console.log(myCat);var optionSize = "";var optionPatten = "";for (var i = 0; i < list.length; i++) {optionSize += "<option value='"+list[i].size+"'>"+list[i].size+"</option>";optionPatten += "<option value='"+list[i].patten+"'>"+list[i].patten+"</option>";}var textMyCart="<div><input type='hidden' name='id' value='"+myCat.id+"'><img src='"+myCat.product.photopath+"' width='100px'></div><div style='margin-top: 20px'>品牌：<input type='text' name='brand' value='"+myCat.brand+"' style='border: 0px;width: 100px' readonly='readonly'> 尺码：<select name='size'>"+optionSize+"</select> 颜色：<select name='patten'>"+optionPatten+"</select></div>";$("#update_MyCart").append(textMyCart);}})};//修改购物车信息function updateMyCartById() {var format = new FormData(document.getElementById("updateMyCart"));$.ajax({url: "myCat/updateMyCartById",data:format,type:"post",dataType:"json",contentType:false,processData:false,success:function (data) {alert(data==true?"修改成功":"修改失败");location.href="myCat/selectByMyCat";}})}</script>
<style type="text/css">#navPage>div:hover{cursor: pointer;opacity: 0.7;}
</style></head>
<body style="background: #F7F7F7">
<input type="hidden" id="hidden" value="${user}">
<div class="header"><div class="header1"><div class="col-md-4 col-xs-4 header11"><ul><li>手机阿里</li><li>|</li><li>欢迎来到阿里巴巴</li><c:if test="${user!=null}"><li><a href="personal_user.jsp" target="_blank">${user.username}</a></li></c:if><c:if test="${user==null}"><li><a href="login_user.jsp">请登录</a></li></c:if><li><a href="register_user.jsp">免费注册</a></li></ul></div><div class="col-md-8 col-xs-8 header12"><ul><li><a href="index.jsp">1688首页</a></li><li>|</li><li>我的阿里</li><li>|</li><li><a href="myCat/selectByMyCat">购物车</a></li><li>|</li><li>我的收藏</li><li>|</li><li>入驻诚信通</li><li>|</li><li>实例商家</li><li>|</li><li>工业品牌</li><li>|</li><li>我是供应商</li><li>|</li><li>客服中心</li><li>|</li><li>网站导航</li><li>|</li></ul></div></div><div class="header2"><div class="header21"><a href="index.jsp"><img src="bootstrap/imag/mycat01.jpg"></a><span class="glyphicon glyphicon-heart-empty"></span><b>我的购物车</b></div></div>
</div>
<div class="container" style="margin-left: 200px"><div class="cart"><form action="index.html"><div class="row cartHead text-center"><div class="col-md-1"><input type="checkbox" class="ckAll" />全选</div><div class="col-md-2">图片</div><div class="col-md-3">名称</div><div class="col-md-1">价格</div><div class="col-md-2">数量</div><div class="col-md-1">总计 </div><div class="col-md-2">操作</div></div><div class='cartBody'><c:forEach items="${list}" var="m"><div class="row"><div class="col-md-1"><input type="hidden" value="${m.id}"><%--商品id--%><input type="hidden" value="${m.product.id}"><%--用户id--%><input type="hidden" value="${m.user.id}"><input type="checkbox" class="chk" /></div><div class="col-md-2"><img src="${m.product.photopath}"/></div><div class="col-md-3">${m.product.name}<br><div style="margin-top: 20px"> 品牌：${m.brand}</div><p style="margin-top: 20px">颜色：${m.patten}</p></div><div class="col-md-1">${m.product.price}</div><div class="col-md-2"><button type="button" class="jia">+</button><!--readonly使文本框只能是处于读的状态，不能输入数字修改--><input type="text" value="1" class="textMoney" readonly="readonly"/><button type="button" class="jian">-</button><p style="margin-top: 20px">尺码：${m.size}</p></div><div class="col-md-1 price">${m.product.price}</div><%--<div class="col-md-2"><a href="javascript:">删除</a></div>--%><input type="button" onclick="delById(${m.id})" value="删除" style="width: 60px;margin-top: 40px"><input type="button" onclick="findByMyCartId(${m.id})" value="编辑" data-toggle='modal' data-target='#myModal' style="width: 60px;margin-left: 5px"></div></c:forEach><div class="row hidden" id="ep"><div class="col-md-12" style="text-align: center;">此购物已空，去购物吧！！！ <a href="index.jsp">前往首页浏览商品</a></div></div></div><div class="cartFoot"><div class="row"><div class="col-md-1"><a href="javascrip:">批量删除</a></div><div class="col-md-7"></div><div class="col-md-4 text-right" >总价格:<span id="total">0</span>元 <input type="button" id="settleBtn" value="立即结算"/></div></div></div></form></div>
</div><div class="nav"><div class="layui-tab"><ul class="layui-tab-title"></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show" id="navPage"></div></div></div>
</div><div><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">亲,请谨慎修改您的购物车哟</h4></div><form id="updateMyCart"><div class='modal-body' id="update_MyCart"></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>取消</button><%--Immediate evaluation:立即评价--%><button type='button' class='btn btn-primary' onclick="updateMyCartById()">确认</button></div></form></div></div></div></div><div class="foot"><div class="foot1"><ul><li>© 2010-2020 1688.com 版权所有</li><li>关于阿里巴巴</li><li>联系我们</li><li>知识产权</li><li>著作权与商标声明</li><li>法律声明</li><li>服务条款</li><li>隐私政策</li><li>网站导航</li></ul></div><div class="foot2"><ul><li>阿里巴巴集团</li><li>阿里巴巴国际站</li><li>1688</li><li>全球速卖通</li><li>淘宝网</li><li>天猫</li><li>聚划算</li><li>一淘</li><li>飞猪</li><li>阿里妈妈</li><li>虾米</li><li>阿里云计算</li><li>YunOS</li><li>阿里通信</li><li>万网</li><li>UC</li><li>支付宝</li><li>钉钉</li><li>阿里健康</li><li>一达通</li><li>Lazada</li></ul></div>
</div><!-- 点击出富强民主效果 -->
<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></body>
</html>七天免登录（Cookie+session）+ 页面显示动画人物效果（萌娘+气泡效果）+购物车的实现代码相关推荐
- SpringBoot Thymeleaf Vue Mybatis 登录和注册的实现，以及使用Cookie实现七天免登录
文章目录 5. 功能实现 5.1 用户注册和登录功能 前端页面 后台登录和注册 5.2 未登录拦截 5.3 七天内免登录 Cookie 和 Session Cookie简介 Cookie 的使用 利用 ...
- PHP—利用cookie实现七天免登录
在大部分系统,都会存在用户的注册登录退出.当这个系统每天都要登录,但是每次都要输出用户名密码的话,就会觉得很麻烦(在不考虑安全隐患的情况下),这是就可以设计一个免登录的方法,来有效地解决这一问题. 解 ...
- Cookie实现七天免登录
cookie实现七天免登录 浏览器要实现自动登录,将登录信息保存本地的cookie里,但仅仅保存安全隐患高. 流程 1.保存用户信息,当选择七天自动登录复选框时,在后台验证用户密码正确后,将用户的这些 ...
- vue实现七天免登录（cookie）
一.在登录页面的标签中加入一个checkbox v-model绑定它的checked <div class="rt"><el-checkbox v-model=& ...
- jsp 内置对象 登录 cookie + session
概述 一共两个页面 当直接访问产品列表的时候,会判断用户是否登录,如果用户没有登录,则直接3秒跳转. 如果用户登录,则不进行跳转 登录页面:对于登录页面来说,直接输入用户名,密码.和数据库进行对比,进 ...
- 七天免登录JavaScript实现
html代码 <label for="">用户名:</label><input type="text" id="user ...
- Cookie 学习案例之三天免登录
Cookie 问题:HTTP 协议是没有记忆功能的,一次请求结束后,相关数据会被销毁.如果第二次的请求需要使用相同的请求数据怎么办呢?难道是让用户再次请求书写吗? 解决:使用 Cookie 技术 解释 ...
- 仿写小米官网（登录、注册页面、首页、详情页、购物车）
功能介绍 各网页公用功能 返回顶部 调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部 注册 用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...
- Cookie,Session,JWT
这里的客户端可以是常规的浏览器,也可以是接口测试工具,如Postman,JMeter,Burpsuite等,其中浏览器在得到服务器响应的set-cookie后,会将cookie信息保存到本地的浏览器缓 ...
最新文章
- openresty编译添加stream-lua-nginx-module模块
- CCSP-防火墙学习笔记第6章
- [转载] 大道至简：软件工程实践者的思想——第四章 流于形式的沟通
- 全方位讲解硬件防火墙的选择
- DL之CNN：基于CNN-RNN(GRU,2)算法(keras+tensorflow)实现不定长文本识别
- 如何让python调用C和C++代码
- linux 定义快捷命令,Linux系统自定义快捷命令的详细说明
- ELK日志系统之使用Rsyslog快速方便的收集Nginx日志
- C语言 Mkl 矩阵乘法,MKL库矩阵乘法
- 手机怎么识别图片中的文字？来试试这两个方法吧
- 云解析 dns 服务器,你知道为什么云解析DNS又快又安全吗？
- 偏微分方程离散化matlab,[数学]偏微分方程的离散化方法4.ppt
- Conflux人物志 | Péter明哲 Marcel马驰
- 基于微信小程序的todo番茄钟设计与实现源码
- Android 抛弃原生WebView，使用腾讯X5内核、并加入广告拦截。
- 2021河南省第十三届ACM/icpc大学生程序设计竞赛榜单
- 石基信息:战略性收购思迅软件,线下支付平台布局完善
- 哲哲打游戏（读清题意）
- 【JHM1400】电阻桥式或半桥式传感器信号调理模块例程
- 计算机5800计算道路标高程序,Casio fx-5800P计算器三个公路基本测量程序编写与应用...