webpack + vue + PHPthink 的个人搜索页面

Posted 2020-12-20 homehtml

想必也有很多程序员跟我一样，一直希望有一个自己的搜索收藏夹，把自己个人所有用过觉得非常好，又非常牛的，或者一些比较常用的网站都收藏起来，所以折磨了一个星期，终于完成了自己个人的导航收藏页面。

先看看在初始化的效果，以及登陆的效果

未登陆下的效果

登陆下的效果

不知道大家看到效果截图有木有一点点的心动想去看看呢，请戳这里 预览 ，顺便一提，推荐的 记账平台 跟搜索一样的账号的，这个也是我最近在写的一个东西，不过还没有写完，如果大家喜欢，也可以进去看看效果！我会继续更新该平台的。

需求：

• 能登陆，并可以添加分类 + 每个分类的导航，

这方面涉及到数据库以及后台，想到本人后台的知识有限，想来想去，最后决定是用 mysql + phpthink5.0 mysql这里相信不管是前端还是后端都接触过了，但是 PHPthink 是我首次接触，本来觉得很难，但是通过官网的学习后，其实也很快就做到了自己需求，我只做Api传值，所以该文档我也没有仔细得去了解。

• 可以为每一个导航除了添加标题以及链接外，还需要添加该导航的图标，预览时，请在注册登陆后，调加分类，再添加导航，

Ctrl + h 进行快捷键帮助，找你需要要快捷键。
所操作的界面是这样子的：

那么问题来了？

图片传到哪里呢？传到数据库？no,no，这个最后转化的是
base64
的图片，很大。所以打算传到七牛空间了，base64图片怎么传到七牛空间呢，请点击 这里查看文档，并配置token，请点击 这里配置

以下是我实现的代码

 let dataurl = $imgData.toDataURL(‘image/png‘);  //base64
        layer.msg(‘玩命添加中‘);
        let pic = dataurl.replace(/^.*?,/, ‘‘);
        let url = "http://upload.qiniu.com/putb64/-1"; //非华东空间需要根据注意事项 1 修改上传域名
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                /*  let key =$.parseJSON(xhr.responseText); console.log(key);*/
                $.post(
                    CONFIG_D.addList,
                    {
                        img: xhr.responseText,
                        sort: data.field.sort,
                        url: data.field.url,
                        title: data.field.title,
                        common: (data.field.common == ‘on‘) ? ‘1‘ : ‘0‘,
                    },
                    function (o) {
                        if (o.code === 0) {
                            // /!*添加成功*!/
                            vue.getSortListInfo();
                        }
                    }
                );
            }
        }
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/octet-stream");
        xhr.setRequestHeader("Authorization", "UpToken 你的token");
        xhr.send(pic);

• 逻辑以及打包等一些的实现，我使用了 webpage 进行编译打包、 vue 进行数据以及一些逻辑的操作，
  最后建js编译成一个文件 m.min.js ,这里就不一一贴出实现的方法了。

目前只是第一版，我正在进行逐步慢慢更新，如果大家有什么好的意见，请到这里说说提题你的意见Go,

这个是我第一次写的文章，大家不喜请喷！！！