資訊專欄INFORMATION COLUMN
摘要：想必也有很多程序員跟我一樣，一直希望有一個(gè)自己的搜索收藏夾，把自己個(gè)人所有用過(guò)覺(jué)得非常好，又非常牛的，或者一些比較常用的網(wǎng)站都收藏起來(lái)，所以折磨了一個(gè)星期，終于完成了自己個(gè)人的導(dǎo)航收藏頁(yè)面。
想必也有很多程序員跟我一樣，一直希望有一個(gè)自己的搜索收藏夾，把自己個(gè)人所有用過(guò)覺(jué)得非常好，又非常牛的，或者一些比較常用的網(wǎng)站都收藏起來(lái)，所以折磨了一個(gè)星期，終于完成了自己個(gè)人的導(dǎo)航收藏頁(yè)面。
先看看在初始化的效果，以及登陸的效果
未登陸下的效果
登陸下的效果
不知道大家看到效果截圖有木有一點(diǎn)點(diǎn)的心動(dòng)想去看看呢，請(qǐng)戳這里 預(yù)覽 ，順便一提，推薦的 記賬平臺(tái) 跟搜索一樣的賬號(hào)的，這個(gè)也是我最近在寫的一個(gè)東西，不過(guò)還沒(méi)有寫完，如果大家喜歡，也可以進(jìn)去看看效果！我會(huì)繼續(xù)更新該平臺(tái)的。
需求：
能登陸，并可以添加分類 + 每個(gè)分類的導(dǎo)航，
這方面涉及到數(shù)據(jù)庫(kù)以及后臺(tái)，想到本人后臺(tái)的知識(shí)有限，想來(lái)想去，最后決定是用 MySQL + PHPthink5.0 mysql這里相信不管是前端還是后端都接觸過(guò)了，但是 PHPthink 是我首次接觸，本來(lái)覺(jué)得很難，但是通過(guò)官網(wǎng)的學(xué)習(xí)后，其實(shí)也很快就做到了自己需求，我只做Api傳值，所以該文檔我也沒(méi)有仔細(xì)得去了解。
可以為每一個(gè)導(dǎo)航除了添加標(biāo)題以及鏈接外，還需要添加該導(dǎo)航的圖標(biāo)，預(yù)覽時(shí)，請(qǐng)?jiān)谧?cè)登陸后，調(diào)加分類，再添加導(dǎo)航，
Ctrl + h 進(jìn)行快捷鍵幫助，找你需要要快捷鍵。
所操作的界面是這樣子的：
那么問(wèn)題來(lái)了？
圖片傳到哪里呢？傳到數(shù)據(jù)庫(kù)？no,no，這個(gè)最后轉(zhuǎn)化的是
base64
的圖片，很大。所以打算傳到七牛空間了，base64圖片怎么傳到七?？臻g呢，請(qǐng)點(diǎn)擊 這里查看文檔，并配置token，請(qǐng)點(diǎn)擊 這里配置
以下是我實(shí)現(xiàn)的代碼
let dataurl = $imgData.toDataURL("image/png"); //base64
layer.msg("玩命添加中");
let pic = dataurl.replace(/^.*?,/, "");
let url = "http://upload.qiniu.com/putb64/-1"; //非華東空間需要根據(jù)注意事項(xiàng) 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);
邏輯以及打包等一些的實(shí)現(xiàn)，我使用了 webpage 進(jìn)行編譯打包、 vue 進(jìn)行數(shù)據(jù)以及一些邏輯的操作，
最后建js編譯成一個(gè)文件 m.min.js ,這里就不一一貼出實(shí)現(xiàn)的方法了。
目前只是第一版，我正在進(jìn)行逐步慢慢更新，如果大家有什么好的意見，請(qǐng)到這里說(shuō)說(shuō)提題你的意見Go,
這個(gè)是我第一次寫的文章，大家不喜請(qǐng)噴?。。?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83547.html
摘要：注此項(xiàng)目純屬個(gè)人瞎搞，正常下單請(qǐng)選擇餓了么官方客戶端。目前下單功能已經(jīng)實(shí)現(xiàn)，下單功能完全采用官網(wǎng)真實(shí)數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機(jī)號(hào)碼，下單后可以在手機(jī)中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時(shí)間，奈何公司的技術(shù)棧是以react為主，沒(méi)有機(jī)會(huì)好好利用vue2去做一個(gè)完整的項(xiàng)目。雖然寫了幾個(gè)demo，但和寫一個(gè)完整的項(xiàng)目還是有很大差別的。于是自己想著用空余...
摘要：后端主要使用的框架，數(shù)據(jù)庫(kù)采用。后臺(tái)管理登錄采用與后端進(jìn)行登陸狀態(tài)的確認(rèn)。本文首發(fā)于小站，這是一個(gè)積累和分享知識(shí)的個(gè)人博客 這篇文章擱置了很長(zhǎng)時(shí)間，最終決定還是把它寫出來(lái)，給剛開始學(xué)習(xí)vue并且想用vue寫個(gè)人博客的同學(xué)一個(gè)參考。因?yàn)楫?dāng)初我也是參考了其他人分享的知識(shí)，從一個(gè)vue小白變成了一個(gè)入門級(jí)選手，并最終完成了這個(gè)個(gè)人博客的搭建工作，代碼已托管在Github-justJokee。...
摘要：前言這個(gè)項(xiàng)目是利用工作之余寫的一個(gè)模仿微信的單頁(yè)面應(yīng)用，整個(gè)項(xiàng)目包含個(gè)頁(yè)面，涉及實(shí)時(shí)群聊，機(jī)器人聊天，同學(xué)錄，朋友圈等等，后續(xù)頁(yè)面還是開發(fā)中。 前言 這個(gè)項(xiàng)目是利用工作之余寫的一個(gè)模仿微信app的單頁(yè)面應(yīng)用，整個(gè)項(xiàng)目包含27個(gè)頁(yè)面，涉及實(shí)時(shí)群聊，機(jī)器人聊天，同學(xué)錄，朋友圈等等，后續(xù)頁(yè)面還是開發(fā)中。寫這個(gè)項(xiàng)目主要目的是練習(xí)和熟悉vue和vuex的配合使用，利用socket.io實(shí)現(xiàn)實(shí)時(shí)聊...
閱讀 4061·2021-09-22 15:49
閱讀 3407·2021-09-08 09:35
閱讀 1475·2019-08-30 15:55
閱讀 2379·2019-08-30 15:44
閱讀 771·2019-08-29 16:59
閱讀 1677·2019-08-29 16:16
閱讀 559·2019-08-28 18:06
閱讀 997·2019-08-27 10:55
