目标
- 独立于服务器端语言的HTML页面, 使用jQuery实现的Ajax, 使用bootstrap进行表格的美化
- Spring MVC实现的接收json格式的Ajax调用, 并返回json格式的数据
- Spring依赖注入, 自动创建JdbcTemplate和UserDao对象, 并进行变量初始化
- Spring JdbcTemplate访问数据库
模型
模型文件model/user.java内容如下:
package model;
public class User {
private String userID;
private int age;
public User() {
}
public User(String userID, int age) {
this.userID = userID;
this.age = age;
}
public String getUserID() {
return userID;
}
public void setUserID(String userID) {
this.userID = userID;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
视图
网页文件在项目中为p/index.html， 在浏览器中会通过后面的spring配置， 映射为view/index.html . 文件内容如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function UserAddOnClicked() {
var user = {};
user['userID'] = $("input[name='userID']").val();
user['age'] = $("input[name='age']").val();
$.ajax({
type: "POST",
url: "../user/add",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(user),
success: function (data) {
$('tbody').html("");
for (var i = 0; i < data.length; i++) {
$('tbody').append("<tr>" +
"<td>" + data[i].userID + "</td>" +
"<td>" + data[i].age + "</td>" +
"</tr>");
}
},
error: function (data) {
console.log("error...");
console.log(data);
}
});
}
</script>
</head>
<body>
<h1>增加账户测试页面</h1>
userID<input type="text" name="userID" value="" />
age<input type="text" name="age" value="" />
<input type="button" value="增加账户" onclick="UserAddOnClicked()" />
<table class="table table-striped">
<caption>全部账户信息</caption>
<thead>
<tr>
<th>userID</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
运行项目后的开始页面index.html可以用客户端跳转的方式转到view/index.html
开始页面index.html的内容如下：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta http-equiv="refresh" content="0; url=view/index.html">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
</body>
</html>
控制器
Spring会用自动调用@Bean标注的方法得到一个对象, 然后自动注入用@Autowired标注的成员变量. 也就是, 这里的userDao由Spring负责自动初始化.
需要下载三个jackson的jar文件, 加入到项目中, 用于处理json数据. 下载链接https://pan.baidu.com/s/1wqEz-QSfvwL_WB18z0B_uA
控制器文件controller/UserRestController.java内容如下:
package controller;
import dao.UserDao;
import java.util.List;
import model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/user")
public class UserRestController {
@Autowired
UserDao userDao;
@RequestMapping(value = "/add", produces = {"application/json;charset=UTF-8"})
public List<User> addUser(@RequestBody User user) {
userDao.add(user);
List<User> users = userDao.getAll();
return users;
}
}
数据访问层
Spring会用自动调用@Bean标注的方法得到一个对象, 然后自动注入用@Autowired标注的成员变量.也就是, 这里的jdbcTemplate由Spring负责自动初始化.
数据访问层文件dao/UserDao.java内容如下:
package dao;
import java.util.List;
import model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
public class UserDao {
@Autowired
private JdbcTemplate jdbcTemplate;
public List<User> getAll() {
List<User> users = this.jdbcTemplate.query("select * from person", (rs, rownum) -> {
return new User(rs.getString("userID"), rs.getInt("age"));
});
return users;
}
public void add(User user) {
String sql = "INSERT INTO APP.PERSON (USERID, AGE) VALUES (?, ?)";
this.jdbcTemplate.update(sql, user.getUserID(), user.getAge());
}
public JdbcTemplate getJdbcTemplate() {
return jdbcTemplate;
}
public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
this.jdbcTemplate = jdbcTemplate;
}
public void createTable() {
String sql = "CREATE TABLE person\n"
+ "(\n"
+ "userID varchar(255),\n"
+ "age int,\n"
+ "CONSTRAINT pk_userID PRIMARY KEY (userID)"
+ ")";
this.jdbcTemplate.execute(sql);
}
}
Spring配置文件
配置文件config/SpringMvcInitializer,java内容如下:
package config;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRegistration;
import org.springframework.web.WebApplicationInitializer;
import org.springframework.web.context.support.AnnotationConfigWebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
public class SpringMvcInitializer implements WebApplicationInitializer { //实现这个接口是关键, 与类名无关.
@Override
public void onStartup(ServletContext sc) throws ServletException {
AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();
context.register(AppConfig.class); //自己定义的AppConfig类.
context.setServletContext(sc);
ServletRegistration.Dynamic servlet = sc.addServlet("dispatcher", new DispatcherServlet(context));
servlet.addMapping("/");
servlet.setLoadOnStartup(1);
}
}
配置文件config/AppConfig.java内容如下:
package config;
import dao.UserDao;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"controller"})
public class AppConfig extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/view/**").addResourceLocations("/p/"); //静态资源映射
registry.addResourceHandler("/index.html").addResourceLocations("/index.html"); //静态资源映射
}
@Bean
public JdbcTemplate jdbcTemplate() {
DriverManagerDataSource dataSource = new DriverManagerDataSource();
dataSource.setDriverClassName("org.apache.derby.jdbc.ClientDriver");
dataSource.setUrl("jdbc:derby://localhost:1527/sample");
dataSource.setUsername("app");
dataSource.setPassword("app");
return new JdbcTemplate(dataSource);
}
@Bean
UserDao userDao() {
return new UserDao();
}
}
Spring会用自动调用@Bean标注的方法得到一个对象, 然后自动注入用@Autowired标注的成员变量.也就是, 这里的jdbcTemplate()由Spring负责调用得到一个JdbcTemplate类型的对象; userDao()由Spring负责调用得到一个UserDao 类型的对象. 用于为标注用@Autowired标注的成员变量初始化.
项目结构
运行结果
运行后的界面
插入数据
插入中文数据
特别提示: 项目运行前, 需要启动JavaDB数据库.
整个项目文件下载https://pan.baidu.com/s/1UX2Dp9rNfLYeZY-m1KPpkQ