玩转spring boot——结合AngularJs和JDBC

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

一、项目准备

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

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

<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>

pom.xml

二、编写类文件：

修改App.java

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”

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”

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”

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”

<!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>

index.html

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

四、数据库连接

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

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

完整的结构为：

五、运行效果

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

添加数据：

保存新数据：

编辑数据：

删除数据

删除完成的效果：

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

如果你觉得我的博客对你有帮助，可以给我点儿打赏，左侧微信，右侧支付宝。

有可能就是你的一点打赏会让我的博客写的更好:)

时间： 2024-12-27 23:34:04

玩转spring boot——结合AngularJs和JDBC的相关文章

玩转spring boot——开篇

很久没写博客了,而这一转眼就是7年.这段时间并不是我没学习东西,而是园友们的技术提高的非常快,这反而让我不知道该写些什么.我做程序已经有十几年之久了,可以说是彻彻底底的“程序老炮”,至于技术怎么样?我个人认为是非常一般.如果单纯从技术来说,其实有工作3年的工作经验的人技术就已经很好了,后面工作时间是为了增加经验和对编程的理解.随着工作时间的增加,就会对一个技术有更深层次的理解,反而发现自己需要学更多的新.并觉得自己什么都不会.什么都不懂,还需要不停的学习和提高,并觉得时间更本不够用.自己唯一的收

玩转spring boot——properties配置

前言 在以往的java开发中,程序员最怕大量的配置,是因为配置一多就不好统一管理,经常出现找不到配置的情况.而项目中,从开发测试环境到生产环境,往往需要切换不同的配置,如测试数据库连接换成生产数据库连接,若有一处配错或遗漏,就会带来不可挽回的损失.正因为这样,spring boot给出了非常理想的解决方案——application.properties.见application-properties的官方文档:http://docs.spring.io/spring-boot/docs/curr

玩转spring boot——websocket

前言 QQ这类即时通讯工具多数是以桌面应用的方式存在.在没有websocket出现之前,如果开发一个网页版的即时通讯应用,则需要定时刷新页面或定时调用ajax请求,这无疑会加大服务器的负载和增加了客户端的流量.而websocket的出现,则完美的解决了这些问题. spring boot对websocket进行了封装,这对实现一个websocket网页即时通讯应用来说,变得非常简单. 一.准备工作 pom.xml引入 <dependency> <groupId>org.springf

玩转spring boot——war部署

前言 之前部署spring boot应用是通过直接输入命令“java -jar”来实现的.而有些情况,由于部署环境的制约,只能把项目从jar转换成war才能部署,如新浪云sae的java环境容器.那怎样转换成war项目呢? 其实非常简单,只需要App类继承SpringBootServletInitializer,并重写“protected SpringApplicationBuilder configure(SpringApplicationBuilder builder)” 方法即可 pack

spring boot自动配置之jdbc

1.DataSource配置 1.1 默认配置application.xml spring.datasource.url=jdbc:mysql://localhost/test spring.datasource.username=root spring.datasource.password=****spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.type=com.zaxxer.hikari

玩转Spring Boot 集成Dubbo

使用Spring Boot 与Dubbo集成,这里我之前尝试了使用注解的方式,简单的使用注解注册服务其实是没有问题的,但是当你涉及到使用注解的时候在服务里面引用事务,注入其他对象的时候,会有一些问题.于是我就果断放弃了注解了,使用的是XML,这里可能介绍的是Dubbo,但是如果使用Dubbox的话,基本上是兼容的.接下来,将说说使用XML的方式与Spring Boot在一起开发. 1.创建工程在pom.xml中加入依赖 创建工程名为: (1)springboot-dubbo-provide (2

玩转spring boot——国际化

前言 这是我的第一篇博客,也是复制大神刘东的代码.大神说:在项目开发中,可能遇到需要国际化,而支持国际化确是一件很头疼的事,但是spring boot给出了一个非常理想和方便的方案. 一.准备工作 pom.xml 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="

玩转spring boot——结合jQuery和AngularJs

在上篇的基础上 准备工作: 修改pom.xml <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&

使用Spring Boot和Gradle创建AngularJS项目

Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 本文主要是记录使用 Spring Boot 和 Gradle 创建项目的过程,其中会包括 Spring Boot 的安装及使用方法,希望通过这篇文章能够快速搭建一个项目. 1. 开发环境 操作系统: mac JDK:1.7.0_60 Gradle:2.2.1 IDE:Idea 2. 创建项目