会员订阅与下载的功能，把过程做成一个【会员订阅系列】进行分享。之前已经发布了前端控制下载、前端控制显示条数，本篇将实现会员登录验证功能。这里补充一下，前几篇我们都讲前端，前端原理讲完了再讲后端。
文章目录
- 前言
- 一、会员订阅功能是什么？
- 二、使用步骤
-
- 1.引入库
- 2.JS代码
- 具体案例
- 总结
前言
知识付费现在已经完全在互联网上流行开了，从文章到小说、从创意到程序、从音乐到影视等等，都需要前后端的订阅控制，所以我们必须了如指掌，并且一学就会。
一、会员订阅功能是什么？
简而且概之就是，通过前端或后端让用户，根据会员等级看到相应的内容。这个权限可能是长期或一次性或多次性的。
二、使用步骤
1.引入库
//加入jquery库。
2.JS代码
//本例因为讲前端登录验证我们用COOKIE，如果涉及到具体超作以后再用加密身份验证（在后端时讲）。
1、//首先写一个 COOKIE 函数，用来读取COOKIE时使用
function getCookie(name) {
var value = “; " document.cookie;
var parts = value.split(”; " name “=”);
if (parts.length == 2) return parts.pop().split(“;”).shift();
return null;
}
2、//登录界面函数
function userG(){
var overlay = $(‘
‘position’: ‘fixed’,
‘top’: 0,
‘left’: 0,
‘width’: ‘100%’,
‘height’: ‘100%’,
‘background-color’: ‘rgba(0, 0, 0, 0.5)’,
‘z-index’: ‘9990’,
‘display’: ‘block’
});
var loginBox = $(‘ ’).css({
‘position’: ‘fixed’,
‘top’: ‘50%’,
‘left’: ‘50%’,
‘transform’: ‘translate(-50%, -50%)’,
‘width’: ‘360px’,
‘background-color’: ‘#fff’,
‘padding’: ‘20px’,
‘border’: ‘1px solid #ccc’,
‘box-shadow’: ‘0 0 10px rgba(0, 0, 0, 0.1)’,
‘z-index’: ‘9999’
});
var usertxt = $(‘
登录会员可获得任意订制功能
’);var usernameInput = $(‘
’);
var passwordInput = $(‘ ’);
var loginButton = $(‘登录’).click(function() {
var username = usernameInput.val();
var password = passwordInput.val();
$.ajax({
//先把登录接口写在这里，后端的时侯再讲
url: ‘/user/user.php?tx=login’,
type: ‘POST’,
data: {
u: username,
p: password
},
dataType: ‘json’,
success: function(response) {
if (response.code === 1) {
var usv=response.user ;
loginy(usv);
$(“.lmsg”).text(‘登录成功！’);
loginBox.remove();
overlay.remove();
} else {
$(“.lmsg”).text(‘登录失败，请检查用户名和密码！’);
}
},
error: function() {
$(“.lmsg”).text(‘网络错误，请稍后再试！’);
}
});
});
var ress = $(‘注册’).click(function() {
event.preventDefault();
window.location.href = ‘/user/user.php?tx=res’;
});
var closeButton = $(‘关闭’).click(function() {
loginBox.remove();
overlay.remove();
});
loginBox.append(usernameInput, passwordInput, usertxt, loginButton, ress, closeButton);
$(‘body’).append(overlay, loginBox);
};
3、/验证是否登录
//读取用户COOKIE，COOKIE的名字（键）为user
var userCookie = getCookie(‘user’);
//这里先简单判断一下 是否是 用户已经登陆 ，复杂的身份验证（在后端时讲）。
if (userCookie !== null) {
//已经登录 调用全部显示的函数（显示的函数上期讲过可以分析上期内容）
toggleRows();
} else {
//未登录 调用登录界面函数，弹出登录界面
userG();
}
具体案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会员显示更多实例</title>
<script src="https://g.csdnimg.cn/lib/jquery/1.12.4/jquery.min.js"></script>
<style>
#showMore{
width:100%;text-align:center;
width: 100%;
padding-top: 78px;
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),to(#fff));
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 100%);cursor: pointer;
position: relative;
z-index: 996;
padding-top: 160px;
bottom: -1px;
margin-top: -160px;
color:#0c5081;
}
</style>
</head>
<body>
<h1>控制显示数据条数</h1>
<table class="sj" id="table_down">
<tbody>
<tr><td><div class="t2">日期</div></td><td><div class="t2">现有确诊</div></td><td><div class="t2">累计确诊</div></td><td><div class="t2">治愈病例</div></td><td><div class="t2">死亡病例</div></td></tr>
<tr><td>'2022-10-21'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-22'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-23'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-24'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-25'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-26'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-27'</td><td>85</td><td>2028</td><td>1940</td><td>3</td></tr><tr>