sprintboot-web+angularjs+jdbc
这里介绍一个springboot项目的搭建过程，并结合springboot-jdbc获取数据，angularjs展示数据。
环境搭建
-
使用Idea新建springboot项目
项目建立的时候选择springboot模板；
maven配置文件pom.xml中需要引入：spring-boot-starter-web,参见：<?xml version="1.0" encoding="UTF-8"?>4.0.0 com.yihengliu angularjs_demo 0.0.1-SNAPSHOT jar angularjs_demo Demo project for Spring Boot org.springframework.boot spring-boot-starter-parent 1.5.9.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin -
新建项目结构
angularjs_demo/
├── pom.xml
└── src
├── main
│ ├── java
│ │ └── com
│ │ └── yihengliu
│ │ └── angularjs_demo
│ │ ├── AngularjsDemoApplication.java
│ │ ├── controller
│ │ ├── dao
│ │ ├── model
│ │ └── service
│ └── resources
│ ├── application.properties
│ ├── static
│ | ├── css
│ | └── js
| └── templates
└── test
├── java
│ └── com
│ └── yihengliu
│ └── angularjs_demo
│ └── AngularjsDemoApplicationTests.java
└── resources
-
编写controller代码
-
RestController
返回值字符串被直接传送到浏览器并显示给用户。package com.yihengliu.angularjsdemo.controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; /** * 访问controller * * @author liucheng * @version 0.1 * @since 0.1 2018-01-22 上午11:49 **/ @RestController @RequestMapping("/server") public class RestRequestController { @RequestMapping("/index") public String method() { return "Index Page"; } @RequestMapping("/users/{username}") public String userProfile(@PathVariable("username") String username) { return String.format("user %s", username); } @RequestMapping("/posts/{id}") public String post(@PathVariable("id") int id) { return String.format("post %d", id); } @RequestMapping(value = "/login", method = RequestMethod.GET) public String loginGet() { return "Login Page"; } @RequestMapping(value = "/login", method = RequestMethod.POST) public String loginPost() { return "Login Post Request"; } } -
Controller
使用模板返回使用Thymeleaf模板引擎渲染后的HTML代码。
引入依赖：org.springframework.boot spring-boot-starter-thymeleaf
controller编写：
```java package com.yihengliu.angularjsdemo.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; /** * 普通controller * * @author liucheng * @version 0.1 * @since 0.1 2018-01-22 下午1:42 **/ @Controller public class HelloController { @RequestMapping("/hello/{name}") public String hello(@PathVariable("name") String name, Model model) { model.addAttribute("name", name); return "hello"; } } ```html页面：
```htmlGetting started: Serving Web Content ``` -
引入JDBC + angularjs
准备
-
创建表
CREATE TABLE `t_user` ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(20) NOT NULL, password VARCHAR(20) ); -
修改pom.xml
org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-devtools true org.springframework.boot spring-boot-starter-jdbc mysql mysql-connector-java commons-dbcp commons-dbcp
代码编写
User.java model
package com.yihengliu.angularjsdemo.model;
/**
* 用户类
*
* @author liucheng
* @version 0.1
* @since 0.1 2018-01-22 下午3:28
**/
public class User {
private Integer Id;
private String name;
private String password;
public Integer getId() {
return Id;
}
public void setId(Integer id) {
Id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
UserDao.java
package com.yihengliu.angularjsdemo.dao;
import com.yihengliu.angularjsdemo.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.support.rowset.SqlRowSet;
import org.springframework.stereotype.Repository;
import java.math.BigInteger;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
* 用户Dao类
*
* @author liucheng
* @version 0.1
* @since 0.1 2018-01-22 下午3:29
**/
@Repository
public class UserDao {
@Autowired
private JdbcTemplate jdbcTemplate;
public List findAll() {
List list = new ArrayList<>();
String sql = "SELECT * FROM t_user";
SqlRowSet rows = jdbcTemplate.queryForRowSet(sql, new Object[]{});
while (rows.next()) {
User user = new User();
user.setId(rows.getInt("id"));
user.setName(rows.getString("name"));
user.setPassword(rows.getString("password"));
list.add(user);
}
return list;
}
public User get(String id) {
User user = null;
String sql = "SELECT * FROM t_user WHERE ID = ?";
SqlRowSet rows = jdbcTemplate.queryForRowSet(sql, new Object[]{id});
while (rows.next()) {
user = new User();
user.setId(rows.getInt("id"));
user.setName(rows.getString("name"));
user.setPassword(rows.getString("password"));
}
return user;
}
public Integer insert(User user) {
String sql = "INSERT INTO t_user (name, password) VALUE (?, ?)";
Map tableStatus = jdbcTemplate.queryForMap("SHOW TABLE STATUS WHERE NAME='T_USER';");
jdbcTemplate.update(sql, new Object[]{user.getName(), user.getPassword()});
BigInteger id = (BigInteger) tableStatus.get("Auto_increment");
return id.intValue();
}
public void update(User user) {
String sql = "UPDATE t_user SET NAME = ?, PASSWORD = ? WHERE ID = ?";
jdbcTemplate.update(sql, new Object[]{user.getName(), user.getPassword(), user.getId()});
}
public void delete(String id) {
String sql = "DELETE FROM t_user WHERE ID = ?";
jdbcTemplate.update(sql, new Object[]{id});
}
}
UserController.java
package com.yihengliu.angularjsdemo.controller;
import com.yihengliu.angularjsdemo.dao.UserDao;
import com.yihengliu.angularjsdemo.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 用户controller类
*
* @author liucheng
* @version 0.1
* @since 0.1 2018-01-22 下午3:34
**/
@Controller
public class UserController {
@Autowired
private UserDao userDao;
@GetMapping("/")
public String index() {
return "index";
}
@PostMapping("/save")
@ResponseBody
public Map save(@RequestBody User user) {
Map result = new HashMap<>(5);
if (user.getId() == null) {
user.setId(userDao.insert(user));
} else {
userDao.update(user);
}
result.put("id", user.getId());
return result;
}
@PostMapping("/get")
@ResponseBody
public User get(String id) {
return userDao.get(id);
}
@ResponseBody
@RequestMapping("/findAll")
public List findAll() {
return userDao.findAll();
}
@PostMapping("/delete")
@ResponseBody
public Map delete(String id) {
Map result = new HashMap<>(2);
userDao.delete(id);
result.put("id", id);
return result;
}
}
数据库配置
server.port=8088
# database settings
spring.datasource.initialize=false
spring.datasource.url=jdbc:mysql://192.168.6.209:3306/test
spring.datasource.username=system
spring.datasource.password=system
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
页面编写
使用tymeleaf模板+angularjs请求数据并绑定数据。
index.html
sprint boot web
sprint boot web
用户信息:
用户Id:
用户名：
密码：
用户列表：
操作
ID
用户名
密码
{{row.id}}
{{row.name}}
{{row.password}}
访文章博客
测试效果
代码下载
springboot_angularjs_jdbc