IDEA Maven+SpringMVC+Mybatis HTML+Ajax MySql Tomcat登录Demo（二）
- 开发工具：IDEA
- 前端技术：HTML+JQuery+Ajax
- 后端技术：Maven+SpringMVC+MyBatis
- 数据库：MySql
本节内容记录了SpringMVC项目登录前端内容
一、创建前端各路径
创建前端文件目录，和所需文件，jquery文件需要去官网下载，复制到js下。
二、index.html、loginh.css、loginh.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="./css/loginh.css">
</head>
<body>
<div class="loginbody">
<div id="content"></div>
<div class="logindata">
<h3>AJAX登录页</h3>
<br/>
账号:
<input type="text" name="uname" id="uname" title="姓名"/>
<br/>
密码:
<input type="text" name="upwd" id="upwd" title="密码"/>
<br>
<br>
<input type="submit" value="注册" id="register">
<input type="submit" value="登录" id="login">
<input type="submit" value="查看用户数据" id="select">
</div>
<form action="/loginForm" method="post">
<h3>Form登录</h3>
<br/>
账号:
<input type="text" name="uname" title="姓名"/>
<br/>
密码:
<input type="text" name="upwd" title="密码"/>
<br>
<input type="submit" value="登录">
</form>
<form action="/fromRegister" method="post">
<h3>Form注册页</h3>
<br/>
账号:
<input type="text" name="uname" title="姓名"/>
<br/>
密码:
<input type="text" name="upwd" title="密码"/>
<br>
<input type="submit" value="注册">
</form>
<form action="/fromSelect" method="post">
<h3>from查询数据</h3>
<br>
<input type="submit" value="from查询ALLUser数据">
</form>
</div>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/loginh.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
loginh.css
*{
padding: 0px;
margin: 0px;
}
.loginbody {
width: 100%;
height: 50%;
}
.logindata {
width: 500px;
height: 200px;
margin: 20px auto;
text-align: center;
border: 3px inset seagreen;
}
loginh.js (不完整、后续继续开发)
$(document).ready(
$("#login").click = function () {
console.log("登录处理")
var uname = $("#uname").val();
var upwd = $("#upwd").val();
var sendMsg = {
uname: uname,
upwd: upwd
};
console.log("登录处理请求信息：" + JSON.stringify(sendMsg));
$.ajax({
url:"",
type:"",
data:JSON.stringify(sendMsg),
contentType:"",
success:function (json) {
var resCode = json.rescode;
var resDesc = json.resdesc;
var ext = json.ext;
if(resCode==00){
alert("登录成功");
}else{
alert(resCode+resDesc);
}
},
error:function (xmlhttp,errorText) {
}
});
},
$("#register").click = function () {
console.log("登录处理");
},
$("select").click = function () {
console.log("登录处理");
}
)
三、启动测试查询
启动Tomcat
可能会遇到css、js拦截日志系那是404
需要做如下配置：
在applicationContext.xml中配置
beans体中
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources/ directory -->
<mvc:resources mapping="/css/**" location="/WEB-INF/css/"/>
<mvc:resources mapping="/js/**" location="/WEB-INF/js/"/>
<!--静态资源访问-->
点击后返回数据接收成功了！
下一节，记录数据Model的学习记录，最后一节将整体拼接逻辑。
