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

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack + vue + PHPthink 的个人搜索页面相关的知识,希望对你有一定的参考价值。

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

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

未登陆下的效果

技术图片

登陆下的效果

技术图片
技术图片

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

需求:

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

这方面涉及到数据库以及后台,想到本人后台的知识有限,想来想去,最后决定是用 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,

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

以上是关于webpack + vue + PHPthink 的个人搜索页面的主要内容,如果未能解决你的问题,请参考以下文章

webpack vue 热部署配置

webpack+vue ssr 怎么打包

webpack+vue项目【第三期】

# Webpack 学习Webpack 搭建 Vue项目

# Webpack 学习Webpack 搭建 Vue项目

vue2+webpack怎样分环境打包