摘要:想必也有很多程序員跟我一樣,一直希望有一個自己的搜索收藏夾,把自己個人所有用過覺得非常好,又非常牛的,或者一些比較常用的網(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
摘要:注此項目純屬個人瞎搞,正常下單請選擇餓了么官方客戶端。目前下單功能已經(jīng)實現(xiàn),下單功能完全采用官網(wǎng)真實數(shù)據(jù),可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機號碼,下單后可以在手機中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時間,奈何公司的技術(shù)棧是以react為主,沒有機會好好利用vue2去做一個完整的項目。雖然寫了幾個demo,但和寫一個完整的項目還是有很大差別的。于是自己想著用空余...
摘要:后端主要使用的框架,數(shù)據(jù)庫采用。后臺管理登錄采用與后端進行登陸狀態(tài)的確認。本文首發(fā)于小站,這是一個積累和分享知識的個人博客 這篇文章擱置了很長時間,最終決定還是把它寫出來,給剛開始學習vue并且想用vue寫個人博客的同學一個參考。因為當初我也是參考了其他人分享的知識,從一個vue小白變成了一個入門級選手,并最終完成了這個個人博客的搭建工作,代碼已托管在Github-justJokee。...
摘要:前言這個項目是利用工作之余寫的一個模仿微信的單頁面應(yīng)用,整個項目包含個頁面,涉及實時群聊,機器人聊天,同學錄,朋友圈等等,后續(xù)頁面還是開發(fā)中。 前言 這個項目是利用工作之余寫的一個模仿微信app的單頁面應(yīng)用,整個項目包含27個頁面,涉及實時群聊,機器人聊天,同學錄,朋友圈等等,后續(xù)頁面還是開發(fā)中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用,利用socket.io實現(xiàn)實時聊...
閱讀 3789·2021-09-22 15:49
閱讀 3321·2021-09-08 09:35
閱讀 1431·2019-08-30 15:55
閱讀 2335·2019-08-30 15:44
閱讀 727·2019-08-29 16:59
閱讀 1612·2019-08-29 16:16
閱讀 493·2019-08-28 18:06
閱讀 905·2019-08-27 10:55