SpringBoot 整合 AngularJS|学习笔记

开发者学堂课程【SpringBoot 实战教程： SpringBoot 整合 AngularJS】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/651/detail/10825

SpringBoot 整合 AngularJS

1、angularjs 属于前端的技术，要结合具体的数据库操作进行操作。使用的数据库是 mysql 数据库，使用 jdbctemplate 操作数据库，模版引擎使用的是  thymeleaf，所以需要把这些依赖添加到工程中。创建好工程，做好 web 依赖。

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

2、因为要操作数据库，所以和数据库连接的配置以及模版引擎的配置要放到全局配置文件中。创建全局配置文件，application.properties。

全局配置，以下是 thymeleaf 的模版，模版放在 templates 下，扩展名是 html，这是连接数据库的配置，数据库用的是 db1。

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

#启用 MVCThymeleaf 视图分辨率

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=

#thymeleafend

3、使用 db1 数据库中的 order 表，点击里面有一个订单表，这里面包括订单 ID，订单编号，下单时间，订单数量，结合这个表实现相应的增删改查的操作。

4、创建 pojo，对应订单表的实体类，创建包 com.qianfeng.pojo。

public class Order {

public Stringid;

public .Stringno ;

PublicDate date ;

public intquantity;

5、创建 dao，com.qianteng.dao。

package com. qianfeng . dao;

import java.util.List;

public interface OrderDao{

List<Order> findAll () ;查找所有订单

OrderfindById(String id) ; 根据 id 查找订单

String addOrder (Order order) ; 增加订单

void updateOrder (Order order) ;修改订单

void deleteById (String id) ;删除订单

}

五个功能。

6、创建具体的实现类，用 jdbctemplate，com.qianfeng.dao.impl。

用 jdbctemplate 把每一个功能进行实现。

7、创建 controller，com.qianfeng.controller。

把对应的功能都进行调用，因为使用的是 thymeleaf 模版，所以在 resources 下创建 templates 文件夹。

把页面进行导入，在页面上前端引入 angular. Js，在里面使用 angular. Js 前端技术实现了添加，编辑，删除以及保存这些功能，还有获取数据，这些都是用 angular. Js 实现的。下面就是相应的 html。关键是页面上使用的是 angular. Js。首先要想显示首页，应该在 controller 里面写一个功能，最终转到 index.html 页面。

8、最后启动类中要进行扫描。

@SpringBootApplication(scanBasePackages="com.qi anfeng")

9、启动，先显示首页，访问路径是/，打开浏览器进行访问，localhost:8080/。

如果点击添加，消息中就会出现一个静态的数据，这是以前表中存在的数据。因为数据库中有一个订单，所以在这里就显示出来。

比如把日期改成2018-12-22，数量改成200，点击保存。列表里面就会出现。

这个案例重点就是页面上这些功能，都是通过 angularjs 就很方便的实现了，这就是在 springboot 中如何整合 angularjs。