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

用户头像
HPioneer
关注
发布于: 2020 年 08 月 03 日
什么?不写代码也能做功能开发! -RUOYI 教程二

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

本系列纯干货!!有想了解的小伙伴,欢迎加微信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



发布于: 2020 年 08 月 03 日 阅读数: 37
用户头像

HPioneer

关注

爱写作的95后国企产品|程序媛 2020.05.06 加入

爱写作的95后国企产品|程序媛,目前有公众号一枚 V5codings

评论

发布
暂无评论
什么?不写代码也能做功能开发! -RUOYI 教程二