“ 期待已久的系列，又双叒叕给你们见面啦”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源创计划”，欢迎正在阅读的你也加入，一块儿分享。