小说项目Tips2（项目小结）

文章目录

登录注册部分

用户密码表单验证

1.绑定了oninput事件，在用户输入的过程中，就实时清除空格，中文。

  //去除登录邮箱中的所有空格
    this.emailInput_login_user.value = this.emailInput_login_user.value.replace(/\s+/g, "")
    // 清除中文字符
    this.emailInput_login_user.value = this.emailInput_login_user.value.replace(/[\u4e00-\u9fa5]/ig, "");

2.绑定了onblur事件，表单不聚焦的时候检查用户名和密码的格式是否符合要求

密码框的眼睛

点击眼睛改变input框的属性，password或text。并根据属性改变眼睛的开闭。

用户阅读协议

标题跳转，使用的a标签，href改成对应的id
平滑滚定，是内容跳转不显得太突兀
向上返回按钮，加了个JS，当页面向上滚动超过20px，按钮显示。

window.onscroll = function () {
    scrollFunction()
};//平滑滚动效果
var btn_backTop = document.querySelector('#btn_backTop')

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        btn_backTop.style.display = "block";
    } else {
        btn_backTop.style.display = "none";
    }
}//向上滑动超过20px时，按钮显示。

登陆之后不能返回

在不能返回的页面加上

   (function () {
    
    
        if (window.history && window.history.pushState) {
    
    
            window.onpopstate = function () {
    
    
                window.history.pushState('forward', null, '');
                window.history.forward(1);
            };
        }
        window.history.pushState('forward', null, '');//在IE中必须得有这两行
        window.history.forward(1);
    })();

找回密码

表单的验证，用户名同上。年龄的要求，不大于999的正整数。不合格的输入不进去。（绑定oninput事件，去除数字以外的所有字符，截取表单value的前三位）
性别用check属性的input来判断选择的男女

小说详情页部分

调用接口显示内容
小说显示功能
送花

修改用户信息部分

接收用户名，根据用户名调用查询用户信息的接口，判断是否为作者，如果是作者，显示昵称和个性签名以及创建与管理作品。如果不是作者，不显示昵称和个性签名，创建与管理作品改为作者中心。

显示的时候，如果数据为null，显示未设置。

修改信息正常的表单限制，验证和调用接口。

创建作品和成为作者

表单限制，弹窗显示。

创建作品中包含一个选项卡，选择不同的标签。勾选协议，加了模态框。

编辑作品信息

使用了WangEditor富文本编辑器。引入了index.js和style.css文件。

书架展示部分

使用grid 布局，实现了展示和搜索功能。后端给的接口有问题，搜索的时候搜索的是全局书架。删除和批量操作没有实现。

VIP和浏览记录部分

静态页面，浏览记录只有加入，删除，没有全部展示的接口。VIP的接口沙箱支付没有用成功，跟后端交流的时候，不知道他写的接口返回的数据是啥，以及怎么用。