若依 订阅
《若依》是在晋江文学城连载的原创小说,作者是微音袅袅。 展开全文
《若依》是在晋江文学城连载的原创小说,作者是微音袅袅。
信息
作    者
微音袅袅
小说进度
连载
中文名
若依
连载网站
晋江文学城
若依小说类型
原创
收起全文
精华内容
下载资源
问答
  • 初次 使用RuoYi 若依框架总结(前端)

    万次阅读 多人点赞 2019-12-03 11:47:52
    本人是做java开发的小白,偶然间看到了一篇关于若依框架的文章,顿时吸引过来,经过自己的摸索,从无知到认知,到现在能简单的使用,在此把自己用到的前端页面用到的东西做了一个小小总结,给大家做个分享(本人小白...

    本人是做java开发的小白,偶然间看到了一篇关于若依框架的文章,顿时吸引过来,经过自己的摸索,从无知到认知,到现在能简单的使用,在此把自己用到的前端页面用到的东西做了一个小小总结,给大家做个分享(本人小白,有错误地方希望提出,本人能及时改正,相互成长!!叩谢

    1. th:if

    <span th:if="${cusSecond.marriage} eq 1">已婚</span>
    <span th:if="${cusSecond.marriage} eq 2">未婚</span>
    
    <div th:if="${cusSecond.cusIdcard} ne null">
    	<span th:text="${cusSecond.cusIdcard.name}"></span>
    </div>
    <div th:if="${cusSecond.cusIdcard} eq null">--</div>
    
    

    2. th:switch

    <div th:switch="${cusSecond.marriage}">
    	<span th:case="'1'">已婚</span>
    	<span th:case="'2'">未婚</span>
    	<span th:case="'3'">离异</span>
    	<span th:case="'4'">丧偶</span>
    	<span th:case="'5'">未知</span>
    </div>
    

    3. th:href

    第一次用thymeleaf模版引擎的a标签还有点不适应!
    <a th:href="@{/standard/{type}(type=${type})}">view</a>
    

    4. th:内联JS

    <script th:inline="javascript">
    

    引入外部js css

    <script type="text/javascript" th:src="@{/layer/layer.js}">
    <link type="text/css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"  /></script>
    

    5. th:text

    <span th:text="${#dates.format(cusProposer.workInfo.firstTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
    

    {#dates.format(new java.util.Date().getTime(), ‘yyyy-MM-dd hh:mm:ss’)}

    format里第一个参数是自己需求的时间,可以是当前时间戳new java.util.Date().getTime(),也可以说后台传过来的时间,第二个参数是页面想要展示的时间格式类型。

    6. input设置为disabled,表单无法提交后台无法接收

    <input name="num" id="number" size=8 value="disabled提交时得不到该值 " disabled="disabled" >
    

    解决办法:放在form表单中提交后得不到该值。将disabled=”disabled” 改为 readonly = “readonly” 即可

    按照W3C的规范:
    设置为disabled的input将会有下面的限制:

    • 不能接收焦点
    • 使用tab键时将被跳过
    • 可能不是successful的

    设置为readonly的input将会有下面的限制:

    • 可以接收焦点但不能被修改
    • 可以使用tab键进行导航
    • 可能是successful的
    • 只有successful的表单元素才是有效数据,也即是可以进行提交。disabled和readonly的文本输入框只能通过脚本进行修改value属性。
      以上来自化风的CSDN如有侵权请联系本人,做修改。

    7. th标签

    这里引入一个ht标签的链接,很多标签,讲解的很详细,
    很详细的th标签
    很多细节,本人在此学到了很多。

    8. 取值

    <span th:text="${name}"></span>
    

    9. 校验数字

    页面input标签:
    <input name="age" id="age" minlength="11" maxlength="11" class="form-control" type="text" required>
    

    JS:

    
    	function checkSize(obj) {
    		//如果输入非数字,则替换为''
    		obj.value = obj.value.replace(/[^\d\.]/g, '');
    		//必须保证第一个为数字而不是.
    		obj.value = obj.value.replace(/^\./g, '');
    		//前两位不能是0加数字
    		obj.value = obj.value.replace(/^0\d[0-9]*/g, '');
    		//保证只有出现一个.而没有多个.
    		obj.value = obj.value.replace(/\.{2,}/g, '');
    		//保证.只出现一次,而不能出现两次以上
    		obj.value = obj.value.replace('.', '$#$').replace(/\./g, '')
    				.replace('$#$', '');
    		//只能输入两位小数
    		//obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    		}
    	
    		$('#age').on('input', function() {
    	
    			checkSize(this);
    	
    		})  
    

    10. 身份证校验

    页面input标签:
    <input name="identityCard" id="identityCard"  class="form-control" type="text">
    

    JS:

    $('#identityCard').on('blur', function() {
            	var value =document.getElementById("identityCard").value;
            	validateIdCard(value);
    	
    		})  
            function validateIdCard(idCard){
                var vcity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",  
                        21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",  
                        33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",  
                        42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",  
                        51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",  
                        63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"  
                       };
                //是否为空
                if(idCard === ''){
                    return false;
                }
                //校验长度,类型
                if(isCardNo(idCard) === false){
                	alert("身份证位数不合法");
                    return false;
                }
                //检查省份
                if(checkProvince(idCard,vcity) === false){
                	alert("身份证省份不存在");
                    return false;
                }
                //校验生日
                if(checkBirthday(idCard) === false){
                	alert("身份证生日不正确");
                    return false;
                }
                //检验位的检测
                if(checkParity(idCard) === false){
                	//alert("身份证位数不合法");
                    return false;
                }
                return true;
            }
            function isCardNo(card){
                //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
                var reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
                if(reg.test(card) === false){
                    return false;
                }
                return true;
            }
            function checkProvince(card,vcity){
                var province = card.substr(0,2);
                if(vcity[province] == undefined){
                    return false;
                }
                return true;
            };
            function checkBirthday(card){
                var len = card.length;
                //身份证15位时,次序为省(3位)市(3位)年(2位)月(2位)日(2位)校验位(3位),皆为数字
                if(len == '15'){
                    var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/; 
                    var arr_data = card.match(re_fifteen);
                    var year = arr_data[2];
                    var month = arr_data[3];
                    var day = arr_data[4];
                    var birthday = new Date('19'+year+'/'+month+'/'+day);
                    return verifyBirthday('19'+year,month,day,birthday);
                }
                //身份证18位时,次序为省(3位)市(3位)年(4位)月(2位)日(2位)校验位(4位),校验位末尾可能为X
                if(len == '18'){
                    var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X|x)$/;
                    var arr_data = card.match(re_eighteen);
                    var year = arr_data[2];
                    var month = arr_data[3];
                    var day = arr_data[4];
                    var birthday = new Date(year+'/'+month+'/'+day);
                    return verifyBirthday(year,month,day,birthday);
                }
                return false;
            };
            function verifyBirthday(year,month,day,birthday)
            {
                var now = new Date();
                var now_year = now.getFullYear();
                //年月日是否合理
                if(birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day)
                {
                    //判断年份的范围(0岁到100岁之间)
                    var time = now_year - year;
                    if(time >= 0 && time <= 100)
                    {
                        return true;
                    }
                    return false;
                }
                return false;
            }
            
            function checkParity(card){
                //15位转18位
                card = changeFivteenToEighteen(card);
                var len = card.length;
                if(len == '18'){
                    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); 
                    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); 
                    var cardTemp = 0, i, valnum; 
                    for(i = 0; i < 17; i ++) { 
                        cardTemp += card.substr(i, 1) * arrInt[i]; 
                    } 
                    valnum = arrCh[cardTemp % 11]; 
                    if (valnum == card.substr(17, 1).toLocaleUpperCase()) 
                    {
                        return true;
                    }
                    return false;
                }
                return false;
            }
            function changeFivteenToEighteen(card){
                if(card.length == '15')
                {
                    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); 
                    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); 
                    var cardTemp = 0, i;   
                    card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
                    for(i = 0; i < 17; i ++) 
                    { 
                        cardTemp += card.substr(i, 1) * arrInt[i]; 
                    } 
                    card += arrCh[cardTemp % 11]; 
                    return card;
                }
                return card;
            }
    
    

    11. 复制按钮

    页面input标签:
    <div class="form-group">    
    	 <label class="col-sm-3 control-label">上传后的url:</label>
    	 <div class="col-sm-8">
    		<input name="url" id="url" class="form-control" th:value="${url}" type="text">
    		<a onClick="copyTextAreaCt()" >复制url<i class="layui-icon-file-b"></i></a>
    	</div>
    </div>
    

    JS:

    function copyTextAreaCt()
    	{
    		var oContent=document.getElementById("url");
    		oContent.select(); // 选择对象
    		document.execCommand("Copy"); // 执行浏览器复制命令
    		alert("复制完毕,可粘贴");
    	}
    

    12. 校验手机号

    页面input标签:
    <input name="phone" id="phone" minlength="11" maxlength="11" class="form-control" type="text" required>
    

    JS

    $('#sourcePhone').on('blur', function() {
    	checkPhone(this);
    })
    function checkPhone(obj) {
    	var theinput = document.getElementById("sourcePhone").value;
    	var p1 = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|18[0-9]\d{8}|14[57]\d{8})$/;
    	if (p1.test(theinput) == false) {
    		alert('请填写正确电话号码!!');
    	} 
    }
    

    13. 校验金额

    页面input标签:
    <div class="form-group">    
    	<label class="col-sm-3 control-label">金钱:</label>
    	<div class="col-sm-8">
    		<input name="sourceMoney" id="sourceMoney"  class="form-control" type="text">
    	</div>
    </div>
    

    JS

    function checknum(obj) {
    //如果输入非数字,则替换为''
    	obj.value = obj.value.replace(/[^\d\.]/g, '');
    	//必须保证第一个为数字而不是.
    	obj.value = obj.value.replace(/^\./g, '');
    	//前两位不能是0加数字
    	obj.value = obj.value.replace(/^0\d[0-9]*/g, '');
    	//保证只有出现一个.而没有多个.
    	obj.value = obj.value.replace(/\.{2,}/g, '.');
    	//保证.只出现一次,而不能出现两次以上
    	obj.value = obj.value.replace('.', '$#$').replace(/\./g, '')
    			.replace('$#$', '.');
    	//只能输入两位小数
    	obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    }
    
    $('#sourceNum').on('input', function() {
    
    	checknum(this);
    
    })
    

    14. 下拉接口展示

    add页面:
    <div class="form-group">    
        <label class="col-sm-3 control-label">资金方:</label>
        <div class="col-sm-8">
               <select name="theFundingParty" lay-search="" class="form-control input1" required>
    			    <option value="">请选择</option>回显选中<!--循环遍历集合 -->
    			    <option  
    			    		th:each="a: ${funds}" 
    			            th:value="${a.name}" 
    			            th:text="${a.name}"> 下拉显示后台动态数据 
    				</option>
    			</select>
        </div>
    </div>
    

    edit页面:

    <div class="form-group">    
             <label class="col-sm-3 control-label">资金方:</label>
             <div class="col-sm-8">
                   <select name="theFundingParty" lay-search="" class="form-control input1">
    				    <option value="">请选择</option>回显选中<!--循环遍历集合 -->
    				    <option th:selected="${second.name  eq a.name}"  
    				    		th:each="a: ${funds}" 
    				            th:value="${a.name}" 
    				            th:text="${a.name}"> 下拉显示后台动态数据 
    				    </option>
    				</select>
            </div>
    </div>
    

    15. 页面列表操作栏添加自己的操作

    {
      	title: '操作',
        align: 'center',
        formatter: function(value, row, index) {
            var actions = [];
            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="$.operate.edit(\'' + row.idcardId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.idcardId + '\')"><i class="fa fa-remove"></i>删除</a>');
            actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" οnclick="upload(\'' + row.idcardId + '\')"><i class="fa fa-remove"></i>上传</a>');
            return actions.join('');
        }
    }
    

    JS:

    function upload(id) {
    	var url = prefix + '/uploadUI/';
        $.modal.open("文件上传", url);
    }
    

    在这里可以根据自己需求调用相应方法:如跳转一个页面

    $.modal.open("文件上传", url);
    

    根据需求调用方法,

    //提供成功、警告和错误等反馈信息
    $.modal.msg("默认反馈");
    $.modal.msgError("错误反馈");
    $.modal.msgSuccess("成功反馈");
    $.modal.msgWarning("警告反馈");
    //提供成功、警告和错误等提示信息
    $.modal.alert("默认提示");
    $.modal.alertError("错误提示");
    $.modal.alertSuccess("成功提示");
    $.modal.alertWarning("警告提示");
    $.modal.confirm("确认信息", function() {});
    //提供弹出层信息
    // title 标题 url 请求链接 width 宽度 height 高度 options 选项
    $.modal.open(title, url, width, height);
    $.modal.openTab(title, url);
    $.modal.parentTab(title, url);
    $.modal.openOptions(title, url);
    $.modal.openFull(title, url, width, height);
    $.modal.close(dataId);
    $.modal.closeAll();
    $.modal.closeTab();
    $.modal.reload();
    //提供遮罩层信息
    $.modal.loading("正在导出数据,请稍后...");
    $.modal.closeLoading();
    $.modal.open();
    $.modal.openOptions();
    $.modal.openFull();
    $.modal.openTab();
    $.modal.parentTab();
    $.modal.closeTab();
    

    16. thymeleaf和RuoYi

    前端的很多细节都还没接触到,用到的时候再补充,也希望多提意见。

    17. 相关连接

    官网 http://ruoyi.vip/

    官网

    文档
    http://doc.ruoyi.vip/

    文档

    在线演示
    http://demo.ruoyi.vip/login

    在线演示

    源码-码云下载地址
    https://gitee.com/y_project/RuoYi

    码云地址

    git下载方法:
    RuoYigit下载方法
    git clone https://gitee.com/y_project/RuoYi.git

    w3c学习地址
    https://www.w3cschool.cn/ruoyi/

    w3c学习地址

    本人java小白,对thymeleaf刚刚接触,对前端也是一知半解,有任何错误地方希望指正,本人能及时改正,相互成长!!随着对若依框架的了解,接下来会对后端东西做个笔记,也需要大家能提出宝贵的意见。在此表示感谢!!!

    展开全文
  • 官网是这样介绍的:若依开源框架是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统...

    前言:

    今天和大家分享一个是一个开源接私活/毕设/兼职挣钱的java前后端分离的开源项目,用了一小时左右把源码下载跑了一下、感觉还不错,中间运行前端代码的时候遇到一些小问题、根据错误提示也很快解决了、这是个什么项目呢,它是集SpringBoot+Spring Security+redis+shiro+vue于一体的标准项目框架、解放双手 ✋ 从现在开始。

    文末获取各种源码联系方式

         我看了下整个项目不涉及任何具体业务场景,只配置了一些常用功能,如:权限管理,用户管理,菜单管理等,外加redis中间件,以及很多好用的工具类(RedisUtil,Id生成器,Security权限控制等等),可以说是即拿即用,扩展性也非常强,下面就就进入主题具体介绍下这个前后端分离的开源项目吧。

         官网是这样介绍的:若依开源框架是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务。

    主要特性功能:

    • 完全响应式布局(支持电脑、平板、手机等所有主流设备)
    • 强大的一键生成功能(包括控制器、模型、视图、菜单等)
    • 支持多数据源,简单配置即可实现切换。
    • 支持按钮及数据权限,可自定义部门数据权限。
    • 对常用js插件进行二次封装,使js代码变得简洁,更加易维护
    • 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击
    • Maven多项目依赖,模块及插件分项目,尽量松耦合,方便模块升级、增减模块。
    • 国际化支持,服务端及客户端支持
    • 完善的日志记录体系简单注解即可实现
    • 支持服务监控,数据监控,缓存监控功能。

    内置功能模板:

    • 用户管理:用户是系统操作者,该功能主要完成系统用户配置。
    • 部门管理:配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。
    • 岗位管理:配置系统用户所属担任职务。
    • 菜单管理:配置系统菜单,操作权限,按钮权限标识等。
    • 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。
    • 字典管理:对系统中经常使用的一些较为固定的数据进行维护。
    • 参数管理:对系统动态配置常用参数。
    • 通知公告:系统通知公告信息发布维护。
    • 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。
    • 登录日志:系统登录日志记录查询包含登录异常。
    • 在线用户:当前系统中活跃用户状态监控。
    • 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。
    • 代码生成:前后端代码的生成(java、html、xml、sql)支持CRUD下载 。
    • 系统接口:根据业务代码自动生成相关的api接口文档。
    • 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。
    • 缓存监控:对系统的缓存信息查询,命令统计等。
    • 在线构建器:拖动表单元素生成相应的HTML代码。
    • 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。

    本地运行系统:

    可以去Gitee下载项目、百度网页搜索若依框架就是了、很多同学应该都知道

    然后导入项目到idea或自己的开发工具里面、下载最基本的依赖环境、jar等

    后端运行: 

    1.创建数据库ry-vue并导入数据脚本ry_2021xxxx.sqlquartz.sql

    3、打开项目运行com.ruoyi.RuoYiApplication.java,出现如下图表示启动成功。

    这样后端就启动了 

    前端运行:

    这个版本的前端也在这个里面、进入ruoyi-ui模块

    # 安装依赖
    npm install
    
    # 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
    npm install --registry=https://registry.npm.taobao.org
    
    # 本地开发 启动项目
    npm run dev

    必要配置:

    • 修改数据库连接,编辑resources目录下的application-druid.yml
    # 数据源配置
    spring:
        datasource:
            type: com.alibaba.druid.pool.DruidDataSource
            driverClassName: com.mysql.cj.jdbc.Driver
            druid:
                # 主库数据源
                master:
                    url: 数据库地址
                    username: 数据库账号
                    password: 数据库密码
    • 修改服务器配置,编辑resources目录下的application.yml
    # 开发环境配置
    server:
      # 服务器的HTTP端口,默认为80
      port: 端口
      servlet:
        # 应用的访问路径
        context-path: /应用路径

    启动成功后输入地址localhost:80访问页面、大功告成、快乐就这么简单 

    项目运行截图:

    登录:

     这是进去后的一个主要功能模块、是一个完整权限管理系统、用来做兼职、私活接单等是一个不错的选择。

    首页:

     菜单模块:

    用户绑定角色、角色控制菜单权限显示

    部门模块:

    通知公告:

    日志管理:

    项目文件结构:

    后端结构:

    com.ruoyi     
    ├── common            // 工具类
    │       └── annotation                    // 自定义注解
    │       └── config                        // 全局配置
    │       └── constant                      // 通用常量
    │       └── core                          // 核心控制
    │       └── enums                         // 通用枚举
    │       └── exception                     // 通用异常
    │       └── filter                        // 过滤器处理
    │       └── utils                         // 通用类处理
    ├── framework         // 框架核心
    │       └── aspectj                       // 注解实现
    │       └── config                        // 系统配置
    │       └── datasource                    // 数据权限
    │       └── interceptor                   // 拦截器
    │       └── manager                       // 异步处理
    │       └── security                      // 权限控制
    │       └── web                           // 前端控制
    ├── ruoyi-generator   // 代码生成(可移除)
    ├── ruoyi-quartz      // 定时任务(可移除)
    ├── ruoyi-system      // 系统代码
    ├── ruoyi-admin       // 后台服务
    ├── ruoyi-xxxxxx      // 其他模块

    前端结构:

    ├── build                      // 构建相关  
    ├── bin                        // 执行脚本
    ├── public                     // 公共文件
    │   ├── favicon.ico            // favicon图标
    │   └── index.html             // html模板
    │   └── robots.txt             // 反爬虫
    ├── src                        // 源代码
    │   ├── api                    // 所有请求
    │   ├── assets                 // 主题 字体等静态资源
    │   ├── components             // 全局公用组件
    │   ├── directive              // 全局指令
    │   ├── layout                 // 布局
    │   ├── router                 // 路由
    │   ├── store                  // 全局 store管理
    │   ├── utils                  // 全局公用方法
    │   ├── views                  // view
    │   ├── App.vue                // 入口页面
    │   ├── main.js                // 入口 加载组件 初始化等
    │   ├── permission.js          // 权限管理
    │   └── settings.js            // 系统配置
    ├── .editorconfig              // 编码格式
    ├── .env.development           // 开发环境配置
    ├── .env.production            // 生产环境配置
    ├── .env.staging               // 测试环境配置
    ├── .eslintignore              // 忽略语法检查
    ├── .eslintrc.js               // eslint 配置项
    ├── .gitignore                 // git 忽略项
    ├── babel.config.js            // babel.config.js
    ├── package.json               // package.json
    └── vue.config.js              // vue.config.js

    核心技术

    后端技术

    SpringBoot框架

    1、介绍
    Spring Boot是一款开箱即用框架,提供各种默认配置来简化项目配置。让我们的Spring应用变的更轻量化、更快的入门。 在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用。它遵循"约定优先于配置"的原则, 使用SpringBoot只需很少的配置,大部分的时候直接使用默认的配置即可。同时可以与Spring Cloud的微服务无缝结合。

    提示

    Spring Boot2.x版本环境要求必须是jdk8或以上版本,服务器Tomcat8或以上版本

    2、优点

    • 使编码变得简单: 推荐使用注解。
    • 使配置变得简单: 自动配置、快速集成新技术能力 没有冗余代码生成和XML配置的要求
    • 使部署变得简单: 内嵌Tomcat、Jetty、Undertow等web容器,无需以war包形式部署
    • 使监控变得简单: 提供运行时的应用监控
    • 使集成变得简单: 对主流开发框架的无配置集成。
    • 使开发变得简单: 极大地提高了开发快速构建项目、部署效率。

    Spring Security安全控制

    1、介绍
    Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架。

    2、功能
    Authentication 认证,就是用户登录
    Authorization 授权,判断用户拥有什么权限,可以访问什么资源
    安全防护,跨站脚本攻击,session攻击等
    非常容易结合Spring进行使用

    3、Spring SecurityShiro的区别

    相同点

    1、认证功能
    2、授权功能
    3、加密功能
    4、会话管理
    5、缓存支持
    6、rememberMe功能
    ....

    不同点

    优点:

    1、Spring Security基于Spring开发,项目如果使用Spring作为基础,配合Spring Security做权限更加方便。而Shiro需要和Spring进行整合开发
    2、Spring Security功能比Shiro更加丰富,例如安全防护方面
    3、Spring Security社区资源相对比Shiro更加丰富

    缺点:

    1)Shiro的配置和使用比较简单,Spring Security上手复杂些
    2)Shiro依赖性低,不需要依赖任何框架和容器,可以独立运行。Spring Security依赖Spring容器

    前端技术

    • npm:node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
    • ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
    • vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
    • vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
    • vuex:Vue提供的状态管理工具,用于统一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
    • element-ui:基于MVVM框架Vue开源出来的一套前端ui组件。

    今天推荐这个开源项目还是比较不错的、项目是快速开发脚手架,代码质量各方面的也还不错、适合用来做项目脚手架或自己私活接单以及练手来用、喜欢的朋友点一个一健三联支持下哟

     精彩java毕设实战项目推送:

    基于java ssm springboot+VUE疫情防疫系统系统前后端分离设计和实现

    基于java+springboot+mybatis+laiyu实现学科竞赛管理系统设计和实现

    基于java springboot+mybatis电影售票网站管理系统前台+后台设计和实现

    基于java ssm springboot+mybatis酒庄内部管理系统设计和实现

    基于JAVA springboot+mybatis智慧生活分享平台设计和实现

    基于Java springboot+vue+redis前后端分离家具商城平台系统设计和实现

    基于JAVA SSM springboot实现的抗疫物质信息管理系统设计和实现

    查看更多博主首页更多实战项目 >>>

    获取源码:

    总体来说这个项目功能相对还是比较简单优秀的、适合初学者作为课程设计和毕业设计参考 

    查看博主主页联系或下方微信公众号获取更多~!

    往前精彩分享:

    Java毕设项目精品实战案例《100套》

    HTML5大作业实战案例《100套》

    展开全文
  • 你和大佬之间就差了一个框架--[RuoYi若依框架教程]

    千次阅读 多人点赞 2020-09-27 17:08:02
    二、若依有什么?1.拖拽式表单开发2.全界面化的代码生成器3.内置系统管理基础模块4.若依教程资料获取三、总结 一、快速开发框架是什么? 「敏捷开发」「快速迭代」都比不上「无代码开发」「少代码开发」 每天工作...

    快速开发框架介绍-懂你的RUOYI

    你在为写系统不会写烦恼吗?
    你在为重复性的造轮子而无奈吗?
    你在为有逻辑而不会写代码而发愁吗?
    或许你和大佬之间,就差了一个快速开发框架,能打开了新世界大门哦!




    一、快速开发框架是什么?

    「敏捷开发」「快速迭代」都比不上「无代码开发」「少代码开发」


    每天工作充斥着大量增删改查,重复性工作,缺少认同感、成就感、成长感。

    996让无数程序员,早已麻痹。初次接触开发时hello word的快感被消耗殆尽,对公司提出的 「敏捷开发」「快速迭代」更是嗤之以鼻。

    究竟什么样,才能有效降低重复性工作,达到快速开发的目的?

    直到我发现了这些宝藏,RuoYi、Guns、Jeesite、Halo 等免费的快速开发脚手架。

    和平时用的Java框架不同,是一种配置化的开发工具,配置参数,即可生成业务参数及Java代码(包括控制器、模型、视图、菜单等),简单的调试,就可实现完整应用系统。

    这些快速开发框架,有着相同的优点。下面以RuoYi为例,进行介绍
    框架选的好,开发更轻巧

    二、若依有什么?

    「敏捷开发」「快速迭代」都比不上「无代码开发」「少代码开发」


    1.拖拽式表单开发

    在这里插入图片描述
    拖拽操作,可以支持,完全没有编程基础的人使用,开发完表单直接可以发布成菜单功能。无需编译就可以使用。这类功能同样可以受到权限管控。

    以往常规的开发都是产品经理先设计完原型,程序员再去做代码实现,用这种框架,可以在完成原型设计的同时,开发出功能。

    2.全界面化的代码生成器

    在这里插入图片描述
    可视化的代码生成器,生成基础代码,数据库、前端、后端应有尽有,还可以在代码基础上自行扩展,支持权限控制呢!

    以部门表为例,目前框架可生成的代码文件有:

    domain.java
    mapper.java
    service.java
    serviceImpl.java
    controller.java
    mapper.xml
    sql
    api.js
    index.vue

    以controller.java文件为例,生成的代码规范,可用性极高,简单逻辑的代码,无需修改,开箱即用,遇到有复杂业务逻辑的地方稍作修改就可以,简直不要太方便。

    代码如下(示例):

    /**
     * 部门Controller
     * 
     * @author ruoyi
     * @date 2020-05-07
     */
    @RestController
    @RequestMapping("/system/dept")
    public class SysDeptController extends BaseController
    {
        @Autowired
        private ISysDeptService sysDeptService;
        /**
         * 查询部门列表
         */
        @PreAuthorize("@ss.hasPermi('system:dept:list')")
        @GetMapping("/list")
        public TableDataInfo list(SysDept sysDept)
        {
            startPage();
            List<SysDept> list = sysDeptService.selectSysDeptList(sysDept);
            return getDataTable(list);
        }
        /**
         * 获取部门详细信息
         */
        @PreAuthorize("@ss.hasPermi('system:dept:query')")
        @GetMapping(value = "/{deptId}")
        public AjaxResult getInfo(@PathVariable("deptId") Long deptId)
        {
            return AjaxResult.success(sysDeptService.selectSysDeptById(deptId));
        }
        /**
         * 新增部门
         */
        @PreAuthorize("@ss.hasPermi('system:dept:add')")
        @Log(title = "部门", businessType = BusinessType.INSERT)
        @PostMapping
        public AjaxResult add(@RequestBody SysDept sysDept)
        {
            return toAjax(sysDeptService.insertSysDept(sysDept));
        }
        /**
         * 修改部门
         */
        @PreAuthorize("@ss.hasPermi('system:dept:edit')")
        @Log(title = "部门", businessType = BusinessType.UPDATE)
        @PutMapping
        public AjaxResult edit(@RequestBody SysDept sysDept)
        {
            return toAjax(sysDeptService.updateSysDept(sysDept));
        }
        /**
         * 删除部门
         */
        @PreAuthorize("@ss.hasPermi('system:dept:remove')")
        @Log(title = "部门", businessType = BusinessType.DELETE)
      @DeleteMapping("/{deptIds}")
        public AjaxResult remove(@PathVariable Long[] deptIds)
        {
            return toAjax(sysDeptService.deleteSysDeptByIds(deptIds));
        }
    }
    

    3.内置系统管理基础模块

    系统管理基础模块,包括权限管理和通用性功能。

    系统管理
    -用户管理 -角色管理 -菜单管理 -部门管理 -岗位管理 -字典管理 -参数设置 -通知公告 -日志管理
    系统监控
    -在线用户 -定时任务 -数据监控 -服务监控

    框架中提供了多种形式的权限控制,按角色、按部门、按岗位、按用户、按用户组都可以,操作权限细化到了界面上的每一个按钮。

    数据权限可以细化到每一条记录。操作非常简单,基于框架开发出来的功能、报表都可以直接挂到权限体系中来进行授权。做到了权限与业务的分离,只用关心业务实现。

    4.若依教程资料获取

    想要了解使用若依的,私信我,免费获取官方教程。

    三、总结

    以上就是今天要讲的内容,现在来总结一下:
    1,开箱即用的轮子很多,没必要一直重复增删改查的过程!
    2,我们可以用合适的轮子,来量产自己的跑车!
    3,框架带来的效果和利润,让人难以相信~
    今年的项目中,我们团队用到了快速开发框架,可以说管理系统类的,单个人1-2天就可以出来一个系统,可能这对于很多人来说是不可思议的,但是它确实是真的!

    2020.9.27
    在这里插入图片描述

    展开全文
  • 若依框架RuoYi前后端分离项目导入IDEA及运行启动

    万次阅读 多人点赞 2019-10-10 17:35:13
    若依框架RuoYi前后端分离项目导入IDEA及运行启动前端项目CMD命令行启动前端项目IDEA启动后端项目启动IDEA导入网上开源SpringBoot项目使用Git克隆SpringBoot项目到IDEA启动系统运行 RuoYi-Vue是一款基于SpringBoot+...


    RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架,因为本项目是前后端分离的,所以需要前后端都启动好,才能进行访问。

    1. 前往Gitee页面(https://gitee.com/y_project/RuoYi-Vue)下载解压到工作目录。
    2. 建议使用Git命令 git clone https://gitee.com/y_project/RuoYi-Vue.git克隆,因为克隆的方式可以和RuoYi随时保持更新同步。

    前端项目CMD命令行启动

    1. 前端系统使用的是Vue框架,所以需要使用Node.js环境, 官网下载 https://nodejs.org/en/ LTS长期支持版,安装过程比较简单, 除了修改安装路径,其他都是一直Next即可。
      在这里插入图片描述
      在官网下载安装node.js后,就已经自带npm(包管理工具),不需要另外再进行安装npm了。
      使用管理员身份打开CMD,输入 node -v 和 npm -v,显示版本号即安装成功。
      在这里插入图片描述
    2. 如果使用cmd命令行启动项目,则进入项目所在路径
      在这里插入图片描述
    3. 安装依赖,建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题:在命令行输入
      npm install --registry=https://registry.npm.taobao.org
      在这里插入图片描述在项目里会生成node_modules文件里,这里面包括所有相关的依赖
      在这里插入图片描述

    前端项目IDEA启动

    如果使用IEDA运行启动

    1. 首先要在IDEA里安装vue插件,File->Setttings->plugins 在搜索框输入vue
      在这里插入图片描述
      选择第一个安装,安装完后会提示重启。
    2. 导入vue项目,打开IDEA,点击File选择Open
      在这里插入图片描述
      直接选择项目文件夹打开
      在这里插入图片描述
    3. 在Terminal窗口执行命令,进入项目目录
      在这里插入图片描述
      如果已经在命令行里安装过依赖,则直接输入 npm run dev 启动即可。

    如果没有,则先installl安装,但是输入npm的时候报错了
    在这里插入图片描述
    解决办法是选择本地cmd,之后关闭所有idea窗口,重启
    在这里插入图片描述
    再重新输入命令启动
    在这里插入图片描述

    后端项目启动

    后端系统就是SpringBoot项目
    下载压缩包后,使用IDEA导入项目即可

    IDEA导入网上开源SpringBoot项目

    或者直接使用git克隆项目导入IDEA中

    使用Git克隆SpringBoot项目到IDEA启动

    系统运行

    如果只启动了后台系统,浏览器地址栏输入127.0.0.1:8080 则会显示
    在这里插入图片描述
    前后端系统都启动后,浏览器地址栏输入127.0.0.1:80,弹出登录页面
    在这里插入图片描述
    这时候虽然前端页面能打开,但是无法访问到后台系统,因为连接不到redis,所以还需要启动redis
    在这里插入图片描述
    redis官网https://redis.io/下载
    在这里插入图片描述
    安装成功后,打开运行即可
    在这里插入图片描述
    重新刷新网页,即可获取到验证码,登录
    在这里插入图片描述

    展开全文
  • 若依框架使用

    万次阅读 多人点赞 2019-07-19 10:24:44
    老板要求用若依框架 分享自己所知道的代码自动生成 第一步 创建数据库表 表一定要加注释 表一定要加注释 表一定要加注释 若依框架代码生成是根据数据库表的注释 创建完表之后 登录若依框架后台 点开代码生成 就能...
  • 建议收藏!!! 若依框架文档开发手册[持续更新]

    万次阅读 多人点赞 2019-08-08 15:54:04
    若依开发手册前端add.html下拉列时间框Ajax校验自定义校验edit.html下拉列回显时间xxxx.html搜索栏下拉列...用若依也很长时间了一直想写个手册 无奈中间又是离职又是接手老项目一直没机会 最近在开发新系统 果断用若...
  • 若依框架简介

    万次阅读 多人点赞 2019-05-10 13:05:38
    若依框架简介一、用户管理模块代码注意点简介 一、用户管理模块代码注意点简介
  • 手把手教你启动若依微服务项目

    千次阅读 2021-03-23 15:37:08
    项目地址:https://gitee.com/y_project/RuoYi-Cloud 二、运行准备阶段 在启动若依微服务项目前,为了保证,项目能够顺利的启动起来,需要提前准备好以下JAVA基础环境(推荐安装版本是本次教程所使用的环境版本) ...
  • 若依框架】代码生成详细教程

    千次阅读 多人点赞 2021-02-19 16:52:42
    若依框架1、修改代码生成配置2、新建数据库表结构(单表)3、项目中新建模块,并解决项目依赖的关系4、若依系统中新建一个目录 - 学生管理5、导入一开始建的表并设置上级目录,生成代码6、执行生成的SQL7、将生成的...
  • 二分钟开启 若依 后台使用部署

    万次阅读 2020-09-05 18:33:43
    安装部署: RuoYi后端部署 1)参考文档 ...一般若依项目都需要在如下位置配置mysql连接名密码 有的时候server端口显示被占用,也在如下文件里更改端口 5)在RuoYiApplication运行编译就可以了 ...
  • 若依 自动生成代码 同步到项目

    万次阅读 2020-09-05 19:08:04
    如果没有部署好若依项目,可以看 二分钟开启若依后台部署 走流程 在平台里找到代码生成 导入数据库某个表 生成信息里选择自定义路径 选择完信息后(包含提示必填的填完)保存 点击生成代码,看到操作完成 ...
  • 若依(前端分离版本)系统测试接口使用方法 若依(前端分离版本)系统测试接口说明(项目源码地址:https://gitee.com/y_project/RuoYi-Vue) 1. 生成验证码 2、登录获取token信息 3、测试接口 1. 生成验证码 ...
  • 权限管理策略是每个后台管理系统都需要考虑的,我所在的项目组工程比较老旧,所以打算参考若依改造一个新的权限管理系统。 若依的权限管理并不是最完美的,但是属于比较标准的,容易改造。本篇更侧重于设计和概念,...
  • 若依

    2021-01-20 20:00:20
  • 若依接口文档

    千次阅读 2020-03-09 14:24:22
    若依接口文档1. 获取验证码2. 登录请求3. 获得路由规则3. 获得所有信息5. 查询列表6. 新增 1. 获取验证码 GET http://localhost/dev-api/captchaImage { "msg": "操作成功", "img": "/9j/4AAQSkZJRgABAgAAAQABAAD/...
  • 若依框架使用入门

    万次阅读 多人点赞 2020-05-11 18:06:39
    若依框架使用入门 若依其实就是一套后台管理系统,后台基于SpringBoot和MyBatis,数据库有mysql和oracle,这里先讲mysql,前端是基于thymeleaf的HTML和Jquery。因为我们公司也是因为甲方公司要求使用这个框架才开始...
  • 若依前后端分离集成Mybatis-Plus

    千次阅读 2021-03-15 12:46:56
    MyBatis-Plus(opens new window)(简称 MP)是一个MyBatis(opens new window)的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。 特性: 无侵入:只做增强不做改变,引入它不会对现有...
  • 若依开发手册前端Validate相关时间格式化相关修改回显Table展示Bootstarp相关BootStarpTable设置默认排序列Table增加减少功能选项单页面全局Table根据字典匹配相应的值创建新的标签页调用方法input select锁定add...
  • 若依微服务框架ruoyi-cloud使用手册(持续更新中)

    万次阅读 多人点赞 2020-10-12 18:17:51
    若依微服务框架ruoyi-cloud使用手册(持续更新中) 一、项目启动事项 二、新建功能模块案例 三、不同微服务系统间接口调用案例 四、服务器部署 五、一些坑~ 一、项目启动事项 1.首先进行项目相关工具及环境准备,...
  • 若依微服务版RuoYi-Cloud,基于Spring Boot、Spring Cloud & Alibaba、OAuth2的前后端分离的后台管理系统。 RuoYi-Cloud 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Cloud &...
  • 若依集成 WebSocket

    2021-05-07 15:43:09
    若依集成 WebSocket引入依赖创建 WebSocket 配置类,开启 WebSocket 支持添加 WebSocketServer 类,创建 webSocket 端点创建 controller,用于模拟服务端消息发送添加 websocket.html 由于若依模块划分的很清楚,...
  • 若依数据权限

    千次阅读 2020-12-06 00:33:45
    若依数据权限是通过使用自定义注解,AOP拦截,实现将数据权限的sql插入Mapper文件中,从而达到控制数据权限的目的。
  • 部署springboot+vue项目文档(若依ruoyi项目部署步骤)

    万次阅读 热门讨论 2020-02-20 21:22:01
    部署springboot+vue项目文档(若依ruoyi项目部署步骤) 一:部署linux + nginx 二:部署windows + tomcat(无nginx) 三:解决调用第三方api如百度地图api所存在的跨域问题 最近部署若依项目,一直部署失败,多亏有...
  • 若依系统简介 若依概述 若依微服务版RuoYi-Cloud,基于Spring Boot、Spring Cloud & Alibaba、OAuth2的前后端分离的后台管理系统。此系统内置模块如部门管理、角色用户管理、菜单及按钮授权、数据权限、系统参数...
  • RuoYi(若依) 微服务分离版 启动及常见问题总结

    千次阅读 热门讨论 2021-04-25 08:27:43
    四、启动 这里还有个redis中间件服务必须有,自己百度下怎么装就好 1、后端 根据若依的官方文档,启动相应的类 2、前端 前端按照官方的介绍我是不能正常安装依赖,后面改成以下命令,才能正常安装启动 cnpm i ...
  • 今天讲下若依框架对于登录认证方面的实现,这个方面若依做的不算太好,如果项目中想用的话需要参考其他框架的实现,做的更好一些。 我建议是前后端放在一起来看,单纯看后端会比较无趣。 后端部分 /login 接口 ...
  • RuoYi若依管理系统是一个基于SpringBoot的权限管理系统,代码易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用。 RuoYi若依管理系统功能: 1、用户管理:用户是...
  • (前期工作:若依框架搭建,项目启动,创建数据库等不再赘述。从项目成功启动,使用代码生成模块开始) 前置条件 创建目录(如果新模块需要新的目录,一定要在生成代码前先创建好目录) 1、创建数据表 USE ry...
  • My Environment RuoYi多模块版本 IDEA ...进入若依系统,点击系统管理中的菜单管理,构建目录及其目录下的菜单: 请求地址和权限标识来自于对应的Controller: 重启或等待热部署(前提配置了热部署)后,刷新界面: END
  • 本文针对若依单体项目,本文主要介绍如何集成reids 注意:该方法适用于4.6.2版本,其它版本未测。 项目地址:https://gitee.com/y_project/RuoYi 目录 ​​​​​​​​​​​​​​​​​​​​​ 1、添加依赖...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,770
精华内容 27,508
关键字:

若依