1.目录结构
.
2.main.js
/**
*
*/
(function(win){
//先获取页面中baseURL数值
var baseUrl=document.getElementById('main').getAttribute('data-baseUrl');
var config={
baseUrl:baseUrl,
paths:{
json2:'lib/json2',
jquery:'lib/jquery',
underscore:'lib/underscore',
backbone:'lib/backbone',
bootstrap:'lib/bootstrap',
bootstrapDatepicker:'lib/bootstrapDatepickr-1.0.0.min'
},
shim:{
'underscore':{
exports:'_'
},
'jquery':{
exports:"$"
},
'json2':{
exports:"$"
},
'backbone':{
deps:['underscore','jquery'],
exports:'Backbone'
},
'bootstrap':{
deps:['jquery'],
exports:"$"
},
'bootstrapDatepicker':{
deps:['jquery'],
exports:"$"
}
}
};
require.config(config);
//console.log("yesy");
//设置全局参数
require(['backbone','bootstrap','underscore','router'],function(){
//require(['jquery','bootstrap'],function(){
//开启backbone的路由控制
Backbone.history.start();
});
})(window);/**
* 设置路由map表
*/
define(['backbone'],function(){
var routesMap={
'login':'statics/js/login/loginController.js',
'register':'statics/js/register/registerController.js'
}
var Router=Backbone.Router.extend({
routes:routesMap,
});
window['appRouter']=new Router();
//var appRouter=new Router();
//彻底用on route接管路由的逻辑，这里route是路由对应的value
appRouter.on('route',function(route,params){
require([route],function(glue){
if(appRouter.currentGlue && appRouter.currentGlue !== glue){
appRouter.currentGlue.onRouteChange&&appRouter.currentGlue.onRouteChange();
}
console.log(glue+"glue");
appRouter.currentGlue=glue;
glue.apply(null,params);
});
});
console.log("--------------");
console.log(appRouter.routes);
return appRouter;
});/**
* login模块的粘合剂
*/
define(['login/loginModel','login/loginView'],function(Model,View){
console.log("00000000");
var loginController=function(){
var loginModel =new Model();
//将model类注入到view层
var loginView=new View({
model:loginModel
});
loginView.render();
};
return loginController;
});/**
* login模块的模型层
*/
define([], function() {
var loginModel = Backbone.Model.extend({
defaults :{
userid:"",
username : "",
password : "",
content:"",
sex:"",
birthday:"",
age:"",
registerday:""
}
/* function() {
return {
userid:"",
username : "",
password : "",
content:"",
sex:"",
birthday:"",
age:"",
registerday:""
};
}*/
});
return loginModel;
})5.loginView
/**
*
*/
define(['login/loginView'],function(tpl){
var loginView=Backbone.View.extend({
el:$('body'),
events:{
'click #loginBtn':'login'
},
initialize:function(){},
render:function(){
var loginModel=this.model;
/*
* this.$el.html(_.template(tpl,{
* username:loginModel.get('username'),
* password:loginModel.get('password') }));
*/
},
// 登录按钮点击函数
login:function(e){
var username1=$("#username").val();
var password2=$("#password").val();
var loginModel = this.model;
// 将用户名和密码注入model类
loginModel.set({
username:username1,
password:password2
});
Backbone.ajax({
// 登录的URL地址
url:"login",
data:{
userinfo:JSON.stringify(loginModel)
},
type:"post",
success:function(resp){
console.log("+++++++++++这是登录");
if(resp=="success"){
alert("登录成功");
window.location.href="toRegister#register";
}else{
alert("登录失败，请重试！");
}
},
error:function(resp){
console.log(resp.responseText);
alert("登录失败，请重试！");
//;
}
});
}
});
return loginView;
})<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入bootstrap样式文件 -->
<link type="text/css" rel="stylesheet"
href="statics/css/bootstrap/css/bootstrap.css">
<!-- 设置当前页面index被requirejs接管，同时设置main.js为app的主入口 -->
<script data-baseurl="statics/js" data-main="statics/js/main.js"
src="statics/js/lib/require.js" id="main"></script>
</head>
<body>
<a href="#login" id="login"></a>
<div class="container" style="margin-top: 100px" id="app-body">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
<strong>欢迎登录</strong>
</h3>
</div>
<div class="panel-body">
<form role="form" method="POST">
<fieldset>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"> <i
class="glyphicon glyphicon-user"></i>
</span> <input class="form-control" id="username" placeholder="用户名"
name="username" type="text" autofocus>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"> <i
class="glyphicon glyphicon-lock"></i>
</span> <input class="form-control" id="password" placeholder="密码"
name="password" type="password" value="">
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-lg btn-primary btn-block"
id="loginBtn" value="登 录">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("login").dispatchEvent(e);
}
</script>
</html>5.后台controller层
/**
*
*/
package com.jit.comic.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.jit.comic.model.User;
import com.jit.comic.service.UserService;
import net.sf.json.JSONObject;
/**
* @author suewong
* 上午11:13:49
* @param
*since 1.0
*/
@Controller
public class UserController {
@Autowired
private UserService userservice;
private boolean flag;
ModelAndView mv=new ModelAndView();
String resp="";
@RequestMapping("/toRegister")
public ModelAndView toRegister(){
mv.setViewName("html/register");
return mv;
}
@RequestMapping("/register")
@ResponseBody
public String userRegister(String userinfo){
System.out.println(userinfo.toString());
JSONObject obj = JSONObject.fromObject(userinfo);
User user=new User();
user.setUsername(obj.getString("username"));
user.setPassword(obj.getString("password"));
try {
flag=userservice.userRegister(user);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(flag==true){
resp="success";
}else{
resp="error";
}
return resp;
}
@RequestMapping("/toLogin")
public ModelAndView toLogin(){
mv.setViewName("html/login");
return mv;
}
@RequestMapping("/login")
@ResponseBody
public String userLogin(String userinfo,HttpServletResponse response){
JSONObject obj = JSONObject.fromObject(userinfo);
User user=new User();
user.setUsername(obj.getString("username"));
user.setPassword(obj.getString("password"));
try {
flag=userservice.userLogin(user);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if(flag==true){
resp="success";
}else{
resp="error";
}
return resp;
}
}
6.源码已上传