1. 验证账号密码是否输入
HTML
<button type="button" form="loginForm" id="btnlogin" onclick="dosubmit()"/> 登陆
先将登陆按钮的type从submit转为button
form属性绑定表单
因为submit类型会直接提交表单数据，改为button再加上onclick事件可以实现
JS部分
var login=$('#btnlogin');
var username=$("#username");
var psw=$("#psw");
var yanzheng=$("#yanzheng");
var correctYanzheng='heti';
function dosubmit () {
if(username.val()==''){
alert('请输入用户名');
}else if(psw.val()==''){
alert('请输入密码');
}else if(yanzheng.val()==''){
alert('请输入验证码');
}else if(yanzheng.val()!=correctYanzheng){
alert('验证码错误');
}else{
loginForm.submit();
}
}
注意:jquery获取input的值是.val()而不是.value()
后台admin.js
先进行简单验证，账号密码正确了就渲染管理页，不正确会提示错误
router.post('/idVerify',function (req,res,next) {
var username=req.body.username
var password=req.body.password
var yanzheng=req.body.yanzheng
console.log('render(admin)'+username);
if(username=='admin'&&password=='admin'){
console.log('render(admin)'+username);
res.render('admin');
}else{
res.render('login',{mes:'账号或者密码错误'});//传入错误的参数
}
})
前端接受到参数，利用swig模板，将mes打印出来
<div id="log">
{{mes}}
</div>
本地测试没有问题，但是上传到服务器又有问题了
实际上，重启服务器就没什么问题了
2. 首页语言选择下拉菜单，将功能实现了一下
HTML
<select name="lang"class="form-control"id="selLang">
<option value="1">日语</option>
<option value="2">韩语</option>
<option value="3">西班牙语</option>
</select>
有两个div,一开始加班模块是隐藏的，只有查不到结果的时候才会显示
<!--歌曲列表-->
<div class="row" id="musicList">
{% for val in datas %}
<div class='col-md-3'>
<a href='/api/play?hash={{val.Hash}}'>
<img src='{{val.img}}'/>
<p>{{val.songname}} - {{val.author}}</p>
</a>
</div>
{% endfor %}
</div>
<div class="jiaban">
此版块还在加班中。。。
</div>
</div>
CSS
.jiaban{
display: none;
font-size:48px ;
color: #C0C0C0;
margin-top: 230px;
text-align: center;
padding: 20px;
}
JS
$('select#selLang').change(function(){
switch ($(this).val()){
case '1':
console.log('1');
alang('Jap');
break;
case '2':
alang('Korean');
break;
case '3':
console.log('3');
alang('Spanish');
break;
}
})
function alang (lang) {
$.ajax({
type:"get",
url:"/",
data:{lang:lang},
success:function (data) {
if (data=='unfinish') {
$('#musicList').hide();
$('.jiaban').css('display','block');
}else{
$('#musicList').show();
$('.jiaban').css('display','none');
}
}
});
main.js
router.get('/',function (req,res,next) {
var lang=req.query.lang||'Jap';//默认语言为日语
User.find(
{Status:{$lt:2},lang:lang}//<2
).then(function (info) {
if(info.length!=0){
res.render('index',{datas:info});
}else{
res.send('unfinish');
console.log('不存在');
}
});
});
3. 完善了登陆时验证码功能
新增加了checkCode.js文件
主要有两个函数：
1.createCode()，创建验证码
2.validate(),验证验证码
var code ; //在全局定义验证码
//产生验证码
window.onload=function createCode(){
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("code");
var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z');//随机数
for(var i = 0; i < codeLength; i++) {//循环操作
var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
code += random[index];//根据索引取得随机数加到code上
}
checkCode.innerHTML = code;//把code值赋给验证码
}
//校验验证码
function validate(){
var inputCode = document.getElementById("yanzheng").value.toUpperCase(); //取得输入的验证码并转化为大写
if(inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码！"); //则弹出请输入验证码
} else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误！"); //则弹出验证码输入错误
createCode();//刷新验证码
document.getElementById("input").value = "";//清空文本框
} else { //输入正确时
return true;
}
}
将login.html的js部分改成如下
var login=$('#btnlogin');
var username=$("#username");
var psw=$("#psw");
function dosubmit () {
if(username.val()==''){
alert('请输入用户名');
}else if(psw.val()==''){
alert('请输入密码');
}else if(validate()){//验证码在输入无误时会返回true
loginForm.submit();
}
}
