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

silvertheo 发布于2019-08-20 17:23 / 716人阅读

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

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

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

未登陆下的效果

登陆下的效果

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

需求：

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

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

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

私有云服务器托管阿里云服务器上传用vue做好的页面 vue.js多页面搜索页面html代码百度搜索页面html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83547.html

vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0
用vue搭建的个人博客介绍----mapblog小站

摘要：后端主要使用的框架，数据库采用。后台管理登录采用与后端进行登陆状态的确认。本文首发于小站，这是一个积累和分享知识的个人博客这篇文章搁置了很长时间，最终决定还是把它写出来，给刚开始学习vue并且想用vue写个人博客的同学一个参考。因为当初我也是参考了其他人分享的知识，从一个vue小白变成了一个入门级选手，并最终完成了这个个人博客的搭建工作，代码已托管在Github-justJokee。...

Ashin 2019-06-26 17:40 评论0 收藏0
Vue2 全家桶仿微信App 项目，支持多人在线聊天和机器人聊天

摘要：前言这个项目是利用工作之余写的一个模仿微信的单页面应用，整个项目包含个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。前言这个项目是利用工作之余写的一个模仿微信app的单页面应用，整个项目包含27个页面，涉及实时群聊，机器人聊天，同学录，朋友圈等等，后续页面还是开发中。写这个项目主要目的是练习和熟悉vue和vuex的配合使用，利用socket.io实现实时聊...

iliyaku 2019-08-20 17:21 评论0 收藏0