前台代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs前后台交互</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div ng-app="aaa" ng-controller="ccc">
<table align="center" border="1px" cellpadding="0" cellspacing="0"
style="width: 60%; height: 10%; text-align: center;">
<thead>
<td>id</td>
<td>姓名</td>
<td>密码</td>
</thead>
<tr ng-repeat="x in user">
<td>{{ x.id }}</td>
<td>{{ x.username }}</td>
<td>{{ x.password }}</td>
</tr>
</table>
</div>
</body>
<script>
var app=angular.module('aaa',[]);
app.controller('ccc',function ($scope,$http) {
/* $http({
method: 'GET',
url: 'http://localhost:8899/angular/user/find-by-all',
/!*headers:{'Content-Type': 'application/json',
"Access-Control-Allow-Origin": "*",
'Accept': 'application/json'}*!/
}).then(function successCallback(response) {
// 请求成功执行代码
$scope.user = response.data;
}, function errorCallback(response) {
debugger
// 请求失败执行代码
alert("请求失败")
});*/
$http.get("http://localhost:8899/angular/user/find-by-all").then( function (response) {
$scope.user = response.data;
})
})
</script>
</html>
后台代码,仅供参考
controll层
package com.it.controll;
import com.it.entity.User;
import com.it.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Date;
import java.util.List;
/**
* @Author: machi
* @Date:2019/2/22
*/
@Controller
@RequestMapping("/user")
public class UserController {
private UserService userService;
public UserController(UserService userService) {
this.userService = userService;
}
@GetMapping("/find-by-all")
@ResponseBody
public List<User> findByAll() {
/* List<User> list = userService.findByAll();
for (User user : list) {
System.out.println(user.getUsername());
}*/
return userService.findByAll();
}
}
mapper层
package com.it.mapper;
import com.it.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/**
* @Author: machi
* @Date:2019/2/21
*/
@Mapper
public interface UserMapper{
/**
*
* @return
*/
@Select("SELECT * from user")
public List<User> findByAll();
}
serviceImpl层
package com.it.service.impl;
import com.it.entity.User;
import com.it.mapper.UserMapper;
import com.it.service.UserService;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @Author: machi
* @Date:2019/2/21
*/
@Service
public class UserServiceImpl implements UserService {
private UserMapper userMapper;
public UserServiceImpl(UserMapper userMapper){
this.userMapper=userMapper;
}
@Override
public List<User> findByAll() {
System.out.println(userMapper);
return userMapper.findByAll();
}
}
service层
package com.it.service;
import com.it.entity.User;
import java.util.List;
/**
* @Author: machi
* @Date:2019/2/21
*/
public interface UserService {
/**
*
* @return
*/
public List<User> findByAll();
}
实体层
package com.it.entity;
import javax.persistence.*;
import java.io.Serializable;
/**
* @Author: machi
* @Date:2019/2/21
*/
@Entity
@Table(name = "user")
public class User implements Serializable {
@GeneratedValue(strategy = GenerationType.AUTO)//主键生成策略
@Id
private int id;
@Column(name = "username")
private String username;
@Column(name = "password")
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
application.yml 文件
server:
port: 8081
servlet:
context-path: /angular
spring:
datasource:
url: jdbc:mysql://localhost:3306/test
driver-class-name: com.mysql.jdbc.Driver
username: root
password: root
静态页面一般就用nginx代理。