且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二

更新时间:2021-11-28 23:34:17

上一篇:SpringBoot如何整合WebSocket? | 带你读《SpringBoot实战教程》之四十一

本文来自于千锋教育在阿里云开发者社区学习中心上线课程《SpringBoot实战教程》,主讲人杨红艳,点击查看视频内容

SpringBoot整合AngularJS

我们需要结合数据库来进行分析。我们使用db1数据库中的t_order表
添加依赖:

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
</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>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.3.2</version>
</dependency>

全局配置:

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.url=jdbc:mysql://localhost:3306/db1

#springboot整合thymeleaf
#<!-- 关闭thymeleaf缓存 开发时使用 否则没有实时画面-->
spring.thymeleaf.cache=false
## 检查模板是否存在,然后再呈现
spring.thymeleaf.check-template-location=true
#Content-Type值
spring.thymeleaf.content-type=text/html
#启用MVC Thymeleaf视图分辨率
spring.thymeleaf.enabled=true
## 应该从解决方案中排除的视图名称的逗号分隔列表
spring.thymeleaf.excluded-view-names=
#模板编码
spring.thymeleaf.mode=LEGACYHTML5
# 在构建URL时预先查看名称的前缀
spring.thymeleaf.prefix=classpath:/templates/
# 构建URL时附加查看名称的后缀.
spring.thymeleaf.suffix=.html
# 链中模板解析器的顺序
#spring.thymeleaf.template-resolver-order= o
# 可以解析的视图名称的逗号分隔列表
#spring.thymeleaf.view-names=
#thymeleaf end

com.qianfeng.pojo:

public class Order {

    public String id;
    public String no;
    public Date date;
    public int quantity;

     //get,set略
}

com.qianfeng.dao:

public interface OrderDao {

    List<Order> findAll();
    Order findById(String id);
    String addOrder(Order order);
    void updateOrder(Order order);
    void deleteById(String id);
}

com.qianfeng.dao.impl:
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
com.qianfeng.controller:
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二

前端页面:
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
启动类:
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
执行结果:
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二
点击添加:
SpringBoot如何整合AngularJS? | 带你读《SpringBoot实战教程》之四十二

配套视频