0
私は開発中ですSpring MVC AngularJS例です。私は単にリンクからコードを取った：https://github.com/sivaprasadreddy/sivalabs-blog-samples-code/tree/master/springmvc-angular-crud。私は[email protected]/sivaを使ってログインできますが、ログアウト、ユーザープロフィール、設定などにアクセスしているときは何も起こっていません。ここに欠けているものをご案内ください。Spring MVC AngularJS JPAの例 - Webサービスを呼び出すことができません
login.jspを：
<!DOCTYPE html>
<%@include file="taglib.jsp" %>
<html>
<head>
<title>Login</title>
<base href="${rootUrl}">
<%@ include file="assets.jspf" %>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${param.error != null}">
<div class="alert alert-danger">
Invalid UserName and Password.
</div>
</c:if>
<c:if test="${param.logout != null}">
<div class="alert alert-success">
You have been logged out.
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Login Form</h2>
<form:form id="loginForm" method="post" action="login" modelAttribute="user"
class="form-horizontal" role="form" cssStyle="width: 800px; margin: 0 auto;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" class="form-control" placeholder="UserName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
New User? <a href="register">Register</a>
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
register.jsp
<!DOCTYPE html>
<%@include file="taglib.jsp"%>
<html>
<head>
<title>Create User</title>
<script type="text/javascript">
$(document).ready(function() {
$("#registrationForm").submit(function(event) {
var userName = $.trim($("#userName").val());
var password = $.trim($("#password").val());
var firstName = $.trim($("#firstName").val());
var email = $.trim($("#email").val());
if(userName == '' || password == '' || firstName == '' || email == ''){
alert("Please enter all mandatory fields");
event.preventDefault();
return false;
}
});
});
</script>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${ERROR != null }">
<div class="alert alert-danger">
<p>${ERROR}
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Registration Form</h2>
<form:form id="registrationForm" method="post" action="register"
modelAttribute="user" cssStyle="width: 800px; margin: 0 auto;"
class="form-horizontal" role="form">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="userName" name="userName"
class="form-control" placeholder="UserName" />
<form:errors path="userName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password"
class="form-control" placeholder="Password" />
<form:errors path="password" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email*</label>
<div class="col-sm-4">
<input type="text" id="email" name="email" class="form-control"
placeholder="Email" />
<form:errors path="email" />
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">FirstName*</label>
<div class="col-sm-4">
<input type="text" id="firstName" name="firstName"
class="form-control" placeholder="FirstName" />
<form:errors path="firstName" />
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-4">
<input type="text" id="lastName" name="lastName"
class="form-control" placeholder="LastName" />
<form:errors path="lastName" />
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">Date Of
Birth</label>
<div class="col-sm-4">
<input type="text" id="dob" name="dob" class="form-control"
placeholder="dd-MM-yyyy" />
<form:errors path="dob" cssClass="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
Already Registered? <a href="login">Login</a>
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
のwelcome.jsp：
<!DOCTYPE html>
<%@ include file="taglib.jsp" %>
<html lang="en" ng-app="usersApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring MVC Angular Tutorials : Forum</title>
<%@ include file="assets.jspf"%>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${rootUrl}home">My DashBoard</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> My Account </a>
<ul class="dropdown-menu dropdown-user">
<li><a href="${rootUrl}myAccount"><i
class="fa fa-user fa-fw"></i> User Profile</a></li>
<li><a href="${rootUrl}changePwd"><i
class="fa fa-gear fa-fw"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="${rootUrl}logout">Logout</a></li>
</ul> <!-- /.dropdown-user --></li>
<li><a href="${rootUrl}logout">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 sidebar">
<div class="list-group">
<span class="list-group-item active">Personal Data</span> <a
href="#phonebook" class="list-group-item">PhoneBook</a> <a
href="#events" class="list-group-item">Events</a> <span
class="list-group-item active">Settings</span> <a href="#"
class="list-group-item">Configuration</a>
</div>
</div>
<div class="col-md-9 " ng-controller="UserCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="20px;">Id</th>
<th width="100px;">FirstName</th>
<th width="100px;">LastName</th>
<th width="150px;">Email</th>
<th width="100px;">Edit/Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userList">
<td>{{user.id}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
<td><span style="cursor: pointer;"
class="glyphicon glyphicon-pencil"
ng-click="handleEditUser(user)"></span> <span
style="cursor: pointer;" class="glyphicon glyphicon-trash"
ng-click="handleDeleteUser(user)"></span></td>
</tr>
</tbody>
</table>
<div class="panel panel-default">
<div class="panel-heading">Edit User</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputId" class="col-sm-2 control-label">Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputId"
placeholder="Id" ng-model="editUser.id">
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-sm-2 control-label">FirstName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFirstName"
placeholder="FirstName" ng-model="editUser.firstName">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLastName"
placeholder="LastName" ng-model="editUser.lastName">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail"
placeholder="Email" ng-model="editUser.email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default"
ng-click="handleUpdateUser(editUser)">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ContactController.java
@RestController
@RequestMapping("https://stackoverflow.com/users/{userId}/contacts/")
public class ContactController{
@Autowired
private UserService userService;
@RequestMapping(value="", method=RequestMethod.GET)
public List<Contact> findAll(@PathVariable("userId") int userId) {
return userService.findUserContacts(userId);
}
@RequestMapping(value="/{contactId}", method=RequestMethod.GET)
public Contact findContact(@PathVariable("userId") int userId, @PathVariable("contactId") int contactId) {
return userService.findUserContact(userId, contactId);
}
@RequestMapping(value="", method=RequestMethod.POST)
public Contact createContact(@PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
@RequestMapping(value="", method=RequestMethod.PUT)
public Contact updateContact(@PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
@RequestMapping(value="/{contactId}", method=RequestMethod.DELETE)
public void deleteContact(@PathVariable("userId") int userId, @PathVariable("contactId") int contactId) {
userService.deleteUserContact(userId, contactId);
}
}
UserController.java
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping(value = "login", method = RequestMethod.GET)
public String loginForm(Model model){
model.addAttribute("user", new User());
return "login";
}
@RequestMapping(value = "/register", method = RequestMethod.GET)
public String registrationForm(Model model){
model.addAttribute("user", new User());
return "register";
}
@RequestMapping(value = "/register", method = RequestMethod.POST)
public String handleRegistration(@ModelAttribute("user") User user, BindingResult errors, Model model){
if (errors.hasErrors()) {
return "register";
}
try {
userService.createUser(user);
return "redirect:login";
} catch (Exception e) {
e.printStackTrace();
model.addAttribute("ERROR", e.getMessage());
return "register";
}
}
}
<script type="text/javascript" src="${rootUrl}resources/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="${rootUrl}resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angularjs/angular.js"></script>
<script src="resources/angularjs/angular-resource.js"></script>
<script src="${rootUrl}resources/js/controllers.js"></script>
<script src="${rootUrl}resources/js/services.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/css/styles.css"/>
<script type="text/javascript" src="${rootUrl}resources/js/app.js"></script>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<c:url var="rootUrl" value="/"/>
あなたはどんな情報が必要な場合は私に知らせてください。 UIの スクリーンショット：私はそれが何も理由を与えない任意のタブを呼び出す場合 
？ 
また、ユーザープロファイル、設定タブは機能しません。どうして ？ –
同じ場合 – LynAs