RUOYI框架教程(二)

原创
08/03 00:21
阅读数 2.6K

 期待已久的系列,又双给大家见面啦


本系列纯干货!!有想了解的小伙伴,欢迎加微信v5coding_com(非官方)~~~


01

上期回顾

上期推文中,我们就若依框架进行了简单的介绍与初步上手操作。传送门:RUOYI框架教程(一)


光说不干假把式,本期以常见的笔记功能进行讲解,功能简单,参考勿喷~~

实战项目:《笔记管理》涉及框架内容:1、字典管理;2、菜单管理;3、代码生成;4、富文本编辑器;5、全屏展示设置;


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中,配置对于请求处理

    /**     * 查看笔记信息*/@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




本文分享自微信公众号 - V5codings(gh_c1ec2d16ec93)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部