「 期待已久的系列，又雙叒叕給你們見面啦」javascript
本系列純乾貨！！有想了解的小夥伴，歡迎加微信v5coding_com（非官方）~~~
css
01html
—java
上期回顧jquery
上期推文中，咱們就若依框架進行了簡單的介紹與初步上手操做。傳送門：RUOYI框架教程（一）web
光說不幹假把式，本期以常見的筆記功能進行講解，功能簡單，參考勿噴~~ajax
實戰項目：《筆記管理》涉及框架內容：1、字典管理；2、菜單管理；3、代碼生成；4、富文本編輯器；5、全屏展現設置；
02sql
—數據庫
功能實現
json
-
啓動項目，訪問系統，以下所示。具體方法，請參考RUOYI框架教程（一）
-
打開系統管理，點擊菜單管理，新建菜單。我這裏，建立了一個空目錄，【筆記箱】。
-
打開系統管理，點擊字典管理，新建字典。我這裏，建立了一個字典，【筆記本】。
-
打開navicate，建立數據庫表。我這裏只建立了單表，信息以下:
須要注意的是：建立者、建立時間、更新者、更新時間、用戶ID等信息，可使用框架自己的設置，系統會獲取並自動插入。但字段名稱固定，需按固定建立。
建立者 create_by varchar建立時間 create_time datetime更新者 update_by varchar更新時間 update_time datetime用戶ID user_id bigint部門ID dept_id bigint
打開系統工具，點擊代碼生成。在頁面，點擊導入，選擇數據庫表
選擇導入的表，點擊編輯，查看字段信息。這裏我使用到了前面配置的字典。
具體操做爲：選擇顯示類型爲下拉框，字典類型爲配置的【筆記本】。
選擇導入的表，點擊編輯，查看生成信息。這裏能夠進行包名、業務名、菜單位置等信息配置。
完成配置後，點擊生成代碼。系統會生成後臺方法及前臺頁面。
導出後，點擊下載位置，將生成的main替換原有項目路徑下文件。將sql在navicate中執行。
重啓項目，查看生成的項目功能，此時項目功能已經可使用。
截止到目前爲止，系統尚未一步代碼的編寫，功能已經可用。
03
—
自定義功能-富文本編輯器
功能介紹：
生成的功能中，內容爲輸入框，顯然是不合適的。我使用框架中現有功能，改成了富文本編輯器。效果以下：
實現原理：
打開生成的html頁面，我這裏是add.html頁面。找到內容的代碼，將type值由「text」，改成「hidden」，同時設置div屬性，具體以下：
<div class="form-group"> <label class="col-sm-3 control-label">內容：</label> <div class="col-sm-8"> <input id="content" name="content" class="form-control" type="hidden"> <div class="summernote"></div> </div></div>
在代碼中，增長css及js引用，具體以下：
<th:block th:include="include :: summernote-css" /> <th:block th:include="include :: summernote-js" />
在代碼中，增長jquery引用（修改替換原有），具體以下：
<script th:inline="javascript"> var prefix = ctx + "hp/notecopy"
$('.summernote').summernote({ placeholder: '請輸入內容', height : 192, lang : 'zh-CN', followingToolbar: false, callbacks: { onImageUpload: function (files) { sendFile(files[0], this); } } });
// 上傳文件 function sendFile(file, obj) { var data = new FormData(); data.append("file", file); $.ajax({ type: "POST", url: ctx + "common/upload", data: data, cache: false, contentType: false, processData: false, dataType: 'json', success: function(result) { if (result.code == web_status.SUCCESS) { $(obj).summernote('editor.insertImage', result.url, result.fileName); } else { $.modal.alertError(result.msg); } }, error: function(error) { $.modal.alertWarning("圖片上傳失敗。"); } }); }
$("#form-notecopy-add").validate({ focusCleanup: true });
function submitHandler() { if ($.validate.form()) { var sHTML = $('.summernote').summernote('code'); $("#content").val(sHTML); $.operate.save(prefix + "/add", $('#form-notecopy-add').serialize()); } }</script>
04
—
自定義功能-全屏查看詳情
功能介紹：
生成的代碼中，沒有查看功能，而通常系統都須要的。因此，在這裏我新增了查看詳情的功能。效果以下：
實現原理：
複製一份頁面，我用的是edit.html，重命名爲detail.html，修改原有頁面信息，包括：
一、去掉富文本編輯器，將input改成p標籤，將th:field改成th:utext
<div class="form-group"> <label class="col-sm-3 control-label">內容：</label> <div class="col-sm-8"> <p id="content" name="content" th:utext="*{content}"></p> </div></div>
二、去掉jquery配置，保留信息以下
<script th:inline="javascript"> var prefix = ctx + "hp/notecopy"; $("#form-notecopy-detail").validate({ focusCleanup: true });
function submitHandler() { if ($.validate.form()) { $.operate.cancel(prefix + "/detail", $('#form-notecopy-detail').serialize()); } }</script>
三、框內信息不容許編輯，即input增長disabled="disabled"
<input name="label" th:field="*{label}" class="form-control" type="text" disabled="disabled">
在總頁面中，配置頁面請求和跳轉，我這裏是notecopy.html，將如下內容，增長到對於位置便可。
var detailFlag = [[${@permission.hasPermi('hp:notecopy:detail')}]];var options = {detailUrl: prefix + "/detail/{id}"}actions.push('<a class="btn btn-success btn-xs ' +detailFlag + '" href="javascript:void(0)" onclick="detl(\'' + row.notesId + '\')"><i class="fa fa-edit"></i>查看</a> ');在這裏，我還用到了全屏頁面的一個處理，因此，也加上如下內容，若是不須要全屏，能夠不加：
function detl( id) { $.modal.openFull("Dtail",ctx+"hp/notecopy/detail/"+id); }
在controll中，配置對於請求處理
/** * 查看筆記信息*/public String detail( Long notesId, ModelMap mmap){ RecNotesConCopy recNotesConCopy = recNotesConCopyService.selectRecNotesConCopyById(notesId); mmap.put("recNotesConCopy", recNotesConCopy); return prefix + "/detial";}
06
—
微信交流羣
最近b站視頻被下架、csdn博客被封，被迫轉戰社羣~如果有視頻或技術交流需求，請聯繫微信或者直接加羣交流。
微信號：v5coding_com
本文分享自微信公衆號 - V5codings（gh_c1ec2d16ec93）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。