自动获取用户的QQ头像-博客改造计划【1】

简介

最近博客正在开发中，参考其他博客的评论系统，我的博客的评论区还有以下几个痛点：

1. 用户评论以后，下一次评论需要重新输入昵称、邮箱等信息，但是如果需要登录以后才能评论的话，操作繁琐，不利于用户使用，需要将用户的信息保存在用户浏览器中，等下次用户评论的时候自动进行填充。
2. 目前主流的博客评论系统都有通过邮箱自动获取用户头像的功能，为了方便用户使用，需要加上这一功能。

自动填充用户信息

填充用户信息的需求，我第一时间想到了在用户提交评论的时候将信息保存至LocalStorage中，下一次用户访问的时候再将信息读取填充。

保存代码如下：

$.ajax({
                    url: "/api/services/app/CommentService/Create",
                    type: "post",
                    dataType: "json",
                    cache: false,
                    data: menu1,
                    processData: false,// 不处理数据
                    contentType: "application/json", // 不设置内容类型
                    beforeSend: function () {
                        $("#submitCommentBtn").attr("disabled", "disabled");
                    },
                    success: function (data) {
                        localStorage.setItem("Yue-SakuraBlog", JSON.stringify(menu1));
                        if ($("#cancel-reply").attr("replyId") != undefined && $("#cancel-reply").attr("replyId") != "") {
                            refreshReply($("#cancel-reply").attr("replyId"))
                            that.getAllCount();
                        }
                        else {
                            var dataRet = getCount();
                            refresh(dataRet);
                            that.getAllCount();
                        }
                        $("#progressBar").attr("style", "width: 100%");
                    }
                });

以上代码中在用户成功评论后，使用localStorage.setItem将用户信息保存，只要用户不清缓存，该信息会在浏览器中一直存在。

读取代码如下：

            let item = localStorage.getItem("Yue-SakuraBlog")
            if (item != undefined && item != null && item != "") {
                let item2 = JSON.parse(item);
                item2 = JSON.parse(item2);
                
                this.nickName = item2.NickName;
                this.email = item2.Email;

            }

使用localStorage.getItem来读取用户信息，因为读取出来的是字符串，所以还需要用JSON.parse来转换成JSON对象，以上代码调用了两次JSON.parse是因为只调用一次的结果还是字符串，再调一次才能成功转换为JSON对象，目前还不清楚出现这种情况的原理，不过这样确实可行。

自动获取用户头像

通过百度查找，找到了QQ的API

https://q1.qlogo.cn/g?b=qq&nk=QQ号&s=100

这就很简单了，直接调用改API即可，通过参考网上的代码如下：

                let qq_img = "";
                if (this.email.indexOf("@@qq.com") >= 0) {
                    let prefix = this.email.replace(/@@.*/, "");//前缀
                    let pattern = /^d+$/g;  //正则表达式，数字
                    let result = prefix.match(pattern);//match 是匹配的意思
                    if (result !== null) {
                        qq_img = "https://q1.qlogo.cn/g?b=qq&nk=" + prefix + "&s=100";
                    }
                }

把qq_img保存为用户的头像即可。

实现效果

自动填充：

获取用户QQ头像：

respect~????