若依非分离版本跟分离版本不一样,分离版本前端使用vue,登录的控制在vue实现,非分离版本使用 spring mvc 。若依非分离版本实现的功能是页面的跳转和数据api接口两类
一、操作界面展示
操作流程:
1、打开链接
http://localhost:28089/login,浏览器进入登录界面。
2、输入用户账号密码,验证码,点击登录,系统进入管理后台首页。
二、若依非分离版本的目录结构
如上图,java 代码放在ruoyi-admin src/java目录下面
UI界面代码放在resource/templates目录下面。文件类型是html。前端界面使用thymeleaf模版技术。
三、Thymeleaf模版说明
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比,Thymeleaf 最大的特点是,即使不启动 Web 应用,也可以直接在浏览器中打开并正确显示模板页面
1、引入Thymeleaf starter依赖
<!-- thymeleaf 相关依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
2、在 application.yml 添加 Thymeleaf 相关配置,如下图
四、登录界面后端实现
4.1、java代码实现
1、浏览器打开
http://localhost:28089/login,系统接收请求,对应的接口处理代码如下:
@GetMapping("/login")
public String login(HttpServletRequest request, HttpServletResponse response, ModelMap mmap)
{ // 如果是Ajax请求,返回Json字符串。
if (ServletUtils.isAjaxRequest(request))
{
return ServletUtils.renderString(response, "{\"code\":\"1\",\"msg\":\"未登录或登录超时。请重新登录\"}");
} // 是否开启记住我
mmap.put("isRemembered", rememberMe); // 是否开启用户注册
mmap.put("isAllowRegister", Convert.toBool(configService.getKey("sys.account.registerUser"), false));
return "login";
}从上述的代码,可以看到请求参数包括:
httpservletRequest:浏览器请求参数。
httpServletResponse:服务器响应。
ModelMap:服务器传递参数给页面。
ModelMap的作用:
ModelMap对象主要用于传递控制方法传递数据到结果页面。类似于request的setAttribute方法的作用。
所以我们要想在jsp页面获取数据,只要将数据放到ModelMap对象中即可。
具体存放数据的方法如下:
addAttribute(String key,object value);
Jsp页面获取数据的方法如下:
${key} 在页面上通过EL表达式来获取ModelMap中存放的数据。{}中的key对应的是addAttributed()中的key值。。
modelmap本身不能设置页面跳转的url地址别名或者物理跳转地址,那么我们可以通过控制器方法的返回值来设置跳转url地址别名或者物理跳转地址。
上述函数业务逻辑说明
1、通过mmap.put的函数,返回isRemembered和isAllowRegister这两个参数给前端。
2、return "login"; 返回字符串不需要添加后缀,那么login映射了resources/templates目录下面的文件,如下图,对应login.html 文件
五、login.html前端实现
5.1、样式和js的引入
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
<link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
<link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.7}" rel="stylesheet"/><!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.7}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>前端使用jquery技术
5.2、Thymeleaf模版使用
第四节里面可以看到后端是返回了isRemembered(是否开启记住我),isAllowRegister(isAllowRegister)两个参数。我们现在看看在前端模板的使用
如上图,
<strong th:if="${isAllowRegister}">还没有账号? <a th:href="@{/register}">立即注册»</a></strong> <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
<input type="checkbox" id="rememberme" name="rememberme">
<label for="rememberme">记住我</label>
</div>如上述代码片段,Thymeleaf获取后端送来的数据是通过${isRemembered}的格式来获取。其中th:if是模版表达式,如果返回的值是ture,则显示改标签的内容,如果返回flase,则不现实。
详细效果如下截图:
六、未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表