这里自己写了个登陆页面，并利用ajax实现前后端分离，在用户写好账号，异步登陆提交，在当前页面返回信息。登陆后在这里写个用户详情，删除时给予警告，可以实时显示删除，不用刷新网页。
话不多说，直接上代码
前端页面代码(由于是测试，两个功能模块并不能直接跳转，需要手动输入url，后面会做提示）
1.login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="login.js"></script>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<label>login</label>
<form id="form" action="/ocp/index">
<input id="empno" type="text" name="empno" onblur="check()"><br>
<div id="s"></div>
<input id="emppsd" type="password" name="emppsd"><br>
<p id="show"></p>
</form>
<button onclick="submit()">login</button>
</div>
<div id="1"></div>
</body>
</html>
2.login.js
function submit() {
let data={empno: document.getElementById("empno").value,
emppsd: document.getElementById("emppsd").value};
$.ajax(
{
type: "post",
url: "/ocp/login",
data: data,
//接收的数据格式
dataType:"json",
success: function (datas) {
//alert(datas.info)
//console.log(datas.object.empno)
if(datas.object == null) {
var div=document.getElementById("show");
div.innerHTML = datas.info + "<br>";
div.setAttribute("style","color:red");
}
else{
document.getElementById("form").submit();
}
},
error: function () {
alert("errer")
}
}
)
}
function check() {
var key=document.getElementById("empno").value;
var data={
id:key
}
$.ajax({
type:"post",
url:"/ocp/check",
data:data,
dataType:"json",
success: function (datas) {
if(datas.object == null) {
var divs=document.getElementById("s");
divs.innerHTML = datas.info + "<br>";
divs.setAttribute("style","color:red");
setTimeout(xiaoshi,3000)
}
else {
}
},
error: function () {
alert("errer")
}
})
}
function xiaoshi() {
var div=document.getElementById("s");
div.innerHTML ="";
}
3.findALl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="findALl.js"></script>
<style type="text/css">
.a:hover{
width: 36px;
height: 20px;
background-color: antiquewhite;
color:red
}
</style>
</head>
<body>
<button onclick="submit()">查询所有</button>
<div id="show"></div>
<div id="sure"></div>
</body>
</html>
findALl.js
function submit() {
$.ajax(
{
url: "/ocp/findall",
//接收的数据格式
dataType:"json",
success: function (datas) {
//alert(datas.info)
//console.log(datas.object.empno)
document.getElementById("show").innerHTML = "<table border='1' id='2'>"+
"<tr>"+
"<th>empno</th>"+
"<th>emppsd</th>"+
"<th>操作</th>"+
"<th>删除</th>"+"</tr>"
"</table>"
for (let i=0;i<datas.empList.length;i++){
var node=document.createElement("TR");
document.getElementById("2").appendChild(node);
node.innerHTML= "<td>"+datas.empList[i].empno+"</td>"+
"<td>"+datas.empList[i].emppsd+"</td>"+"<td><a href='/ocp/update?empno="+datas.empList[i].empno+"'>修改</a></td>"+"<td><a class='a' onclick='sure("+i+','+datas.empList[i].empno+")'>删除</a></td>"
}
},
error: function () {
alert("errer")
}
}
)
}
function sure(num,id){
var a=1;
var b=0;
var s=document.getElementById("sure")
s.innerHTML= "是否删除"+"<button style='position: absolute;;left: 11px;top: 40px;' onclick='check("+a+","+num+","+id+")'>yes</button>"+
" <button style='position: absolute;left: 88px;top: 40px;' onclick='check("+b+","+num+","+id+")'>no</button>"
s.setAttribute("style","position: absolute;left:500px;top:0px;height: 80px;width: 110px;border: 1px solid black;padding-left: 30px;")
}
function check(flag,num,id) {
if(flag==1){
document.getElementById("show").innerHTML="";
document.getElementById("sure").innerHTML=""
document.getElementById("sure").setAttribute("style","border:0px")
$.ajax(
{
url: "/ocp/delete?empno="+id,
//接收的数据格式
dataType:"json",
success: function (datas) {
//alert(datas.info)
//console.log(datas.object.empno)
document.getElementById("show").innerHTML = "<table border='1' id='2'>"+
"<tr>"+
"<th>empno</th>"+
"<th>emppsd</th>"+
"<th>操作</th>"+
"<th>删除</th>"+"</tr>"
"</table>"
for (let i=0;i<datas.length;i++){
var node=document.createElement("TR");
document.getElementById("2").appendChild(node);
node.innerHTML= "<td>"+datas[i].empno+"</td>"+
"<td>"+datas[i].emppsd+"</td>"+"<td><a href='/ocp/update?empno="+datas[i].empno+"'>修改</a></td>"+"<td><a class='a' onclick='sure("+i+','+datas[i].empno+")'>删除</a></td>"
}
},
error: function () {
alert("errer")
}
}
)
}
else{
document.getElementById("sure").innerHTML=""
document.getElementById("sure").setAttribute("style","border:0px")
}
}
后端代码
控制层部分代码，只供参考
@RequestMapping("/login")//登录
@ResponseBody
public String login(Emp d) {
Emp a = empServices.login(d);
Map<String, Object> map = new HashMap<>();
if (a == null) {
map.put("info", "password error");
map.put("object", null);
System.out.println("null");
} else {
map.put("info", "success");
map.put("object", a);
}
String s = JSON.toJSONString(map);
System.out.println(s);
return s;
}
@RequestMapping("/index")//后台
public void index(Emp e, HttpServletResponse response) throws ServletException, IOException {
Emp emp = empServices.login(e);
response.sendRedirect("/ocp/index.html?id=" + emp.getEmpno());
}
@RequestMapping("/check")//后台
@ResponseBody
public String check(int id) {
System.out.println(id);
Emp emp = empServices.findInfoById(id);
Map<String, Object> map = new HashMap<>();
if (emp == null) {
map.put("info", "账号不对");
map.put("object", null);
System.out.println("null");
} else {
map.put("info", "success");
map.put("object", emp);
}
String s = JSON.toJSONString(map);
return s;
}
@RequestMapping("/findall")//登录
@ResponseBody
public String findAll(Model model) {
List<Emp> list = new ArrayList<Emp>();
list = empServices.findAll();
model.addAttribute(list);
String s = JSON.toJSONString(model);
System.out.println(s);
return s;
}
测试开始
总结
在使用前后端分离的json数据时遇到了很多问题，这些页面也是自己测试了很久写的，代码写的不够好，这是第一次接触前后端分离，望见谅，欢迎大家提出见解和我分享，谢谢大家！！