實戰丨Web雲開發專案 TodoList待辦事項

2022-06-05 07:00:09 字數 2998 閱讀 6030

todolist應用,是面向零基礎同學的快速入門應用。你可以一行**完成todolist的本地化搭建,如果你想要網路同步你的todo資料,在多個裝置之間實時同步共享,雲開發構建僅需100行。

此專案適用於零基礎使用者體驗使用,通過一定的模組手段集約了整體編碼。如果想要深入學習請掌握js、html、css等程式設計技術,自主解析模組中的**(均為入門原生**)

如果你不想執行以下步驟翻看**,可以直接點選下方按鈕一鍵部署

使用瀏覽器開啟此html檔案,瀏覽器顯示如下,即為正常。

如此,你就通過一行**完成了本地化todo應用的構建。通過此應用,你可以回車新增一條待辦,也可以以勾選已完成,修改事項內容,刪除事項;當頁面關閉再次載入時仍然保留待辦事項。

我們只在本地構建了這個應用**,如何將這個應用分享給其他人呢?

我們需要將這個應用**發布到雲開發靜態**託管中

開啟雲開發控制台,新建乙個按量計費環境(如果已有按量計費環境則直接使用,跳過此步)

按量計費環境建立完畢後,一般自動開通靜態**託管服務,如果未開通點選開通即可。

點選上傳檔案,將上一步的index.html選擇上傳

上傳完畢後,點選上圖配置資訊中的【預設網域名稱】,即可在公網環境下訪問todo應用**。

預設網域名稱可供您快速驗證業務,如您需要對外正式提供**服務,請繫結您已備案的自定義網域名稱。

開啟雲開發控制台,找到上一步操作的環境,開啟資料庫,新建todo集合,如下圖所示:

開啟環境-登入授權,開啟郵箱登入,如下圖所示:

開啟後點選右邊【配置發件人】,參考配置qq郵箱進行配置。

隨後,點選右邊【應用配置】,填寫一下應用名稱,如下圖所示

配置完成後,將你的雲環境id複製儲存,填入下步驟**中

開啟之前本地構建的index.html,填充內容如下所示

儲存檔案,重新上傳至靜態**託管中,如此乙個有後台服務的todo應用便構建完成了,仍然開啟配置資訊中的【預設網域名稱】(如果有快取,可以在鏈結後加?123等隨機數),開啟後如下圖所示:

應用中引入的登入模組自動展示登入框,輸入郵件位址和密碼,如果未註冊會直接傳送註冊郵件。

此時,前往郵箱中檢視註冊郵件,如下圖所示:

此時,返回應用**,10s後按鈕變為可點選狀態,直接點選登入,即可登入成功,登入框消失。

之後,通過郵箱位址和密碼即可完成之後登入。

如果你想展示多少人使用todo應用,可以將專案目錄functions裡todo_getnumber資料夾上傳為雲函式

本實戰專案通過模組化方式構建,直接突出雲開發的開發步驟,更加直觀。如果你想探尋todo模組的內容,可以自行解壓縮讀**。

login_util模組,是作者構建的乙個簡易登入外掛程式,可以實現簡單的登入操作,提供自定義方法,預設是雲開發的郵件登入方式,所以在無自定義時請保證郵件登入配置正確並開啟。

todo.js暴露介面:

todo.todo;             //待辦事項內容json,可按照規則直接改變

todo.todoinit(); //重新整理顯示待辦事項

todo.itemchange(id,type,des); //監聽待辦列表變化[id,型別,描述]

login_util簡易登入視窗外掛程式,預設郵件登入,暴漏介面:

lo.custom                         //是否自定義登入方法,預設為false為郵件登入

lo.init() //初始化方法呼叫開啟登入框,預設郵件登入時則會自動判斷,如果登入則觸發lo.done(),不會初始化登入框

lo.done() //當登入完畢時觸發,預設登入時可用,自定義無效

lo.close() //關閉登入框

lo.onclose() //監聽關閉

lo.onlogin(obj) //監聽登入按鈕,需lo.custom=true才可生效

lo.setbtn(text,disable) //設定登入按鈕

lo.setdes(text,style) //設定描述

產品文件:

技術文件:

Web專案開發介紹及實戰專案介紹

引言 web專案開發介紹 專案架構 web專案從大的功能上可以分為前台和後台兩個部分。前台主要是我們在瀏覽器中或者桌面應用 android ios移動應用等直接面向使用者的程式,直接接受使用者的操作和使用,我們稱之為前台,也稱之為客戶端 為前台應用提供資料和功能呼叫的部署執行在伺服器上的程式,用於操...

web開發實戰(api設計)

1 登入 login do login post 需要post方式請求 開放get,方便除錯 request mobile,password response fail success 2 商品介面 2.1商品列表介面 goods to list post 需要post方式請求 開放get,方便除錯...

web專案開發總結

一 專案開發需要注意的幾點 1.系統布局選擇非常重要,選擇合適的ui能夠庫快速的開發 2.系統後台框架,選擇spring springmvc hibernate 3.前端的js框架,jquery jquery ui page 4.新增 修改前端傳送json格式,所有的資料一次性傳送 5.查詢的複雜條...