Index.html的加载
html的加载:
静态加载:直接请求xxx.html,xxx.html文件是提前写好的
动态加载:
load("xxx.html");//执行此语句的时候,才加载xxx.html
js的加载:
静态加载:<script src="xxx.js"></script>
前提:加载html的时候,script脚本也加载,html加载完毕后才开始执行xxx.js
动态加载:
load("xxx.html",function(){
$.getScript("xxx.js");//必须xxx.html加载完毕后才加载xxx.js
});
$.getScript("xxx.js");//加载xxx.js
写业务流:
1.确认js文件是否正确加载并执行
$(function(){
alert("login.js");
console.log("login.js");
});
2.确认js的方法是否执行
alert("test");
console.log("test");
因为,js方法中的代码有任何错误,可能会导致整个js方法不执行
把整个方法中的代码全部剪切出去放在某个文本文件中,再确认方法是否
执行,剩下的是逐行排错
js的排错三种方法
alert("test");
console.log("test");
js的debug,先阶段所有的浏览器都支持js的debug
只能debug静态加载的js,动态的js无法debug
3.确认js方法中的ajax提交是否能请求到controller的方法
在controller的某个方法中写System.out.println("test");
4.确认在controller方法中获取页面提交过来的数据
System.out.println(loginName+" "+password);
5.根据页面提交过来的数据调用具体的业务操作(建议最后做)
a.controller的方法调用业务方法
b.业务方法调用dao(mybatis,springjdbc,jdbc)
c.dao访问数据库
d.业务方法得到dao的返回结果
e.controller的方法得到业务的返回结果
6.把业务的返回结果,通过jackson转换成json发送给js端
7.js端获取到服务端返回的json结果,解析json
8.根据json的数据,做响应的dom编程
登录部分:
login.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="author" content="Robin Liu">
<title>TES Login From</title>
<link rel="icon" href="favicon.ico">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 登录界面的CSS -->
<link href="css/login.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/common/jquery-1.11.3.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript -->
<script src="js/common/bootstrap.min.js"></script>
<!-- 自定义的js -->
<script type="text/javascript" src="js/basepath.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
<a class="navbar-brand" href="#"><strong>易学系统</strong></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
</div>
</nav>
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputName" class="sr-only">账号</label>
<input type="text" id="inputName" class="form-control" placeholder="账号" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
<div class="checkbox">
<label>
<input id="rememberId" type="checkbox" value="记住账号"> 记住账号
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</div> <!-- /container -->
</body>
</html>
login.js
//window.onload=function(){}
$(function(){
//alert("login.js");
// 从cookie中寻找有key为loginName的cookie的值,
//如果有,就放在用户名的文本框中,没有就给框中放一个空字符串
$("form input[type=text]").val(getCookie("loginName"));
console.log("login.js");
$("form").submit(function(){
return login_form();//return false,不让页面的form表单提交
});
});
//登录方法
function login_form(){
console.log("login_form");
//获取登录的用户名和密码
var lName=$("form input[type=text]").val();
var lpwd=$("form input[type=password]").val();
var remember=$("#rememberId").get(0).checked;
//console.log(lName+" "+lpwd+" "+remember);
alert(lName+" "+lpwd+" "+remember);
//发送异步ajax请求去服务器
$.ajax({
url:basePath+"user/login",
type:"get",
data:{"loginName":lName,"password":lpwd},
dataType:"json",
success:function(result){
//得到服务器返回的json数据result
//根据json数据做dom编程
if(result.status==1){
if(remember){
//要求记录账号,记录在cookie中
//添加cookie loginName=wt_zss@126.com 存活5个小时
addCookie("loginName",lName,5)
}
window.location.href="index.html";
}else if(result.status==0){
alert(result.message)
}
},
error:function(){
alert("请求失败!");
}
});
return false;
}
UserController.java
package com.tarena.controller;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.tarena.entity.User;
import com.tarena.service.UserService;
import com.tarena.vo.Result;
@Controller
@RequestMapping("user/")
public class UserController {
@Resource(name="userService")
private UserService userService;
@RequestMapping(value="login",method=RequestMethod.GET)
@ResponseBody
public Result login(String loginName,
String password,
HttpSession session) {
System.out.println(loginName+" "+password);
Result result=new Result();
User user=new User();
user.setLoginName(loginName);
user.setPassword(password);
//调用具体的登录业务
result=this.userService.login(user);
if(result.getStatus()==1) {
session.setAttribute("loginName", loginName);
}
return result;
}
}
UserServiceImpl.java
package com.tarena.service.impl;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import com.tarena.dao.UserMapper;
import com.tarena.entity.User;
import com.tarena.service.UserService;
import com.tarena.util.PageUtil;
import com.tarena.vo.Page;
import com.tarena.vo.Result;
@Service("userService")
public class UserServiceImpl implements UserService {
@Resource(name="userMapper")//从容器中取出的是代理对象
private UserMapper userMapper;
@Resource(name="pageUtil")
private PageUtil pageUtil;
@Override
public Result login(User user) {
Result result=new Result();
String id=this.userMapper.login(user);
if(id!=null) {
result.setStatus(1);
result.setMessage("登录成功!");
}else {
result.setStatus(0);
result.setMessage("登录失败!");
}
return result;
}
@Override
public Result findRolesByPage(Page page) {
Result result=new Result();
//处理roleKeyWord的模糊关键字的的通配符
page.setRoleKeyWord(
"undefined".equals(page.getRoleKeyWord())? "%%" : "%"+page.getRoleKeyWord()+"%");
page.setPageSize(pageUtil.getPageSize());
return result;
}
}
UserMapper.java
package com.tarena.dao;
import com.tarena.entity.User;
public interface UserMapper {
/**
* 登录的操作数据库的方法
* @param user 传入的数据
* @return 数据的id
* id!=null 记录存在 登录成功
* id=null 记录不存在 登录失败
*/
public String login(User user);
}
UserMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.tarena.dao.UserMapper">
<!-- 登录 -->
<select id="login"
parameterType="User"
resultType="java.lang.String">
select
user_id
from t_user
where
user_loginname=#{loginName} and
user_password=#{password}
</select>
</mapper>
登出功能:
header.html
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
<a class="navbar-brand" href="#"><strong>易学</strong></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> 首页</a></li>
<li><a href="#" data-toggle="modal" data-target="#message_dialog"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> 消息 <span class="badge">5</span></a></li>
<li><a href="#" data-toggle="modal" data-target="#editPasswd"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改密码</a></li>
<!-- <li><a href="#"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> 帮助</a></li> -->
<li><a id="logoutId" href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> 退出</a></li>
</ul>
</div>
</div>
Main.js
//@ sourceURL=main.js
$(function(){
$("#logoutId").click(function(){
//logout();
//logout1();
logout2();
});
});
//登出的方法
function logout(){
$.ajax({
url:basePath+"main/logout",
type:"get",
dataType:"json",
success:function(result){
if(result.status==1){
window.location.href="login.html";
}
},
error:function(){
alert("请求失败!");
}
});
}
function logout1(){
$.ajax({
url:basePath+"main/logout1",
type:"get",
dataType:"json",
success:function(result){
alert(result.flag);
if(result.flag=="success"){
window.location.href="login.html";
}
},
error:function(){
alert("请求失败!");
}
});
}
function logout2(){
$.ajax({
url:basePath+"main/logout2",
type:"get",
dataType:"json",
success:function(result){
alert(result.flag+" "+result.key1+" "+result.key2);
if(result.flag=="success"){
window.location.href="login.html";
}
},
error:function(){
alert("请求失败!");
}
});
}
}
MainController.java
package com.tarena.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.tarena.vo.Result;
@Controller
@RequestMapping("main/")
public class MainController {
@RequestMapping(value="logout",method=RequestMethod.GET)
@ResponseBody//依赖的是jackson
public Result logout(HttpSession session) {
System.out.println("logout");
Result result=new Result();
session.invalidate();//清空session中的所有的数据
result.setStatus(1);
return result;
}
@RequestMapping(value="logout1",method=RequestMethod.GET)
public void logout1(HttpSession session,
HttpServletResponse response) {
try {
System.out.println("logout1");
Result result=new Result();
session.invalidate();//清空session中的所有的数据
response.setContentType("text/html;charset=utf-8");
String json="{\"flag\":\"success\"}";
PrintWriter out=response.getWriter();
out.print(json);
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@RequestMapping(value="logout2",method=RequestMethod.GET)
public void logout2(HttpSession session,
HttpServletResponse response) {
try {
System.out.println("logout2");
Result result=new Result();
session.invalidate();//清空session中的所有的数据
Map<String,String> map=new HashMap<String,String>();
map.put("flag", "success");
map.put("key1","value1");
map.put("key2","value2");
//借助fastjson工具把map集合对象转换成json字符串
String json=JSON.toJSONString(map);
System.out.println(json);
PrintWriter out=response.getWriter();
out.print(json);
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
Pom.xml
<!-- 阿里巴巴的fastjson工具 对象和json互转的工具 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.17</version>
</dependency>
补充内容 :
escape(字符串);把字符串数据统一成一种码制
比如 escape("aa w3c bb!"); //结果:aa20%w3c20%bb21%
unescape("aa20%w3c20%bb21%");//aa w3c bb!
Js中的null或"",这样的数据不能提交给服务器,服务器不接收null和""
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
