程管理模塊包含五個頁面，分別是登錄頁面、課程列表頁面、課程注冊頁面、課程信息修改頁面和課程詳情頁面。這些頁面使用了HTML、CSS和JavaScript技術，每個頁面的布局和樣式都是自定義的。

登錄頁面包含一個表單，用戶可以輸入用戶名和密碼進行登錄。課程列表頁面展示了所有課程的列表，包括課程名稱、教師、人數等信息。課程注冊頁面可以讓用戶添加新的課程信息，包括課程名稱、簡介、教師、人數等。課程信息修改頁面可以讓用戶修改已有的課程信息，而課程詳情頁面則展示了課程的詳細信息，包括課程名稱、簡介、教師、人數、評論等信息。

每個頁面都包含最少5條演示數據，以展示頁面的基本功能和樣式。這些數據可以是真實的課程信息，也可以是模擬的數據。

求說明

幾年前，手上有一些關鍵數據躺在數據庫里面，希望做個簡單的增刪改查系統。

考慮到需求很簡單，就找到手下的一名程序員開發幾個頁面。結果，一言難盡……

再簡單的需求，也需要溝通需求，再完成功能設計、交互設計、代碼開發、部署使用等環節。一個環節出問題，結果就難達預期。

需求總結下來：

1、具備增、刪、改、查、導入導出等功能，方便管理數據。

2、數據量很小（不超過1萬條），不需要考慮并發、性能等問題。

3、需求多但容易變化，期望開發效率要高，最好一個小時內就能搭建好用起來。

4、界面美觀度無要求，能夠給別人看和用就行。

簡而言之，我需要的是一個能快速定制開發「增刪改查式數據管理系統」的工具。

如果有這樣的工具，我自己就可以搞定，省去需求溝通、過程管理、開發修改等等一系列過程。

一個程序員去找一個合適的admin管理系統，搭建環境，按需改改，也能完成這個工作，但耗時起碼1~2天。后面的維護工作量也不小。遇到問題，需要重新熟悉代碼，修改調整再發布。

現在流行的一些低代碼工具，就能比較好地解決這些麻煩。

功能嘗試

各種低代碼工具，反復強調功能豐富度、操作易用性、效率高價值等賣點。

大家對功能、場景、效果的描述都比較專業，很多時候看不懂。

很多低代碼工具只有實際使用之后，才能理解他們描述的詞匯，并判斷是否適合自己的需求。

為了滿足我的增刪改查需要，我使用了這款工具。

除去之前的環境搭建的過程，開發一個功能的流程是5 步：

1、數據庫建表

2、創建后端服務

3、創建前端頁面

4、調試測試

5、發布到本地的服務器。

為了管理自己每天閱讀的微信訂閱號文章，我做了實際使用。

第1步，建立數據庫表。這步操作和數據庫管理工具建表是類似的，定好字段名、類型、描述等信息就可以完成創建。

第2、3步，創建后臺服務和前臺頁面。有增刪改查的功能模板，創建后，也可以修改。

需要熟悉一下工具，了解界面功能的具體含義。

如果有簡單的業務系統開發經驗，知道前后端分離，能夠修改SQL語句、JS、HTML、CSS等，這些界面操作就還是非常容易理解的，。

第4步，調試測試。

后臺服務，有接口測試工具，簡化的postman。

前臺頁面，有預覽功能，Chrome開發者界面。

第5步，發布。一切弄妥之后，發布軟件提供的本地服務器。

用瀏覽器訪問本地服務地址，就可以使用剛剛創建的功能了。

過程中可能遇到一些細節問題，有一定編程經驗的話盲猜可以解決。

挺好用的。

效率評估

經過幾次實踐后，最近完成一個“訂閱號管理”功能并發布，僅耗時34分鐘。

具備功能：

查：支持查詢訂閱號名稱等信息、支持分頁查詢展示。

增：支持添加“訂閱號”信息。

改：支持修改“訂閱號”信息。

刪：支持刪除“訂閱號”信息。

導：支持用Excel表格批量導入“訂閱號”信息。

效率評估：

在這34分鐘內，就完成了數據庫建表、后臺服務接口創建、前臺頁面創建、測試、發布等工作。

要知道，熟悉前、后端業務系統開發的程序員，完成這樣的功能也需要至少0.5~1天。

如果不熟悉業務系統開發，工作量至少還要增加到1~2天。

附錄

文中使用的是Taskbuilder這款低代碼工具。

具體功能說明、操作方法，可以自行搜索。官網文檔比較詳細，對著操作就可以搞定。

有網友把他推薦給我后，我試用了幾次，覺得真香。能夠比較好地解決我的需求。

撰寫本文，以表感謝！

let username = 'Javan';
document.cookie = "name=" + username;

var cookieAll = document.cookie;
console.log(cookieAll);
// 輸出后加工處理得到name值

function setCookie(name, value, days) {
 var exp = new Date();
 exp.setTime(exp.getTime() + days*24*60*60*1000);
 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg)) {
 return unescape(arr[2]);
 } else {
 return null;
 }
}

// 設置key為user, 值為Javanx
setCookie('user', 'Javanx', 1);
console.log(getCookie('user'));
// print Javanx

function delCookie(name) {
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval=getCookie(name);
 if (cval!=null) {
 document.cookie= name + "=" + cval + ";expires=" + exp.toGMTString();
 }
}