<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>Internet Movıe Database - Search, Edit, Update, Delete, Add</title>
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css'>
<link rel='stylesheet prefetch' href='https://rawgit.com/iamisti/mdDataTable/master/dist/md-data-table-style.css'>
<style>
html, body{
background: #DDDDDD;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body>
<div ng-app="exampleApp" ng-controller="ExampleController" layout-margin>
<md-toolbar layout="row" layout-align="left center" layout-padding>
<h1 class="md-title">Internet Movie Database</h1>
</md-toolbar>
<form name="userForm">
<md-input-container>
<label>title</label>
<input name="title" ng-model="title" required md-maxlength="20" minlength="2">
<div ng-messages="userForm.title.$error" ng-show="userForm.title.$dirty">
<div ng-message="required">This is required!</div>
<div ng-message="md-maxlength">That's too long!</div>
<div ng-message="minlength">That's too short!</div>
</div>
</md-input-container>
<md-input-container>
<label>actor</label>
<input name="actor" ng-model="actor" required md-maxlength="200" minlength="2">
<div ng-messages="userForm.actor.$error" ng-show="userForm.actor.$dirty">
<div ng-message="required">This is required!</div>
<div ng-message="md-maxlength">That's too long!</div>
<div ng-message="minlength">That's too short!</div>
</div>
</md-input-container>
<md-button class="btn1" ng-click="addMovie(title,actor)">Add Movie</md-button>
</form>
<mdt-table table-card="{visible: true, title: 'Movie List'}"
selectable-rows="true"
alternate-headers="'contextual'"
sortable-columns="tableIsSortable"
selected-row-callback="selectedRowCallback(rows)">
<mdt-header-row>
<mdt-column align-rule="left">id</mdt-column>
<mdt-column align-rule="right">Name</mdt-column>
<mdt-column align-rule="right">Actors</mdt-column>
<mdt-column align-rule="right">Options</mdt-column>
</mdt-header-row>
<mdt-row ng-repeat="task in tasks"
table-row-id="task.id" md-on-select="onSelect(task)">
<mdt-cell>{{task.id}}</mdt-cell>
<mdt-cell>{{task.title}}</mdt-cell>
<mdt-cell>{{task.actor}}</mdt-cell>
<mdt-cell><md-button> Flat Button </md-button>
</mdt-cell>
</mdt-row>
</mdt-table>
<div layout="row" flex>
<md-sidenav md-is-locked-open="true">
<md-list>
<md-list-item ng-repeat="aPage in pages">
<md-button flex ng-click="selectPage(aPage)" ng-class="{'md-primary md-raised' : aPage.name === selectedPage.name }">
{{aPage.name}}
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<iframe flex scrolling='yes' ng-src='{{examplePageUrl}}' frameborder='no' allowtransparency='true' allowfullscreen='true'></iframe>
</div>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src='https://cdn.jsdelivr.net/angular-material-icons/0.6.0/angular-material-icons.min.js'></script>
<script src='https://rawgit.com/iamisti/mdDataTable/master/dist/md-data-table-templates.js'></script>
<script src='https://rawgit.com/iamisti/mdDataTable/master/dist/md-data-table.js'></script>
<script>
(function () {
'use strict';
angular.module('exampleApp', [
'ngMaterial',
'mdDataTable'
]);
angular.module('exampleApp').controller('ExampleController', function ($scope, $mdToast,$window,$http) {
$scope.addMovie=function(title,actor){
// $window.alert("ititle actor "+title+actor)
// $scope.title="title clicked "+title;
// $scope.actor="actor clicked "+actor;
// $scope.added="the movie '"+title+"' with those actor '"+actor+"' added successfully";
$http({
method: 'POST',
headers: {
"Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
},
url: 'http://localhost:8181/movies/add/'+title+"/"+actor
}).then(function successCallback() {//$window.alert("in addmoviesuccess");
// $scope.check = response.data;
// $scope.names = response.data.title;
$scope.listMovie();
});
//$window.alert("bitiste addmovie")
// $scope.listMovie();
},
$scope.onSelect = function (task) {
$window.alert("eonselect1");
}
$scope.selectedRowCallback = function (rows) {//$window.alert("in delete: "+rows.length);
//$mdToast.show($mdToast.simple().content('Deleted row id(s): ' + rows).hideDelay(3000));
//$scope.previousRow = rows;
// $scope.rows
if(rows.length>1){
$window.alert("Error! You can only delete one movie at one time");
// exit_to_app;
//$window.alert("return sonrasi");
}
else{//$window.alert("else1");
$http({
method: 'DELETE',
headers: {
"Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
"Access-Control-Allow-Origin": "*",
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
},
url: 'http://localhost:8181/movies/delete/'+rows[0]
}).then(function successCallback() {// $window.alert("in removemoviesuccess");
// $scope.listMovie();
})
} // $scope.listMovie();
};
$scope.listMovie=function(){
// var list = 1
// $window.alert("in listmovie");
$scope.check='NO';
// $scope.list="list clicked "+list;
// $window.alert(" listmovie "+list);
// $scope.listed="the movies are listing: "+list;
$http({
method: 'GET',
headers: {
"Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
"Access-Control-Allow-Origin": "*"
},
url: 'http://localhost:8181/movies/list'
}).then(function successCallback(response) { //$window.alert("in listmoviesuccess");
// $scope.check = response.data;//
console.log(response);
$scope.tasks = response.data;
// $scope.names = response.data.title;
}, function errorCallback(response) {//$window.alert("in listmovie err");
// console.log(response);
// $scope.check = response;
}
);
//$window.alert("in listmovie end");
};
$scope.listMovie();
});
exampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/movies', {
templateUrl: 'movies/main',
controller: 'todoController'
}).
when('/', {
templateUrl: 'movies/main',
controller: 'todoController'
}).
when('/movies/', {
templateUrl: 'partials/phone-detail.html',
controller: 'todoController'
}).
when('/list', {
templateUrl: 'partials/phone-deffaatail.html',
controller: 'todoController'
}).
when('/movies/list', {
templateUrl: 'partials/sss.html',
controller: 'todoController'
}).
otherwise({
redirectTo: '/phones'
});
}]);
}());
//@ sourceURL=pen.js
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</body>
</html>
这是我的主要html页面test.html。这是CRUD操作的页面。它连接到数据库进行操作。这是我的控制者：
import org.infoowl.domain.Movie;
import org.infoowl.repository.MovieRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.web.ErrorController;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import java.util.HashMap;
/**
* Created by caneraydin on 15.03.2016.
*/
@RestController
//@Controller
@RequestMapping(value = "movies")
@CrossOrigin(value = "http://localhost:63342", maxAge = 3600)
public class MovieController {
@Autowired
private MovieRepository movieRepository;
private Movie movie;
@RequestMapping("/home")
public String home(){
System.out.println("moviecontroller homeda");
return "forward:/test.html";
}
@RequestMapping(value = "/add/{name}/{actor}", method = RequestMethod.POST)
public HashMap<Movie, Long> add(@PathVariable String name, @PathVariable String actor){
System.out.println("moviecontroller addeda");
//Movie movie = new Movie("Scarface","AlPacino");
movie = new Movie(name,actor);
movieRepository.save(movie);
HashMap<Movie,Long> hash = new HashMap<Movie,Long> ();
return hash;
}
@RequestMapping(value = "/delete/{id}", method = RequestMethod.DELETE)
public HashMap<Movie, Long> delete(@PathVariable Long id ){
System.out.println("moviecontroller deleteda");
movieRepository.delete(id);
HashMap<Movie,Long> hash = new HashMap<Movie,Long> ();
return hash;
}
@RequestMapping(value = "/list", method = RequestMethod.GET)
public Iterable<Movie> list() {
System.out.println("moviecontroller listed");
return movieRepository.findAll();
}
@RequestMapping(value = "/edit/{id}/{name}/{actor}", method = RequestMethod.PUT)
public HashMap<Movie, Long> edit(@PathVariable Long id, @PathVariable String name, @PathVariable String actor){
System.out.println("moviecontroller editeda");
movieRepository.delete(id);
movie = new Movie(name,actor);
movieRepository.save(movie);
HashMap<Movie,Long> hash = new HashMap<Movie,Long> ();
return hash;
}
@RequestMapping(method = RequestMethod.GET)
public String getIndexPage() {
return "x";
}
// @RestController
//class HomeController {
// @RequestMapping("/")
// public String index() {
// return "test";
// }
// }
}
你可以在html中看到routeprovider
exampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/movies', {
templateUrl: 'movies/main',
controller: 'todoController'
}).
when('/', {
templateUrl: 'movies/main',
controller: 'todoController'
}).
when('/movies/', {
templateUrl: 'partials/phone-detail.html',
controller: 'todoController'
}).
when('/list', {
templateUrl: 'partials/phone-deffaatail.html',
controller: 'todoController'
}).
when('/movies/list', {
templateUrl: 'partials/sss.html',
controller: 'todoController'
}).
otherwise({
redirectTo: '/phones'
});
}]);
跑步后我试着去 http://localhost:8181/movies/list 它显示了json数据
http://localhost:8181/movies/仅显示x
http://localhost:8181/movies/home显示转发：/test.html
而且，要打开那个html，我点击右键并在浏览器中打开，然后转到
http://localhost:63342/InternetMovieDatabase/static/test.html 那个url显示html。
它是单页面应用程序。我刚试过像list这样的控制器URL。但是我无法管理。
资源 -静态的 --bower_components
-test.html 模板 application.properties
组织就是这样。我也将test.html复制到了模板，但没有任何改变。
这是主要的java
package org.infoowl;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.context.web.SpringBootServletInitializer;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
@Configuration
@ComponentScan
@EnableAutoConfiguration
@SpringBootApplication
public class InternetMovieDatabaseApplication extends SpringBootServletInitializer {
public static void main(String[] args) {
SpringApplication.run(InternetMovieDatabaseApplication.class, args);
}
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(InternetMovieDatabaseApplication.class);
}
}
https://github.com/caneraydinbey/InternetMovieDatabasev3
你也可以看到这里的一切。
为什么它不起作用？