webpack + vue + PHPthink 的個人搜索頁面

silvertheo 發布于2019-08-20 17:23 / 798人閱讀

摘要：想必也有很多程序員跟我一樣，一直希望有一個自己的搜索收藏夾，把自己個人所有用過覺得非常好，又非常牛的，或者一些比較常用的網站都收藏起來，所以折磨了一個星期，終于完成了自己個人的導航收藏頁面。

想必也有很多程序員跟我一樣，一直希望有一個自己的搜索收藏夾，把自己個人所有用過覺得非常好，又非常牛的，或者一些比較常用的網站都收藏起來，所以折磨了一個星期，終于完成了自己個人的導航收藏頁面。

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

未登陸下的效果

登陸下的效果

不知道大家看到效果截圖有木有一點點的心動想去看看呢，請戳這里預覽，順便一提，推薦的 記賬平臺 跟搜索一樣的賬號的，這個也是我最近在寫的一個東西，不過還沒有寫完，如果大家喜歡，也可以進去看看效果！我會繼續更新該平臺的。

需求：

能登陸，并可以添加分類 + 每個分類的導航，

這方面涉及到數據庫以及后臺，想到本人后臺的知識有限，想來想去，最后決定是用 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,

這個是我第一次寫的文章，大家不喜請噴！！！

GPU云服務器云服務器阿里云服務器上傳用vue做好的頁面 vue.js多頁面搜索頁面html代碼百度搜索頁面html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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