layui菜鳥教程？
如上圖所示，要扣除里面的表格數(shù)據(jù)，該怎么弄呢？思路是先把整個表格摳出來，然后按照tr進行分割，存到數(shù)組，然后一個個遍歷進行正則匹配，最后輸出結果轉化為json格式，供前臺調用！
如何實現(xiàn)layui的動畫點擊效果
實現(xiàn)一個可交互的動畫大概有這么幾種思路:
在響應GestureRecognizer的方法中實時更新view的狀態(tài),在GestureRecognizer結束的時候創(chuàng)建動畫完成后續(xù)的部分.
在GestureRecognizer開始的時候創(chuàng)建顯式動畫,隨著Gesture變化,改變動畫的progress,在GestureRecognizer結束之后完成動畫.
在GestureRecognizer開始的時候創(chuàng)建隱式動畫,隨著Gesture變化,改變動畫的progress,在GestureRecognizer結束之后完成動畫.
注意2和3只有顯式和隱式的區(qū)別.
對于簡單的view,單一的動畫(比如demo中的這種,線性移動一個簡單的view),三種方法差別不大.而對于復雜的view(view中嵌套多個subView),多個動畫(view和subview都有各自的動畫),如果在不考慮可交互的前提下,隱式的動畫已經(jīng)可以滿足需求,那么方法3可能會比方法1和2簡潔得多,本文將對方法3進行講解.
要實現(xiàn)方法3,首先要了解CALayer的幾個屬性:speed,timeOffset,beginTime.對于這幾個屬性,ControllingAnimationTiming這篇教程圖文并茂地給出了直觀的解釋,必讀,這里只做簡單介紹:
speed:控制動畫的速度,比如設置為1(默認),動畫正常運行,設置為0動畫暫停,設置為-1動畫反向運行.
timeOffset:控制動畫在整個動畫時間軸上的位置,比如一個3秒的動畫,timeOffset為1.5,layer就會處于整個動畫過程中間的那個狀態(tài).
beginTime:動畫的開始時間.
有了這些基礎,我們就可以著手實現(xiàn)了,首先我們需要建立一個CALayer的Category,添加一些動畫輔助代碼:
-(void)gs_pauseAnimation{
self.speed=0;
self.timeOffset=0;
}
-(void)gs_recoverToDefaultState{
self.speed=1;
self.timeOffset=0;
self.beginTime=0;
}
-(void)gs_setTimeProgress:(CFTimeInterval)timeProgress{
self.timeOffset=timeProgress;
}
-(void)gs_continueAnimationWithTimeProgress:(CFTimeInterval)timeProgress{
[selfgs_recoverToDefaultState];
self.beginTime=[selfconvertTime:CACurrentMediaTime()fromLayer:nil]-timeProgress;
}
-(void)gs_continueReverseAnimationWithTimeProgress:(CFTimeInterval)timeProgressanimationDuration:(CFTimeInterval)duration{
[selfgs_recoverToDefaultState];
self.beginTime=[selfconvertTime:CACurrentMediaTime()fromLayer:nil]-(duration-timeProgress);
self.timeOffset=duration;
self.speed=-1;
}
gs_pauseAnimation:通過將speed設置為0,來暫停動畫.
gs_recoverToDefaultState:將layer的各個屬性恢復到默認狀態(tài)
gs_setTimeProgress:在gs_pauseAnimation的基礎上,設置動畫的時間進度.
gs_continueAnimationWithTimeProgress:從timeProgress時間進度開始,繼續(xù)播放之前暫停了的動畫
這里首先調用了gs_recoverToDefaultState,是為了讓convertTime:fromLayer:得出正確的時間.
[selfconvertTime:CACurrentMediaTime()fromLayer:nil]將當前系統(tǒng)時間轉換到layer的時間上,減去timeProgress,假設這是一個3秒的動畫,timeProgress為1秒,則這條代碼就表示layer的動畫在一秒之前就已經(jīng)開始,所以動畫將從運行到第1秒的狀態(tài)開始繼續(xù)播放.
layui框架，如何實現(xiàn)點擊單元格，將單元格省略掉的內(nèi)容顯示出來，table.js用的2.4.5版本，我的彈層比較多給每個cell的標簽上存一個data-iddata-content的屬性，然后給整個table搞一個click事件委托，點擊的時候就能取出完整值顯示了
一個小程序的后臺是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（類似慕課、知到），后來經(jīng)過討論決定降低難度，先做一個微信小程序，附帶一個后臺管理系統(tǒng)，于是我的第一個web項目就開始了~
需求分析
這里簡單介紹下SPOC和翻轉課堂的意思
翻轉課堂
“翻轉課堂”（FlippingClassroom）是一種顛覆傳統(tǒng)教學由“課堂授課聽講+課后作業(yè)練習”轉變?yōu)椤罢n前自主學習+課堂協(xié)作探究”的新型教學模式。
SPOC
SPOC（SmallPrivateOnlineCourse）一般被譯為小規(guī)模限制性在線課程或者小規(guī)模私有型網(wǎng)絡課程，音譯為“私播課”。
這次項目的需求是開發(fā)一個學習類型的小程序，用戶分為學生和教師，其中學生可以觀看視頻、課件、動畫，完成作業(yè)、考試以及發(fā)布評論、點贊、回復，而教師可以上傳教學視頻、課件、動畫和發(fā)布作業(yè)、考試、通知，以及查看學生的學習情況，也可以查看評論回復，及時解答學生的疑惑。
團隊分工
團隊一共有四個人，總體工作分為產(chǎn)品設計、前端開發(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ù)、增/刪/改/查、返回結果給前端。
順便說下代碼編輯用的是sublimetext3，教程看，這個不是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登場，經(jīng)典模塊化前端框架、低門檻開箱即用。
真正使用之前可以先看看文檔，個人感覺上手還是挺快的。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，然后就可以通過網(wǎng)絡訪問，關于新浪云環(huán)境下php如何操作看官方文檔。
域名
應用信息可查看二級域名，獨立域名需要購買且備案
日志
日志中心可查看每次請求的接口、時間、請求方設備等信息
其它
控制臺還可以實時查看流量統(tǒng)計、資源使用情況，以及消費情況
總結
這個項目我也算前后端都做了一遍，感覺前端不太適合自己，可能是對頁面元素樣式、用戶體驗不夠敏感，不過必須承認前端是挺有意思的。至于后端是更加注重邏輯，目前我對后端的了解只停留在數(shù)據(jù)庫、網(wǎng)絡、部署層面，其實如果用戶數(shù)量非常多還要考慮高并發(fā)的問題，也就要使用多線程、負載均衡、消息隊列等技術了，所以還有很多技術需要學習
Layui-基本使用、數(shù)據(jù)調試首先是官方文檔。我真的不是第一次覺得閱讀官方文檔比百度上搜索要有效率幾百倍了，當然前提教程是漢語。
組件庫
使用文檔
Springboot+Thymeleaf+layui框架的配置與使用
Springdatajpa分頁+layui數(shù)據(jù)表格渲染數(shù)據(jù)
我覺得我現(xiàn)在能看懂了，感慨。
layui.table里面json數(shù)據(jù)有多層嵌套,請問要怎么獲取數(shù)據(jù)?
下面這個主樓里用的是改底層源碼的方式，我覺得不可取。
layui數(shù)據(jù)表格total和data無法使用多層嵌套json格式的數(shù)據(jù)的解決辦法
下面有對主樓這樣的補充，但也是改的底層源碼：
我用的版本中Layui符號是以字體的形式表示的（layui2.3.0之前只支持采用unicode字符），可能也是被攔截掉了，參考以下寫法。
SpringBoot中引用LayUIfont不顯示問題解決辦法
以后可以直接使用內(nèi)聯(lián)元素調出字體圖標。
Layui字體圖標庫
第二種方法（我沒試過）：
SpringBoot使用layui的字體圖標時無法正常顯示解決辦法
layuiAdmin使用總結，基于springmvc
Layui在MVC下的配置過程，我沒用到，但是感覺不錯。去看了看這位以前的文章，感嘆大佬真的太多了，隨處一看就都是大佬。
雖然大家都說畢設很水，但是年輕又有為的人卻不計其數(shù)，可能他們很聰明早就開始做自己的項目了，沒把畢設當作發(fā)力點。那我就將錯就錯吧，我想學習，我很羨慕。
通過table.render來刷新、繪制table
Layui表格單元格編輯保存
le可編輯擴展下拉框編輯器
layui的table中日期格式轉換
這個除了顯示其實還有個問題：當這個日期還是null時，會自動顯示當前日期，所以需要加一個判斷，不為空才顯示。
下面是我用在了進度計劃行內(nèi)編輯中的例子。
layui菜鳥教程?
首先是官方文檔。我真的不是第一次覺得閱讀官方文檔比百度上搜索要有效率幾百倍了,當然前提教程是漢語。 組件庫 使用文檔 Springboot+Thymeleaf+layui框架的配置與使用 Springdatajpa分頁+layui數(shù)據(jù)表格渲染數(shù)據(jù) 我覺得我現(xiàn)在能看懂了,感慨。 layui.table里面json數(shù)據(jù)有多層嵌套,請問要怎么獲取數(shù)據(jù)? 下面這個主樓里...
Java學習路線是怎樣的?
第四階段，Java高級框架-SSM：SpringMVC、Spring MVC生成JSON數(shù)據(jù)、MyBatis、MyBatis 環(huán)境配置及入門、Mybatis set標簽、Mybatis trim標簽、Shiro、Shiro快速入門教程、Shiro Web應用等。第五階段，SpringBoot+VUE全棧框架：SpringBoot、全局異常處理、過濾器監(jiān)聽器、EHCache緩存、SpringBoot Quartz定時任務、Vue...
#WEB前端開發(fā)#會一些靜態(tài)頁面布局,javascript可還行,但是簡歷投出去都沒...
首先，成為一名成熟的開發(fā)者，首先必是一位有基礎的開發(fā)。所以最基本的一些HTML、CSS、JavaScript這些基礎的語法，就不詳細說了。扎實的JavaScript基礎在前端開發(fā)里，最講究的還是在JS里，基礎的語法，能運用很簡單。但是說成熟開發(fā)，那必然是對JavaScript是熟練掌握和有深入的理解了。說到要熟練掌握JavaScript...
相關評說：
滎陽市柱塞： ______ 你可以在前邊加,后邊的話好像沒有現(xiàn)成的,前邊加的代碼:<div class=＂layui-form-item＂> <label class=＂layui-form-label required＂>標題</label> <div class=＂layui-input-block＂> <input type=＂text＂ name=＂title＂ id=＂title＂ autocomplete...
滎陽市柱塞： ______ var ServiceFeatures = escape(editor.html()); $.ajax({ url: ＂/XXX/XXXX＂, data: { id: ServiceFeatures}, type: ＂post＂, dataType: ＂json＂, success: function (res) { if (res.isOk) { queryCostRecord(); } }, error: function (res) { } });
滎陽市柱塞： ______ 1:點擊就刷新你不覺得對服務器的壓力稍微大了點嗎? 2:點擊刷新你知道怎么監(jiān)聽點擊選中嗎? 3:你知道怎么刷新頁面嗎? 4:結合2,3就能實現(xiàn)你的功能 5:你的tab刷新是用的ifream還是什么也需要說明
滎陽市柱塞： ______ table.render({ elem: '#orderTable' ,height: 400 ,cols: [[ //標題欄 {field: 'status', title: ＂訂單狀態(tài)＂, width: 90} ,{field: 'orderSerialNumber', title: ＂訂單編號＂, minWidth: 150} ,{field: 'logisticsSerialNumber', title: ＂物流串號＂, minWidth: 150}...
滎陽市柱塞： ______ public static void main(String[] args) throws ParseException { String time = ＂2015-10-08 17:00:00＂; SimpleDateFormat sdf = new SimpleDateFormat(＂yyyy-MM-dd HH:mm:ss＂); java.util.Date date_util = sdf.parse(time); //轉換為util.date java....
滎陽市柱塞： ______ 直接在img 的標簽上加寬度和高度,就可以了
滎陽市柱塞： ______ <html><head></head><body><form> 愛好<input type=＂radio＂ id=＂radioBox1＂ value=＂aaa＂/><input type=＂radio＂ id=＂radioBox2＂ value=＂aaa＂/><script language=＂javascript＂> document.getElementById('radioBox2').checked=true;</script></form> </body></html>
滎陽市柱塞： ______ 在 before 回調里面 執(zhí)行追加 隱藏input的操作,里面放你的參數(shù) $('.layui-upload-file').after( '<input type=＂hidden＂ name=＂xxxx＂ value=＂xxxx＂ />' ); 這種方式只能傳遞靜態(tài)參數(shù),對于select的值好像獲取不到
滎陽市柱塞： ______ JSONObject dataJson=new JSONObject(＂你的Json數(shù)據(jù)“); JSONObject response=dataJson.getJSONObject(＂response＂); JSONArray data=response.getJSONArray(＂data＂); JSONObject info=data.getJSONObject(0); String province=...
滎陽市柱塞： ______ 在項目中發(fā)現(xiàn)layui數(shù)據(jù)表格勾選復選框checkbox的時候,轉到新的一頁勾選,上一次的勾選不會選中,即沒有記憶功能.導致跟后臺交互傳遞參數(shù)不全問題.為了解決此問...
