后端与前端的交互
流程：
从静态页面login.html请求，由form表单提交到后台，然后到meizu.html页面。
1.引入依赖
<!--引入模板引擎，解析页面-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.consumer的配置文件中配置模板引擎配置
# thymeleaf配置 : 如果是默认的文件夹下可以不加
spring.thymeleaf.prefix=classpath:/templates/
spring.mvc.view.suffix=.html
3.静态页面（位于static下）
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<style type="text/css">
</style>
<!--图标-->
<link type="image/x-icon" rel="shortcut icon" href="img/favicon.ico"/>
<script type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
$("#but").click(function () {
$.ajax({
type: "get",
url: "http://localhost:8899/demo/core/login",
success: function (res) {
alert(res);
}
});
});
$("#btn1").click(function () {
var name = $("#name").val();
var pwd = $("#pwd").val();
var userId = $('#userId').val();
// alert(name + "___" + pwd);
$.ajax({
type: "GET",
url: "http://localhost:8899/demo/core/getUser/" + userId,
dataType: "json"
}).done(function (data) {
$('#ret').val(data.userName);
console.log(data)
console.log(data.userName)
});
});
$("#btn2").click(function () {
$("#name").val("");
$("#pwd").val("");
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<button id="but">but</button>
<div id="login">
<table>
<tbody>
<tr>
<td>
name:
</td>
<td>
<input id="name" placeholder="name"/>
</td>
</tr>
<tr>
<td>
pwd:
</td>
<td>
<input id="pwd" placeholder="pwd"/>
</td>
</tr>
<tr>
<td>
id:
</td>
<td>
<input id="userId" placeholder="0"/>
</td>
</tr>
<tr>
<td>
后端返回的数据:
</td>
<td>
<input id="ret" placeholder=""/>
</td>
</tr>
<tr>
<td>
<button id="btn1">login</button>
</td>
<td>
<button id="btn2">clear</button>
</td>
</tr>
</tbody>
</table>
</div>
<br/><br/><br/><br/>
<div>
<form action="/demo/page/test" method="post" class="form-submit">
<div class="form-group">
<label class="form-label">userName</label>
<div class="form-input">
<input type="text" class="form-text" id="userName" name="userName" value=""/>
</div>
</div>
<div class="form-group">
<label class="form-label">userPwd</label>
<div class="form-input">
<input type="text" class="form-text" id="userPwd" name="userPwd" value=""/>
</div>
</div>
<div class="form-group">
<label class="form-label">loginTime</label>
<div class="form-input">
<input type="text" class="form-text" id="loginTime" name="loginTime" value=""/>
</div>
</div>
<div class="form-group">
<label class="form-label">state</label>
<div class="form-input">
<input type="text" class="form-text" id="state" name="state" value=""/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" id="div_submit">
<input class="btn btn-primary" id="submit" type="submit" value="提交"/>
<input class="btn" type="button" value="返回" onclick="history.back()"/>
</div>
</div>
</form>
</div>
</body>
</html>
4.后台逻辑，给前台返回参数
package com.nt.demo.controller;
import com.nt.demo.middle.intf.TestService;
import com.nt.demo.pojo.UserVO;
import lombok.extern.slf4j.Slf4j;
import org.apache.dubbo.config.annotation.Reference;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.*;
import sun.rmi.runtime.Log;
import javax.sound.sampled.Line;
import java.util.Map;
/**
* Create by TaoTaoNing
* 2019/7/2
**/
/**
* 要想返回页面的话，这里必须是Controller注解。
*/
@Slf4j
@Controller
@RequestMapping("/page")
public class TestController {
@Reference
private TestService testService;
/**
* 因为controller类上标注的是@Controller标签，想要返回json或xml等响应信息，必须
* 使用@ResponseBody注解
* ModelAttribute ：封装前台传的数据
* @return
*/
@RequestMapping("/test")
public String getHello(ModelMap modelMap, @ModelAttribute UserVO userVO){
log.info(userVO.getUserName());
// 向前台传递参数
modelMap.addAttribute("test","testAdd");
return "meizu";
}
@RequestMapping("/hello")
public String getLogin(ModelMap model){
model.addAttribute("hi","from server!");
return "login";
}
}
5.前台页面渲染，取出后台传递的值（meizu.html位于templates下）
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> 登录 </title>
<link rel="stylesheet" th:href="@{/style/css/base.css}"/>
<link rel="stylesheet" th:href="@{/style/css/login.css}"/>
<link rel="stylesheet" th:href="@{/style/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/style/layer/skin/layer.css}">
<!--一般项目默认static就是根路径，所以static下的路径中不能写static，应当以 / 代替-->
<script type="text/javascript" th:src="@{/style/js/jquery-1.7.1.min.js}"></script>
<script type="text/javascript" th:src="@{/style/js/jquery.cookie.js}"></script>
<script type="text/javascript" th:src="@{/style/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/style/layer/layer.js}"></script>
<!-- 验证码 隐藏滚动条 -->
<style>
.imgcode {
width: 95px;
position: absolute;
right: 0;
top: 0px;
cursor: pointer;
height: 46px;
font-size: 24px;
text-align: center;
line-height: 46px;
}
::-webkit-scrollbar {
display: none;
}
</style>
<!--想要在script中获取modelMAP中的参数要使用thymeleaf的文本内联标签-->
<script th:inline="javascript">
$(document).ready(function () {
// 使用[[${key}]] 或者[${key}]取出modelmap中的信息
var test = [[
${test}
]]
;
alert(test);
$("#login").html(test);
})
</script>
</head>
<body onload="changeImg()" onkeydown="keyLogin()">
<div id="content" class="content">
<div class="banner-box">
<form id="mainForm" class="main-form">
<div class="tab-title">
<a class="linkABlue" id="toAccountLogin" href="login.html">账号登录</a>
<span class="register-line"></span>
<a class="linkAGray" id="toVCodeLogin" href="register.html">账号注册</a>
</div>
<div id="errorMsg" class="tip-box visiblility-hidden">
<i class="err-ico"></i>
<span class="tip-font" id="tipMsg">请填写完整的登录信息</span>
<span id="closeErrorMsg" class="close-ico"></span>
</div>
<!-- 用户名 -->
<div class="normalInput" id="cycode-box">
<input th:text="${test}" class="ipt-account inp-focus" name="account" id="account" maxlength="50"
placeholder="邮箱/用户名" autocomplete="off" onfocus="closeErrorMsg()"/>
</div>
<!-- 密 码 -->
<div class="normalInput ">
<input type="password" class="inp-focus" name="password" id="password" maxlength="16" autocomplete="off"
placeholder="密码" onfocus="closeErrorMsg()"/>
</div>
<!-- 验证码 -->
<div class="normalInput " id="cycode-box">
<input class="ipt-account inp-focus" name="verify" id="verify" maxlength="50" placeholder="验证码"
autocomplete="off" onfocus="closeErrorMsg()"/>
<span id="code" class="imgcode"></span>
<!-- <img src="test.jpg" class="imgcode" id="code"> -->
</div>
<!-- 记住登录信息 -->
<div class="layui-form">
<input type="checkbox" name="remember" id="remember" lay-skin="primary" title="记住登录信息" checked>
</div>
<br/>
<a id="login" class="fullBtnBlue">登录</a>
<div class="transferField">
<a class="go2forgetpwd linkABlue rememberFieldForA" href="#">忘记密码?</a>
</div>
</form>
</div>
</div>
<script type="text/javascript">
//一加载就执行填充信息 用于记住登录信息
$(document).ready(function () {
if ($.cookie("password") != '') {
$("#password").val($.cookie("password"));
}
if ($.cookie("account") != '') {
$("#account").val($.cookie("account"));
}
})
//不加这个复选框样式不会改变
layui.use('form', function () {
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
});
//回车登录
function keyLogin() {
if (event.keyCode == 13) { //回车键的键值为13
//document.getElementById("login").click(); //调用登录按钮的登录事件
//或者使用jquery实现
$("#login").click();
}
}
//用于验证码
var code;//声明一个变量用于存储生成的验证码
document.getElementById("code").onclick = changeImg;
function changeImg() {
//alert("换图片");
var arrays = new Array(
'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
);
code = '';//重新初始化验证码
//alert(arrays.length);
//随机从数组中获取四个元素组成验证码
for (var i = 0; i < 4; i++) {
//随机获取一个数组的下标
var r = parseInt(Math.random() * arrays.length);
code += arrays[r];
//alert(arrays[r]);
}
//alert(code);
document.getElementById('code').innerHTML = code;//将验证码写入指定区域
}
//点击登录事件
$("#login").click(function () {
var account = $("#account").val();
var password = $("#password").val();
var verify = $("#verify").val();
if (account == "" || password == "" || verify == "") {
var obj = document.getElementById("errorMsg");
$("#tipMsg").html("请填写完整的登录信息！");
obj.setAttribute("class", "tip-box visiblility-show");
return;
}
//验证码不对
if (code.toLowerCase() != verify) {
//提示错误信息
var obj = document.getElementById("errorMsg");
//修改提示文字
$("#tipMsg").html("请填写正确的验证码！");
obj.setAttribute("class", "tip-box visiblility-show");
return;
}
//判断是否勾选记住登录信息
if ($("#remember").prop("checked") == true) {
//记录信息
var account = $("#account").val();
var password = $("#password").val();
//alert(passWord);
$.cookie("account", account);
$.cookie("password", password, {expires: 7}); // 存储一个带7天期限的 cookie 如果{ expires: 7 }
} else {
$.cookie("account", "");
$.cookie("password", "");
}
//发送ajax请求
$.ajax({
type: 'POST',
url: 'login.action',
data: 'account=' + account + '&password=' + password,
dataType: 'JSON',
success: function (data) {
//如果密码错误，则把cookie中的password清空同时表单内容设置为空,同时清空验证码，刷新验证码
if (data == "!0") {
$("#password").val("");
$.cookie("password", "");
$("#verify").val("")
changeImg();
alert("密码错误");
} else { //登录成功跳转页面
window.location.href = '';
}
},
});
});
//点击错误信息关闭按钮
$("#closeErrorMsg").click(function () {
var obj = document.getElementById("errorMsg");
obj.setAttribute("class", "tip-box visiblility-hidden");
});
//关闭错误提示
function closeErrorMsg() {
var obj = document.getElementById("errorMsg");
obj.setAttribute("class", "tip-box visiblility-hidden");
};
//验证码提示
$('.imgcode').hover(function () {
layer.tips("点击更换验证码", '#code', {
time: 2000,
tips: [2, "#3c3c3c"]
});
});
</script>
</body>
</html>
取出数据的方法
<!--想要在script中获取modelMAP中的参数要使用thymeleaf的文本内联标签-->
<script th:inline="javascript">
$(document).ready(function () {
// 使用[[${key}]] 或者[${key}]取出modelmap中的信息
var test = [[
${test}
]]
;
alert(test);
$("#login").html(test);
})
</script>
- List item
Tips：
- @Controller 和 @ResetController标签区别
1.@Controller 可以配合模板引擎返回页面，@ResetController 不可以返回页面
2.@Controller 可以配合@ResponseBody可以仅仅返回数据
3.相当于@Controller加上@ResponseBody等于@ResetController
- 配置dubbo消费者可以在服务者未启动的情况下先行启动不报错
# 配置dubbo消费者可以在服务者未启动的情况下先行启动不报错
dubbo.consumer.check=false
dubbo.consumer.timeout=10000
扫一扫
1778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
