代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="total.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="static/js/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<meta charset="utf-8">
<style>
.d1{
background-color: #000000;
border: none;
}
.d2{
background-color: white;
height: 600px;
width: 60%;
margin: 0 auto;
}
.d3{
height: 800px;
background-color: #151515;
}
.d4{
height: 600px;
width: 70%;
border-right: 1px solid #e2e2e2;
}
.d5{
position: fixed;
bottom: 0;
height: 100px;
background-color: #000000;
width: 100%;
}
.d6{
padding-top: 40px;
}
.d7{
text-align: center;
height: 450px;
}
.d10{
text-align: center;
border-top: 1px solid #e2e2e2;
padding-top: 15px;
}
.d11{
height: 100px;
width: 60%;
margin: 0 auto;
text-align: center;
}
.d12{
width: 100%;
height: 50px;
background:-webkit-linear-gradient(right,#ff159a,#dc0000);
border-radius: 50px;
}
.i1{
border:none;
background-color: #696969;
}
.i2{
width: 60%;
background: url(static/img/头像线性.png) no-repeat;
padding-left: 22px;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid #1d1d1d;
outline:none;
}
.i3{
width: 60%;
background: url(static/img/lock.png) no-repeat;
padding-left: 22px;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid #1d1d1d;
outline:none;
}
.i4{
height:20px;
width: 60%;
background: url(static/img/图.png) no-repeat;
padding-left: 22px;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 1px solid #1d1d1d;
outline:none;
}
.p1{
color: #808080;
}
.u1{
text-align: center;
background-color: #000000;
}
.p1{
color: #808080;
}
.btn1{
width: 30%;
height: 36px;
border-radius: 18px;
color: white;
letter-spacing: 7px;
background:-webkit-linear-gradient(right,#ff159a,#dc0000);
}
.btn1:hover{
color: white;
}
a{
cursor: pointer;
text-decoration: none;
}
.denh5{
text-align: center;
font-size: 18px;
}
</style>
<title>会员登录</title>
</head>
<body>
<div id="tempalte">
<div class="d3">
<div class="d1">
<nav class="navbar navbar-default d1">
<div class="container-fluid d1">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header d1">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="static/img/logo.png" style="height: 50px;margin: 0;padding: 0;">
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="main.html">首页</a></li>
<li><a href="gengxin.html">最新剧集</a></li>
<li><a href="comment.html">留言求篇</a></li>
<li><a href="#">最近更新</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">电影分类 <span class="caret"></span></a>
<ul class="dropdown-menu u1">
<li><a href="domestic.html"><p class="p1">国产电影</p></a></li>
<li><a href="#"><p class="p1">港台电影</p></a></li>
<li><a href="#"><p class="p1">欧美电影</p></a></li>
<li><a href="#"><p class="p1">日韩电影</p></a></li>
<li><a href="#"><p class="p1">亚太电影</p></a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control i1" placeholder="输入电影名搜索">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li @click="forword()"><a href="#"><img style="width: 26px;height: 26px;border-radius: 13px;" :src="userimage" ><span> {{username}}</span></a></li>
<li><a href="1.html">登录</a></li>
<li><a href="2.html">注册</a></li>
<li @click="extit()"><a href="#">注销</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row d3">
<div class="d2">
<div class="d4">
<div style="width: 100%;height: 26px;background-color: #dfdfdf;">
<a style="color: #000000;" href="1.html"><div style="width: 15%;height: 26px;background-color: #dfdfdf ;float: left;text-align: center;line-height: 26px;font-size: 15px;letter-spacing: 7px;">登录</div></a>
<a style="color: #000000;" href=""><div style="width: 15%;height: 26px;background-color: #ffffff;float: left;text-align: center;line-height: 26px;font-size: 15px;letter-spacing: 7px;">注册</div></a>
</div>
<div class="d7">
<div style="width: 100%;text-align: center;height: 70px;">
<p>logo</p>
</div>
<h5 :style="colorStyle" class="denh5"> {{tips}}</h5>
<div class="d6">
<input type="text" class="i2" v-model="user.userHao" placeholder="填写账号" @keyup="checkRegistInfo">
</div>
<div class="d6">
<input type="email" class="i2" v-model="user.email" placeholder="填写邮箱" @keyup="checkRegistInfo">
</div>
<div class="d6">
<input type="password" class="i3" v-model="user.userPassword" placeholder="设置密码" @keyup="checkRegistInfo">
</div>
<div style="width: 100%;margin: auto;">
<div class="d6">
<input class="i4" type="text" value="" placeholder="请输入验证码（区分大小写）" id ="text"><br>
<canvas id="canvas" width="100px" height="43px" @click="dj()"></canvas><br>
<button class="btn btn1" @click="sublim()" >提交</button>
</div>
</div>
</div>
<div class="d10">
<p style="padding-top:15px ;">————第三方登录————</p>
</div>
<div style="margin: 0 auto;text-align: center;">
<input type="image" src="static/img/qq登录.png" onclick='location.href=("https://graph.qq.com/oauth2.0/show?which=error&display=pc&error=100010&which=Login&display=pc&response_type=code&client_id=101401191&state=7b8970af1899365733598d5c5dcad811&scope=get_user_info%2Cget_info%2Cadd_t%2Cdel_t%2Cadd_pic_t%2Cget_repost_list%2Cget_other_info%2Cget_fanslist%2Cget_idollist%2Cadd_idol%2Cdel_idol&redirect_uri=https%3A%2F%2Fwww.idybee.com%2Fwp-content%2Fthemes%2Fbee%2Finc%2FSDK%2Fopen-login%2Fqq-callback.php")'>
<input type="image" src="static/img/wb登录.png" onclick='location.href=("https://api.weibo.com/oauth2/authorize?response_type=code&client_id=2236416395&redirect_uri=https%3A%2F%2Fwww.idybee.com%2Fwp-content%2Fthemes%2Fbee%2Finc%2FSDK%2Fopen-login%2Fweibo-callback.php")'>
</div>
</div>
</div>
</div>
</div>
<div class="d5">
<div style="width: 70%;height: 100%;margin: 0 auto;">
<div style="width: 30%;float: left;text-align: center;color: #5b5b5b;">
免责申明：<br>
本网站所有内容都是靠程序在互联网上自动搜集而来，仅供测试和学习交流。若侵犯了您的权益，请发邮件通知站长，收到邮件后24小时内删除。
</div>
<div style="width: 30%;float: right;text-align: center;line-height: 100px;color: #5b5b5b">
联系方式：
邮箱：hehonghui4@gmail.com
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>
<script type="text/javascript" src="static/js/cookie_utils.js"></script>
<script>
var show_num = [];
// draw(show_num);
// function dj(){
// draw(show_num);
// }
function draw(show_num) {
var canvas_width=document.getElementById('canvas').clientWidth;
var canvas_height=document.getElementById('canvas').clientHeight;
var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
var aCode = sCode.split(",");
var aLength = aCode.length;//获取到数组的长度
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt;
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
function randomColor() {//得到随机的颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
var murl=Baseurl+"/user/extit";
var hurl=Baseurl+"/person/yan";
var burl=Baseurl+"/user/servo";
var vm=new Vue({
el:"#tempalte",
data:{
user:{
userHao:"",
email:"",
userPassword:""
},
colorStyle:"color:red",
tips:"",
isRight:false,
username:"",
userimage:"static/img/头像.png"
},
mounted() {
draw(show_num);
if(getCookieValue("username")==null || getCookieValue("username")=="null"){
this.username="";
this.userimage="static/img/头像.png";
}else{
this.username=getCookieValue("username");
this.userimage=getCookieValue("userimage");
}
},
methods:{
dj:function(){
draw(show_num);
},
checkRegistInfo:function(){
//1.校验账号
if(vm.user.userHao == ""){
vm.tips="请输入账号！";
vm.isRight = false;
}else if(vm.user.userHao.length<8 || vm.user.userHao.length>20){
vm.tips="账号长度必须为8-20给字符！";
vm.isRight = false;
}else{
//1.获取邮箱
// var email = $("#email").val();
//2.定义正则 itcast@163.com
var reg_email = /^\w+@\w+\.\w+$/;
//3.判断
var flag = reg_email.test(vm.user.email);
if(flag){
//2.校验密码
if(vm.user.passWord == ""){
vm.tips="请输入密码！";
vm.isRight = false;
}else if(vm.user.userPassword.length<6 || vm.user.userPassword.length>16){
vm.tips="密码长度必须为6-16给字符！";
vm.isRight = false;
}else{
vm.tips = "";
vm.isRight = true;
}
}else{
vm.tips="请正确输入邮箱格式";
vm.isRight=false;
}
}
},
sublim:function(){
var val=document.getElementById("text").value;
var num = show_num.join("");
if(val==''){
alert('请输入验证码！');
}else if(val == num){
// alert('提交成功！');
draw(show_num);
//
axios({
method:"post",
url:burl,
data:vm.user
}).then((res)=>{
var vo = res.data;
if(vo.code==10001){
console.log(vo);
vm.tips = "恭喜你，注册成功！";
vm.colorStyle="color:green";
setTimeout(function(){
window.location.href="1.html";
},500)
}else{
vm.tips = vo.msg;
}
});
}else{
alert('验证码错误！\n你输入的是: '+val+"\n正确的是: "+num+'\n请重新输入！');
document.getElementById("text").value='';
draw(show_num);
}
},
extit:function(){
var token=getCookieValue("token");
var username=getCookieValue("username");
axios({
method:"get",
url:murl,
headers:{
//设置请求头
token:token
}
}).then((res)=>{
var data=res.data;
if(data.code==10001){
// delCookie(token);
// delCookie(username);
clearAllCookie();
alert(data.msg);
vm.userimage="static/img/头像.png";
vm.username="";
}else{
alert(data.msg);
}
});
},
forword:function(){
var token=getCookieValue("token");
axios({
method:"get",
url:hurl,
headers:{
//设置请求头
token:token
}
}).then((res)=>{
var vo=res.data;
if(vo.code==10001){
setTimeout(function(){
window.location.href="personpage.html";
},10)
}else{
alert(vo.msg);
setTimeout(function(){
window.location.href="1.html";
},100)
}
});
}
}
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
