什么? 不写代码也能做功能开发！ -RUOYI 教程二

 关注
发布于: 2020 年 08 月 03 日
“ 期待已久的系列，又双叒叕给大家见面啦”
本系列纯干货！！有想了解的小伙伴，欢迎加微信v5coding_com（非官方）~~~
文章图片不太清晰的，可以转知乎或公众号阅读https://zhuanlan.zhihu.com/c_1242422912856449024
01—上期回顾
上期推文中，我们就若依框架进行了简单的介绍与初步上手操作。传送门：RUOYI框架教程（一）
光说不干假把式，本期以常见的笔记功能进行讲解，功能简单，参考勿喷~~
实战项目：《笔记管理》涉及框架内容：
1、字典管理；
2、菜单管理；
3、代码生成；
4、富文本编辑器；
﻿
02—功能实现
1. 启动项目，访问系统，如下所示。具体方法，请参考RUOYI框架教程（一）
2. 打开系统管理，点击菜单管理，新建菜单。我这里，创建了一个空目录，【笔记箱】。
3. 打开系统管理，点击字典管理，新建字典。我这里，创建了一个字典，【笔记本】。
﻿
﻿
4. 打开navicate，创建数据库表。我这里只创建了单表，信息如下:
需要注意的是：创建者、创建时间、更新者、更新时间、用户ID等信息，可以使用框架本身的设置，系统会获取并自动插入。但字段名称固定，需按固定创建。
创建者 create_by varchar
创建时间 create_time datetime
更新者 update_by varchar
更新时间 update_time datetime
用户ID user_id bigint
部门ID dept_id bigint
﻿
5. 打开系统工具，点击代码生成。在页面，点击导入，选择数据库表
6. 选择导入的表，点击编辑，查看字段信息。这里我使用到了前面配置的字典。
具体操作为：选择显示类型为下拉框，字典类型为配置的【笔记本】。
﻿
7. 选择导入的表，点击编辑，查看生成信息。这里可以进行包名、业务名、菜单位置等信息配置。
8. 完成配置后，点击生成代码。系统会生成后台方法及前台页面。
﻿
9. 导出后，点击下载位置，将生成的main替换原有项目路径下文件。将sql在navicate中执行。
﻿
10.重启项目，查看生成的项目功能，此时项目功能已经可以使用。
截止到目前为止，系统还没有一步代码的编写，功能已经可用。
﻿
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，修改原有页面信息，包括：
1、去掉富文本编辑器，将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>
 
2、去掉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>
3、框内信息不允许编辑，即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中，配置对于请求处理
﻿
· 在controll中，配置对于请求处理
/**
     * 查看笔记信息
*/
@RequestMapping("/detail/{notesId}")
public String detail(@PathVariable("notesId") Long notesId, ModelMap mmap)
{
  RecNotesConCopy recNotesConCopy = recNotesConCopyService.selectRecNotesConCopyById(notesId);
  mmap.put("recNotesConCopy", recNotesConCopy);
  return prefix + "/detial";
}
06—微信交流群
最近b站视频被下架、csdn博客被封，被迫转战社群~如果有视频或技术交流需求，请联系微信或者直接加群交流，微信号：v5coding_com
﻿