Spring Boot 中结合Angular

引言

一直想要前后端结合一下，今天专门搜罗材料整理一篇博客。其实前端框架没怎么太多使用过，尤其是Angular或者是JQuery。困难是如何将Angular和Java后端体系相结合。

Angular(包括2和4)是从AngularJs1.x升级而来，但是不提供向下兼容。

• Anuglar2(或者4)和AngularJs1.x的一个很大不同，便是Angular使用了TypeScript，而1.x则使用了JavaScript，也是两者不能兼容的一个很重要的原因。目前现代浏览器均不直接支持TypeScript，因此，我不能像AngularJs 1.x那样，直接将Angular引入到JSP中。

解决方案

虽然通过查找资料没有解决我的问题，但是我还是获得很大收获。TypeScript毕竟是JavaScript的一个超集，本质上还是JavaScript。Angular虽然是用TypeScript写的，但是在编译之后本质上和html、css、js文件没有什么两样，因此我没有必要将Angular的代码放进JavaWeb里面，而是将Angular编译之后的静态文件放入JavaWeb项目中就可以了。

在这个项目中我使用Spring Boot作为后端的框架，maven作为构建工具，那么在main目录下使用@angular/cli工具新建一个angular项目，名字就叫做angular吧。Spring Boot项目中一般将静态资源放在resources目录下的static文件夹中，为了方便编译，可以把Angular中的.angular-cli.json文件中apps下的outDir设置为“../resources/static”。

Angular页面使用WebStorm开发，Spring Boot则使用IDEA。当我们启动项目或打包的时候需要使用ng build去编译angular代码，由于我修改.angular-cli.json的配置，编译后的代码将不会放在默认的dist目录下，而是在spring boot中的resources的static文件夹中了。

源代码

这是源代码。

实战

一、项目准备

在建立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

    4.0.0

    com.github.carter659
    spring04
    0.0.1-SNAPSHOT
    jar

    spring04
    http://maven.apache.org

    
        org.springframework.boot
        spring-boot-starter-parent
        1.4.2.RELEASE
    

    
        UTF-8
        1.8
    

    

        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-devtools
            true
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            mysql
            mysql-connector-java
        
        
            commons-dbcp
            commons-dbcp
        


    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

二、编写类文件：

修改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 findAll() {
        List 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 save(@RequestBody Order order) {
        Map 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 delete(String id) {
        Map result = new HashMap<>();
        orderDao.delete(id);
        result.put("id", id);
        return result;
    }
}

三、新建thymeleaf模板

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

    
玩转spring boot——结合JDBC
    

        from 刘冬的博客
    
    
    
    

    

    
清单信息：
    
    

        

            
编号：
            

            
日期：
            

            
数量：
            

        
    

    

    
清单列表：
    

        

            
操作
            
编号
            
日期
            
数量
        
        

            

            
{{row.no}}
            
{{row.date}}
            
{{row.quantity}}
        
    

    

    点击访问原版博客

使用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/”

---

添加数据：

---

---

保存新数据：

---

编辑数据：

---

删除数据：

删除完成的效果：