成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

silvertheo / 809人閱讀

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

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

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

未登陸下的效果

登陸下的效果


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

需求:

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

這方面涉及到數(shù)據(jù)庫以及后臺,想到本人后臺的知識有限,想來想去,最后決定是用 MySQL + PHPthink5.0 mysql這里相信不管是前端還是后端都接觸過了,但是 PHPthink 是我首次接觸,本來覺得很難,但是通過官網(wǎng)的學習后,其實也很快就做到了自己需求,我只做Api傳值,所以該文檔我也沒有仔細得去了解。

可以為每一個導航除了添加標題以及鏈接外,還需要添加該導航的圖標,預覽時,請在注冊登陸后,調(diào)加分類,再添加導航,

Ctrl + h 進行快捷鍵幫助,找你需要要快捷鍵。
所操作的界面是這樣子的:

那么問題來了?

圖片傳到哪里呢?傳到數(shù)據(jù)庫?no,no,這個最后轉(zhuǎn)化的是
base64
的圖片,很大。所以打算傳到七??臻g了,base64圖片怎么傳到七??臻g呢,請點擊 這里查看文檔,并配置token,請點擊 這里配置

以下是我實現(xiàn)的代碼

 let dataurl = $imgData.toDataURL("image/png");  //base64
        layer.msg("玩命添加中");
        let pic = dataurl.replace(/^.*?,/, "");
        let url = "http://upload.qiniu.com/putb64/-1"; //非華東空間需要根據(jù)注意事項 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);

邏輯以及打包等一些的實現(xiàn),我使用了 webpage 進行編譯打包、 vue 進行數(shù)據(jù)以及一些邏輯的操作,
最后建js編譯成一個文件 m.min.js ,這里就不一一貼出實現(xiàn)的方法了。

目前只是第一版,我正在進行逐步慢慢更新,如果大家有什么好的意見,請到這里說說提題你的意見Go,

這個是我第一次寫的文章,大家不喜請噴?。?!

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83547.html

相關(guān)文章

  • vue2 + vuex 高度還原 餓了么 App,與官方后臺真實數(shù)據(jù)交互,獲取商品信息,實現(xiàn)登陸、購

    摘要:注此項目純屬個人瞎搞,正常下單請選擇餓了么官方客戶端。目前下單功能已經(jīng)實現(xiàn),下單功能完全采用官網(wǎng)真實數(shù)據(jù),可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機號碼,下單后可以在手機中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時間,奈何公司的技術(shù)棧是以react為主,沒有機會好好利用vue2去做一個完整的項目。雖然寫了幾個demo,但和寫一個完整的項目還是有很大差別的。于是自己想著用空余...

    JeOam 評論0 收藏0
  • vue搭建個人博客介紹----mapblog小站

    摘要:后端主要使用的框架,數(shù)據(jù)庫采用。后臺管理登錄采用與后端進行登陸狀態(tài)的確認。本文首發(fā)于小站,這是一個積累和分享知識的個人博客 這篇文章擱置了很長時間,最終決定還是把它寫出來,給剛開始學習vue并且想用vue寫個人博客的同學一個參考。因為當初我也是參考了其他人分享的知識,從一個vue小白變成了一個入門級選手,并最終完成了這個個人博客的搭建工作,代碼已托管在Github-justJokee。...

    Ashin 評論0 收藏0
  • Vue2 全家桶仿 微信App 項目,支持多人在線聊天和機器人聊天

    摘要:前言這個項目是利用工作之余寫的一個模仿微信的單頁面應(yīng)用,整個項目包含個頁面,涉及實時群聊,機器人聊天,同學錄,朋友圈等等,后續(xù)頁面還是開發(fā)中。 前言 這個項目是利用工作之余寫的一個模仿微信app的單頁面應(yīng)用,整個項目包含27個頁面,涉及實時群聊,機器人聊天,同學錄,朋友圈等等,后續(xù)頁面還是開發(fā)中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用,利用socket.io實現(xiàn)實時聊...

    iliyaku 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<