一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術(shù)|正則表達(dá)式|C/C++|IOS|C#|Swift|Android|VB|R語(yǔ)言|JavaScript|易語(yǔ)言|vb.net|

服務(wù)器之家 - 編程語(yǔ)言 - Java教程 - 玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

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

玩轉(zhuǎn)spring boot,這篇文章主要介紹了結(jié)合AngularJs和JDBC,玩轉(zhuǎn)spring boot,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

 一、項(xiàng)目準(zhǔn)備

在建立mysql數(shù)據(jù)庫(kù)后新建表“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>

二、編寫(xiě)類文件:

修改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);
  }
}

新建數(shù)據(jù)載體類文件“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
   */
}

新建數(shù)據(jù)持久層類“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 });
  }
}

其中對(duì)數(shù)據(jù)庫(kù)的操作,顧名思義:

findAll-->查詢所有數(shù)據(jù)

get-->通過(guò)id獲取數(shù)據(jù)

insert-->插入數(shù)據(jù)

update-->修改數(shù)據(jù)

delete-->刪除數(shù)據(jù)

新建控制器“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>玩轉(zhuǎn)spring boot——結(jié)合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) {
        //保存成功后更新數(shù)據(jù)
        $scope.get(r.id);
      });
    }
 
    //刪除
    $scope.del = function(id) {
      $http({
        url : '/delete?id=' + id,
        method : 'POST',
      }).success(function(r) {
        //刪除成功后移除數(shù)據(jù)
        $scope.remove(r.id);
      });
    }
 
    //獲取數(shù)據(jù)
    $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);
      });
    }
 
    //初始化載入數(shù)據(jù)
    $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>玩轉(zhuǎn)spring boot——結(jié)合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>編號(hào):</td>
      <td><input id="no" ng-model="data.no" /></td>
      <td>日期:</td>
      <td><input id="date" ng-model="data.date" /></td>
      <td>數(shù)量:</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>編號(hào)</td>
      <td>日期</td>
      <td>數(shù)量</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/">點(diǎn)擊訪問(wèn)原版博客</a>
</body>
</html>

使用angularjs的ajax調(diào)用spring boot mv的后臺(tái)方法。

四、數(shù)據(jù)庫(kù)連接

新建“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

完整的結(jié)構(gòu)為:

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

五、運(yùn)行效果

在瀏覽器輸入“http://localhost:8080/”

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

添加數(shù)據(jù):

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

保存新數(shù)據(jù):

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

編輯數(shù)據(jù):

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

刪除數(shù)據(jù):

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

刪除完成的效果:

玩轉(zhuǎn)spring boot 結(jié)合AngularJs和JDBC(4)

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持服務(wù)器之家。

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

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板: 嫩草精品 | 久久久久久久久性潮 | 97色伦图片7778久久 | 国内自拍网红在线综合 | 韩剧消失的眼角膜免费完整版 | 寡妇快点好大好爽视频 | 久久精品热在线观看85 | 欧美日韩视频一区三区二区 | 亚洲精品国产精品麻豆99 | 99久久爱热6在线播放 | 美妇在线 | 精品国产免费久久久久久 | 欧美乱妇高清无乱码视频在线 | 久久久久久久伊人电影 | 国内自拍网红在线自拍综合 | 免费刷10000名片赞网站 | 欧美日韩亚毛片免费观看 | 国产亚洲高清国产拍精品 | 四虎最新永久在线精品免费 | 国产福利免费看 | 色噜噜狠狠狠综合曰曰曰88av | 国产一级片免费视频 | 国产精品成人一区二区1 | 国产在线观看色 | 欧美日一级片 | www四虎影视 | 午夜免费体验30分 | 黑人巨茎大战欧美白妇 | 日本xxxx18vr69| 操久久| 99国产精品免费视频 | 无码中文字幕热热久久 | 纲手被漫画aⅴ | 亚洲一级片在线播放 | 91理论片午午伦夜理片久久 | 金莲一级淫片aaaaaa | 免费高清www动漫视频播放器 | 女人肮脏的交易中文字幕未删减版 | 精品国产免费第一区二区三区日韩 | 日本无吗免费一二区 | 青草视频在线观看免费资源 |