今天給各位分享layui前端頁面模板的知識，其中也會對layui 前端分頁進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、一個小程序的后臺是web端
• 2、layui穿梭框雙擊怎么左右移動
• 3、layUI分頁處理--樂字節(jié)前端

一個小程序的后臺是web端

小程序

第一個web項目-微信小程序后端開發(fā)

?

第一個web項目-微信小程序后端開發(fā)

前言

需求分析

團隊分工

總體設計

開發(fā)工具及編碼實現(xiàn)

小程序前端

后端

數(shù)據(jù)庫

接口代碼

管理系統(tǒng)前端1.0

管理系統(tǒng)前端2.0

測試

后端本地測試

前后端聯(lián)合測試

部署

總結

第一個web項目-微信小程序后端開發(fā)

前言

去年暑假一個偶然的機會我和幾位同學加入了學院一位老師主持的教改項目，需求是開發(fā)一個基于SPOC與翻轉課堂的計算機組成原理課程的學習app（類似慕課、知到），后來經過討論決定降低難度，先做一個微信小程序，附帶一個后臺管理系統(tǒng)，于是我的第一個web項目就開始了~

需求分析

這里簡單介紹下SPOC和翻轉課堂的意思

翻轉課堂

“翻轉課堂”（Flipping Classroom）是一種顛覆傳統(tǒng)教學由“課堂授課聽講 + 課后作業(yè)練習”轉變?yōu)椤罢n前自主學習 + 課堂協(xié)作探究”的新型教學模式。

SPOC

SPOC（Small Private Online Course）一般被譯為小規(guī)模限制性在線課程或者小規(guī)模私有型網絡課程，音譯為“私播課”。

這次項目的需求是開發(fā)一個學習類型的小程序，用戶分為學生和教師，其中學生可以觀看視頻、課件、動畫，完成作業(yè)、考試以及發(fā)布評論、點贊、回復，而教師可以上傳教學視頻、課件、動畫和發(fā)布作業(yè)、考試、通知，以及查遲頌看學生的學習情況，也可以查看評論回復，及時解答學生的疑惑。

團隊分工

團隊一共有四個人，總體工作分為產品設計、前端開發(fā)、后端開發(fā)三部分，然后每部分由兩人負責。其中我是負責后端開發(fā)的，同時兼任項目負責人（其實也沒有聽上去那么高大上，只是需要承擔更多決策、協(xié)調、溝通的角色）。

總體設計

這里分為小程序和管理系統(tǒng)

首先是小程序，放幾張使用墨刀制作的原型圖，這里多說兩句，市面上的小程序基本都是微信授權直接登錄，最多綁定手機號，我們這個由于要統(tǒng)計學生的學習情況才設置了注冊和登錄功能

至于管理系統(tǒng)，由于是10月份才開始做的，而且是我和另一位做后端的同學負責的，時間比較緊，我們作為前端小白沒有十分系統(tǒng)的方法去做開發(fā)，只是大概確定了需要做哪些模塊，每個模塊對哪些表的增刪改查，這里原型碼緩鄭圖就不放了（較簡陋）

開發(fā)工具及編碼實現(xiàn)

小程序前端

據(jù)我了解，做前端的同學先去微信公眾平臺注冊賬號，然后做一些開發(fā)設置，具體步驟自行百度。前端用的是微信開發(fā)者工具，有不會的基本上在微信開放文檔都可以找到，包括許多實用的API。

后端

這里分為數(shù)據(jù)庫、接口代碼兩部分

數(shù)據(jù)庫

用哪饑的是mysql數(shù)據(jù)庫，之前是跟著學堂在線的一個小程序入門教程做的，它推薦的本地開發(fā)環(huán)境是phpstudy，里面集成了php、mysql、apache、FTP、Nginx以及數(shù)據(jù)庫管理工具phpMyAdmin，關于phpMyAdmin使用請看

原本的數(shù)據(jù)庫設計得不好，存在較多冗余數(shù)據(jù)，后來學習了數(shù)據(jù)庫系統(tǒng)這門課，我進行了大改，先確定有哪些實體以及實體之間的聯(lián)系，然后畫er圖，最后再建模，通過外碼約束大量減少了冗余，也減少了表的數(shù)量。

接口代碼

教程使用的是php語言，框架是thinkphp5，開發(fā)手冊看，我當時是去b站找視頻學了下php基礎語法，然后就去學原生php以及框架如何操作數(shù)據(jù)庫。然后根據(jù)業(yè)務邏輯開始編碼，其實每個接口（或者叫類里面的一個函數(shù)）結構都差不多，主要是三部分：接收前端傳來的數(shù)據(jù)、增/刪/改/查、返回結果給前端。

順便說下代碼編輯用的是sublime text3，教程看，這個不是ide，沒有那么多的功能比如調試、運行，單純是只有編輯、加注釋、格式化等等，這里吐槽下自帶的格式化代碼功能（先選擇代碼，再Edit - Line - Reindent），有點辣雞。而且如果有語法錯誤不會像eclipse那樣自動檢測出來，之前被坑了幾次，肉眼找不到的話只能用postman去測試了。

管理系統(tǒng)前端1.0

一開始我們是不知道還要做個管理系統(tǒng)的，以為所有功能都放在小程序，后來老師跟我們討論聊到這個問題，我們才知道原來還有這回事，其實就是管理系統(tǒng)應該具有一切功能，即對數(shù)據(jù)庫所有表的增刪改查，而小程序只需要有些輕量的功能即可，至于上傳大容量文件、查看學習情況這些不夠輕量的功能全部放在管理系統(tǒng)。好吧，凡事總有第一次，我們就開始學習基本的前端三件套html,css,javascript。

開始做的時候我們希望先實現(xiàn)功能，界面難看點沒有太多關系，于是學了部分三件套的基礎后又學了ajax技術（因為要與后端通信），這里最開始用的是創(chuàng)建XMLHttpRequest 對象，用open()方法設置請求類型和url，用send()方法發(fā)送數(shù)據(jù)到后端，直到遇到了jquery，后面的請求統(tǒng)一都用$.ajax()了。

接下來又遇到了一個難點，因為基本都用表格來展示數(shù)據(jù)，那獲取數(shù)據(jù)后如何動態(tài)地加入表格呢？查找資料后用每一條數(shù)據(jù)拼接成由tr標簽包含的字符串，然后用jquery獲取表格標簽后調用append()方法加入表格中。

除此之外，我們想在每行末尾設置按鈕進行事件處理，于是我們append數(shù)據(jù)的同時也把button標簽放入剛才的字符串中，然后給每個button設置id屬性，比如用于修改數(shù)據(jù)的就叫fixi，最后這個i是代表表格第幾行，然后添加事件監(jiān)聽，點擊button時獲取id，然后查看最后一位是多少從而確定是第幾行。

這些做法實現(xiàn)起來是挺繁瑣的，而且感覺在重復造輪子，我們也做得有點郁悶，因為每個頁面基本都要這樣做，但是當時沒有那么多的時間精力去學習框架，只是想先實現(xiàn)功能（u1s1，上學期的課多到我快吐了）。

放兩張界面圖

管理系統(tǒng)前端2.0

之前放假，總算有較多空余時間了，我們決定要改下界面，但畢竟自身水平不高，因此需要用一點第三方的東西了。

在跟小程序前端測試了部分功能后，有一天后端同學找到了一個開源的框架然后我們一起看了下說明文檔，最后決定：就用它了。

有請layui登場，經典模塊化前端框架、低門檻開箱即用。

真正使用之前可以先看看文檔，個人感覺上手還是挺快的。layui提供了許多實用的組件包括彈出層、表格、表單、文件上傳、流加載等等。

就拿表格來說，之前我們用append動態(tài)添加數(shù)據(jù)，現(xiàn)在直接table.render()，設置好參數(shù)就行了；之前我們給button設置id進行事件處理，現(xiàn)在綁定工具條，直接table.on()就行了；而且之前我們沒實現(xiàn)的分頁，現(xiàn)在設置分頁參數(shù)就行了，然后查詢數(shù)據(jù)庫時分頁讀取。

另外，layui提供了一個頁面布局的模板，包括logo、用戶名、退出按鈕、導航欄以及一些css動畫。我們要做的就是按照它的模板來，頁面元素的樣式也參考它提供的。

有了layui的助攻，我們可以將更多注意力放在業(yè)務邏輯上，更多關注用戶體驗。

測試

后端本地測試

工具：postman

使用：打開一個新窗口，選擇請求類型，輸入url，設置參數(shù)，點擊send

這種測試我認為是模擬前端發(fā)送數(shù)據(jù)然后運行后端代碼，看結果是否正確，屬于白盒測試，但是我們不是專業(yè)測試人員，目前這樣測試不是做得很規(guī)范，只能盡可能想到不同的測試用例。

前后端聯(lián)合測試

由于放假回家了沒辦法面對面，只能借助騰訊會議線上測了。

在部署工作完成之后，一般是我們寫好接口代碼，然后把url和需要的參數(shù)告訴前端同學（這里注意下，微信小程序的請求api只允許https開頭的url，而且前端必須在微信公眾平臺配置好合法域名，不然會報錯），前端把這些東西填入那個wx.request的api然后運行，他們會查看返回的數(shù)據(jù)是否正確，我們會查看數(shù)據(jù)庫的情況，如果沒問題會測試多幾個數(shù)據(jù)，都可以的話就到下一個功能，這種方式應該是屬于軟工講到的V模型的單元測試。

部署

用的是新浪云，實名認證、學生認證后會送一些云豆（新浪云的計費單位，1RMB=100云豆）

跟著之前說的教程把整個thinkphp項目部署到新浪云，具體步驟看

代碼

在代碼管理那里可上傳壓縮包，或者在線編輯（跟記事本差不多），改動大的最好在本地寫好再貼上去

數(shù)據(jù)庫

開啟共享型mysql服務，目前用了phpmyadmin4.9版本，然后建表或導入sql文件

緩存

開啟memcached服務，設置容量16MB（省點錢），其實這個服務我不是很清楚干什么的，但如果不打開訪問接口時會報致命錯誤？

文件存儲

我們需要保存許多類型的文件包括視頻、課件、動畫、作業(yè)、考試、頭像，因此需要存放在服務端。這里開啟storage服務，使用方法看，普通用戶配額5個bucket，每個容量10G，然后直接當作本地磁盤那樣用就行了，控制臺或寫代碼都可上傳文件，上傳后獲得url，然后就可以通過網絡訪問，關于新浪云環(huán)境下php如何操作看官方文檔。

域名

應用信息可查看二級域名，獨立域名需要購買且備案

日志

日志中心可查看每次請求的接口、時間、請求方設備等信息

其它

控制臺還可以實時查看流量統(tǒng)計、資源使用情況，以及消費情況

總結

這個項目我也算前后端都做了一遍，感覺前端不太適合自己，可能是對頁面元素樣式、用戶體驗不夠敏感，不過必須承認前端是挺有意思的。至于后端是更加注重邏輯，目前我對后端的了解只停留在數(shù)據(jù)庫、網絡、部署層面，其實如果用戶數(shù)量非常多還要考慮高并發(fā)的問題，也就要使用多線程、負載均衡、消息隊列等技術了，所以還有很多技術需要學習

layui穿梭框雙擊怎么左右移動

使用左右穿梭框的時候，layui引用layui.all.js，這樣不用再加thirdlib/transfer.js，可以直接調用modules下的

打開CSDN，閱讀體驗更佳

layui從入門到使用layui復選框checkbox_Spring tt的博客_lay...

在這說的是layui的form表單里面的復選框 怎么使用?首先在layui打開文檔,找到頁面元素, 在這里插入圖片描述 就可以看到,在使用form表單之前需要在容器中添加class=“l(fā)ayui-form”在你的HTM的盒子class里面添加上layui-form,如果其他內容...

layui復選框_淡淡人生過的博客

layui復選框的樣式,都是在選然后才會有的,所以直接通過css設置就實現(xiàn)不了了。只可以通過js動態(tài)設置 html代碼使用了jfinal的模板 *#(i18n.get('所屬校區(qū)')) #for(campus : campusList) ...

基于layui實現(xiàn)樹形穿梭框

基于layui封裝的多選樹形穿梭框，雙列表互選框

最新發(fā)布 layui 穿梭框 左右邊的框 實現(xiàn)單選

form.on('checkbox(layTransferCheckbox)', function (data) { if (data.othis.parent().parent().parent().attr('data-index') == 1 data.elem.checked) { var leftLength = $(data.othis.parent().parent().parent()).fin..

繼續(xù)訪問

【Layui】layui的下拉多選框實現(xiàn)_廈門攔亮德仔的博客_layui下拉...

此次使用的xm-select插件,一款始于layui,下拉選擇框的多選解決方案插件 快速上手使用: 1.首先下載xm-select.js文件,然后放到項目里 下載地址: 2.寫一個 展示位置...

layui 左右數(shù)據(jù)表格展吵衡薯示 數(shù)據(jù)級聯(lián) 雙tab_Aimyone的博客_lay...

下拉框左邊文本樣式*/.tophead.layui-form-label{padding:0;line-height:25px;width:auto;}/*頂部form塊樣式*/.tophead.layui-input-block{margin-left:34px;min-height:26px;}/*頂升者部輸入框,下拉框設置高度*/.tophead.layui-...

【Layui】------ Layui Table 點擊行選中示例代碼

layui table 點擊行選中實例 //單擊行勾選checkbox事件 $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tab...

繼續(xù)訪問

layui當點擊文本框時彈出選擇框,顯示選擇內容的例子（2種辦法）

第一種 實現(xiàn)如圖所示的功能 點擊名稱，彈出信息彈框，選擇表格中的某一行 1、html頁面代碼 !--計量器具彈出層-- div id="equipment" lay-filter="equipment" style="display: none" table id="equipment_result" lay-filter="equipment_result"/table /div

繼續(xù)訪問

layui表格集成select選擇框和switch開關_云深i不知處的博客_l...

在前文layui表格使用自定義模板templet中,我們已經初步感受了layui表格使用自定義模板的基礎操作。現(xiàn)在,在自定義模塊應用的基礎上,我們進一步豐富layui表格對其他組件的集成。 覺得本文有所幫助的朋友們,請不吝點出你的贊。

layui 穿梭框展示數(shù)據(jù)操作

上代碼 HTML代碼 id 為test7 的 div class="layui-btn-container" button type="button" class="layui-btn" lay-demotransferactive="getData"獲取右側數(shù)據(jù)/button button type="button" class="layui-btn" lay-de

繼續(xù)訪問

layui 穿梭框 layui.transfer

本文是自己對layui.transfer 穿梭框的基本使用總結，未涉及到的內容可以在layui.transfer官方文檔中查找。下圖為穿梭框的基本樣式，效果還是不錯的，能夠滿足系統(tǒng)中多種場景下的需求，它可以進行數(shù)據(jù)的交互篩選。 1、基礎效果實現(xiàn) !DOCTYPE html html head meta charset="utf-8" title穿梭框組件/title link rel

繼續(xù)訪問

layui穿梭框右側增加上移下移功能

新建一個HTML就能看到效果，記得改掉JS和layUI文件引用地址 效果圖： !DOCTYPE html html lang="en" head meta charset="UTF-8" titleTitle/title link rel="stylesh...

繼續(xù)訪問

layui tansfer(穿梭框組件)

穿梭框自我了解全部 實現(xiàn)代碼如下layui.use('transfer',funcation(){ var transfer=layui.transfer; transfer.render({ elem:'test1', data:[ {"value":"1","title":"李白","checked":"checked","disabled":"disabled"}, {"...

繼續(xù)訪問

layui 穿梭框的實現(xiàn)

layui.use(['form', 'layer', 'jquery', 'laydate', 'transfer'], function () { var $ = layui.jquery, transfer = layui.transfer; transfer.render({ elem: '#transfer', data: [], value: [], ...

繼續(xù)訪問

layui當點擊文本框時彈出選擇框,顯示選擇內容的例子

今天小編就為大家分享一篇layui當點擊文本框時彈出選擇框,顯示選擇內容的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

layui多選

效果如下，選擇某個選項后，會彈出對應輸入框填寫數(shù)據(jù) 前端頁面代碼 style legend { font-size: 12px; font-weight: inherit; color: #03A9F4; } /style div class="layui-form-item"...

繼續(xù)訪問

熱門推薦 layui左右布局

左右布局 點擊左邊右邊內容切換 html div class="layui-side layui-bg-black" div class="layui-side-scroll" ul class="layui-nav layui-nav-tree site-demo-nav" lay-filter="leftNav" ...

繼續(xù)訪問

Layui Table 點擊行時選中單選框或復選框

轉載自: Layui Table點擊行時選中單選框 //注：test是table原始容器的屬性 lay-filter="對應的值" layui.table.on('row(i_Layer_SearchResult_Table_Filter)', function (obj) { //選中行樣式 obj.tr.addClass('layui-table-click').siblings().remov

繼續(xù)訪問

layui聯(lián)動選擇框

表單 代碼 form class="layui-form" style="padding-top: 20px;" action="stockSave" method="post" div class="layui-form-item" div class="layui-inline" label class...

繼續(xù)訪問

php左側導航右側tab標簽,使用layui框架實現(xiàn)點擊左側導航切換右側內容且右側選項卡跟隨變化的效果...

用了layui框架1.home.html主界面：首頁后臺管理角色管理賬號管理? layui.com - 底部固定區(qū)域layui.use('element', function(){var $ = layui.jquery,element = layui.element; //Tab的切換功能，切換事件監(jiān)聽等，需要依賴element模塊//觸發(fā)事件var active = {tabAdd: func...

繼續(xù)訪問

layui的穿梭框

首先引入CSS樣式和Jquery Layui插件 Html部分只有一個fieldast標簽和一個設置了ID的div標簽 Jq部分直接開啟layui中的渲染 然后設置屬性值,最主要的是elem屬性,輸入ID值對當前ID的div進行渲染,最后設置data和htight(列表高度)屬性 這是穿梭框中可以手動添加的一些屬性 效果: ...

繼續(xù)訪問

Layui 入門 穿梭框

穿梭框: elem 指向容器選擇器 String/Object - title 穿梭框上方標題 Array [‘標題一’, ‘標題二’] data 數(shù)據(jù)源 Array [{}, {}, …] value 初始選中的數(shù)據(jù)（右側列表） Array - id 設定實例唯一索引，用于基礎方法傳參使用。 String - showSearch 是否開啟搜索 Bo...

繼續(xù)訪問

layui_穿梭框組件（transfer）

穿梭框組件（transfer）組件介紹組件舉例基礎效果代碼效果定義標題及數(shù)據(jù)源代碼效果初始右側數(shù)據(jù)集合代碼效果顯示搜索框代碼效果穿梭時的回調代碼效果注意事項 組件介紹 這篇博客素材的由來是我在玩一個小游戲的時候，它的原理很像穿梭框，而且我覺得在開發(fā)中，穿梭框還挺有用的，于是我就去找了layui官網的文檔來學習，并且將它分享出來 模塊加載名稱：transfer 基礎的參數(shù)： 基礎方法： 方法 含義 transfer.set(options); 設定全局默認參數(shù)。options 即各項基礎參數(shù)

layUI分頁處理--樂字節(jié)前端

font color="red"模塊加載名稱： laypage /font

laypage 的使用非常簡單，指向一個用于存放分頁的容器，通過服務端得到一些初始值，即可衫橘完成分頁渲染。

通過核心方法： laypage.render(options) 來設置基礎參數(shù)。

當分頁被切換時觸發(fā)，函數(shù)返回兩個參數(shù)： obj （當前分頁的所有選項值）、first（是否首次，一般用于初始加載的判斷）

或戚團font color="red"模塊加載名稱： table /font

創(chuàng)建一個table實例最簡單的方式是，在頁面放置一個元素 table id="demo"/table ，然后通過 table.render() 方法指定該容器。

數(shù)據(jù)接口 user.json

在一段 table 容器中配置好相應的參數(shù)，由 table 模塊內部自動對其完成渲染，而無需你寫初始的渲染方法。

1) 帶有 class="layui-table" 的 table 標簽。

2) 對標簽設置屬性 lay-data="" 用于配置一些基礎參數(shù)

3) 在 th 標簽中設置屬性 lay-data="" 用于配置表頭信息

頁面已經存在了一段有內容的表格，由原始的table標簽組成，只需要賦予它一些動態(tài)元素。仔頌

執(zhí)行用于轉換表格的JS方法

layui前端頁面模板的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于layui 前端分頁、layui前端頁面模板的信息別忘了在本站進行查找喔。