服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Java教程 - 玩转spring boot 结合AngularJs和JDBC(4)

玩转spring boot 结合AngularJs和JDBC(4)

2020-07-22 14:33刘冬 Java教程

玩转spring boot,这篇文章主要介绍了结合AngularJs和JDBC,玩转spring boot,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

参考官方例子:http://spring.io/guides/gs/relational-data-access/

 一、项目准备

在建立mysql数据库后新建表“t_order”

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
SET FOREIGN_KEY_CHECKS=0;
 
-- ----------------------------
-- Table structure for `t_order`
-- ----------------------------
DROP TABLE IF EXISTS `t_order`;
CREATE TABLE `t_order` (
 `order_id` varchar(36) NOT NULL,
 `order_no` varchar(50) DEFAULT NULL,
 `order_date` datetime DEFAULT NULL,
 `quantity;` int(11) DEFAULT NULL,
 PRIMARY KEY (`order_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
-- ----------------------------
-- Records of t_order
-- ----------------------------

修改pom.xml

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
 
  <groupId>com.github.carter659</groupId>
  <artifactId>spring04</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>
 
  <name>spring04</name>
  <url>http://maven.apache.org</url>
 
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.2.RELEASE</version>
  </parent>
 
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>
 
  <dependencies>
 
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
    </dependency>
 
 
  </dependencies>
 
  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

二、编写类文件:

修改App.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.github.carter659.spring04;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
/**
 * 博客出处:http://www.cnblogs.com/GoodHelper/
 *
 * @author 刘冬
 *
 */
@SpringBootApplication
public class App {
 
  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }
}

新建数据载体类文件“Order.java”

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.github.carter659.spring04;
 
import java.util.Date;
/**
 * 博客出处:http://www.cnblogs.com/GoodHelper/
 * @author 刘冬
 *
 */
public class Order {
  public String id;
  public String no;
  public Date date;
  public int quantity;
 
  /**
   * 省略 get set
   */
}

新建数据持久层类“OrderDao.java”

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package com.github.carter659.spring04;
 
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
 
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;
 
/**
 * 博客出处:http://www.cnblogs.com/GoodHelper/
 * @author 刘冬
 *
 */
@Repository
public class OrderDao {
 
  @Autowired
  private JdbcTemplate jdbcTemplate;
 
  public List<Order> findAll() {
    List<Order> list = new ArrayList<>();
    String sql = " select * from t_order ";
    SqlRowSet rows = jdbcTemplate.queryForRowSet(sql, new Object[] {});
    while (rows.next()) {
      Order order = new Order();
      list.add(order);
      order.id = rows.getString("order_id");
      order.no = rows.getString("order_no");
      order.date = rows.getDate("order_date");
      order.quantity = rows.getInt("quantity");
    }
    return list;
  }
 
  public Order get(String id) {
    Order order = null;
    String sql = " select * from t_order where order_id = ? ";
    SqlRowSet rows = jdbcTemplate.queryForRowSet(sql, new Object[] { id });
    while (rows.next()) {
      order = new Order();
      order.id = rows.getString("order_id");
      order.no = rows.getString("order_no");
      order.date = rows.getDate("order_date");
      order.quantity = rows.getInt("quantity");
    }
    return order;
  }
 
  public String insert(Order order) {
    String id = UUID.randomUUID().toString();
    String sql = " insert into t_order ( order_id , order_no , order_date , quantity ) values (?,?,?,?) ";
    jdbcTemplate.update(sql,
        new Object[] { id, order.no, new java.sql.Date(order.date.getTime()), order.quantity });
    return id;
  }
 
  public void update(Order order) {
    String sql = " update t_order set order_no = ? , order_date = ? , quantity = ? where order_id = ? ";
    jdbcTemplate.update(sql,
        new Object[] { order.no, new java.sql.Date(order.date.getTime()), order.quantity, order.id });
  }
 
  public void delete(String id) {
    String sql = " delete from t_order where order_id = ? ";
    jdbcTemplate.update(sql, new Object[] { id });
  }
}

其中对数据库的操作,顾名思义:

findAll-->查询所有数据

get-->通过id获取数据

insert-->插入数据

update-->修改数据

delete-->删除数据

新建控制器“MainController.java”

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package com.github.carter659.spring04;
 
import java.util.HashMap;
import java.util.Map;
 
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.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.mysql.jdbc.StringUtils;
 
@Controller
public class MainController {
 
  @Autowired
  private OrderDao orderDao;
 
  @GetMapping("/")
  public String index() {
    return "index";
  }
 
  @PostMapping("/save")
  public @ResponseBody Map<String, Object> save(@RequestBody Order order) {
    Map<String, Object> result = new HashMap<>();
    if (StringUtils.isNullOrEmpty(order.id))
      order.id = orderDao.insert(order);
    else {
      orderDao.update(order);
    }
    result.put("id", order.id);
    return result;
  }
 
  @PostMapping("/get")
  public @ResponseBody Object get(String id) {
    return orderDao.get(id);
  }
 
  @PostMapping("/findAll")
  public @ResponseBody Object findAll() {
    return orderDao.findAll();
  }
 
  @PostMapping("/delete")
  public @ResponseBody Map<String, Object> delete(String id) {
    Map<String, Object> result = new HashMap<>();
    orderDao.delete(id);
    result.put("id", id);
    return result;
  }
}

三、新建thymeleaf模板

新建文件“src/main/resources/templates/index.html”

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>玩转spring boot——结合JDBC</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
  /*<![CDATA[*/
  var app = angular.module('app', []);
  app.controller('MainController', function($rootScope, $scope, $http) {
 
    $scope.data = {};
    $scope.rows = [];
 
    //添加
    $scope.add = function() {
      $scope.data = {
        no : 'No.1234567890',
        quantity : 100,
        'date' : '2016-12-30'
      };
    }
 
    //编辑
    $scope.edit = function(id) {
      for ( var i in $scope.rows) {
        var row = $scope.rows[i];
        if (id == row.id) {
          $scope.data = row;
          return;
        }
      }
    }
 
    //移除
    $scope.remove = function(id) {
      for ( var i in $scope.rows) {
        var row = $scope.rows[i];
        if (id == row.id) {
          $scope.rows.splice(i, 1);
          return;
        }
      }
    }
 
    //保存
    $scope.save = function() {
      $http({
        url : '/save',
        method : 'POST',
        data : $scope.data
      }).success(function(r) {
        //保存成功后更新数据
        $scope.get(r.id);
      });
    }
 
    //删除
    $scope.del = function(id) {
      $http({
        url : '/delete?id=' + id,
        method : 'POST',
      }).success(function(r) {
        //删除成功后移除数据
        $scope.remove(r.id);
      });
    }
 
    //获取数据
    $scope.get = function(id) {
      $http({
        url : '/get?id=' + id,
        method : 'POST',
      }).success(function(data) {
        for ( var i in $scope.rows) {
          var row = $scope.rows[i];
          if (data.id == row.id) {
            row.no = data.no;
            row.date = data.date;
            row.quantity = data.quantity;
            return;
          }
        }
        $scope.rows.push(data);
      });
    }
 
    //初始化载入数据
    $http({
      url : '/findAll',
      method : 'POST'
    }).success(function(rows) {
      for ( var i in rows) {
        var row = rows[i];
        $scope.rows.push(row);
      }
    });
  });
  /*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">
  <h1>玩转spring boot——结合JDBC</h1>
  <h4>
    <a href="http://www.cnblogs.com/GoodHelper/">from 刘冬的博客</a>
  </h4>
  <input type="button" value="添加" ng-click="add()" />
  <input type="button" value="保存" ng-click="save()" />
  <br />
  <br />
  <h3>清单信息:</h3>
  <input id="id" type="hidden" ng-model="data.id" />
  <table cellspacing="1" style="background-color: #a0c6e5">
    <tr>
      <td>编号:</td>
      <td><input id="no" ng-model="data.no" /></td>
      <td>日期:</td>
      <td><input id="date" ng-model="data.date" /></td>
      <td>数量:</td>
      <td><input id="quantity" ng-model="data.quantity" /></td>
    </tr>
  </table>
 
  <br />
  <h3>清单列表:</h3>
  <table cellspacing="1" style="background-color: #a0c6e5">
    <tr
      style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold">
      <td>操作</td>
      <td>编号</td>
      <td>日期</td>
      <td>数量</td>
    </tr>
    <tr ng-repeat="row in rows" bgcolor='#F4FAFF'>
      <td><input ng-click="edit(row.id)" value="编辑" type="button" /><input
        ng-click="del(row.id)" value="删除" type="button" /></td>
      <td>{{row.no}}</td>
      <td>{{row.date}}</td>
      <td>{{row.quantity}}</td>
    </tr>
  </table>
 
  <br />
  <a href="http://www.cnblogs.com/GoodHelper/">点击访问原版博客</a>
</body>
</html>

使用angularjs的ajax调用spring boot mv的后台方法。

四、数据库连接

新建“src/main/resources/application.properties”文件

?
1
2
3
4
5
spring.datasource.initialize=false
spring.datasource.url=jdbc:mysql://localhost:3306/demo
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

完整的结构为:

玩转spring boot 结合AngularJs和JDBC(4)

五、运行效果

在浏览器输入“http://localhost:8080/”

玩转spring boot 结合AngularJs和JDBC(4)

添加数据:

玩转spring boot 结合AngularJs和JDBC(4)

保存新数据:

玩转spring boot 结合AngularJs和JDBC(4)

玩转spring boot 结合AngularJs和JDBC(4)

编辑数据:

玩转spring boot 结合AngularJs和JDBC(4)

删除数据:

玩转spring boot 结合AngularJs和JDBC(4)

删除完成的效果:

玩转spring boot 结合AngularJs和JDBC(4)

代码:https://github.com/carter659/spring-boot-04.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://www.cnblogs.com/GoodHelper/p/6224475.html

延伸 · 阅读

精彩推荐