jquery调用后端接口、js调用后端接口 收藏 0

10《Spring Boot 入门教程》使用 JdbcTemplate

如果我们的项目非常简单，仅仅是对数据库几张表进行简单的增删改查操作，那么实际上直接使用 JDBC 操作数据库就可以了。

由于 JDBC 中有很多模板代码，每次都是加载驱动-建立数据库连接-查询或操作数据库-关闭数据库连接这样的模板代码， Spring 提供了 JdbcTemplate 对原生 JDBC 进行了简单的封装。

本篇文章，我们来实现一个完整的、基于 Spring Boot + JdbcTemplate + MySQL 的商品管理项目实例。

数据库使用 MySQL ，商品信息存储到商品表内即可。

后端项目使用 Spring Boot ，通过控制器暴露 RESTful 风格的接口供前端调用，通过 JdbcTemplate 实现对数据库的操作。

前端项目使用 Bootstrap 开发，通过 jQuery 提供的 $.ajax 方法访问后端接口。

只需要一张商品表，保存商品相关的信息即可。我们使用 Navicat 新建数据库 shop ，并在其中新建数据表 goods 。

实例：

Tips： 默认值最好不要采用 NULL ， NULL 会影响索引的效率，而且在查询时需要用 is null 或 is not null 筛选，容易被忽略。

我们新建一个 Spring Boot 项目，通过 JdbcTemplate 访问数据库，同时接口依旧采用 RESTful 风格。

Spring Boot 版本选择 2.2.5 ，Group 为 com.imooc ， Artifact 为 spring-boot-jdbctemplate ，生成项目后导入 Eclipse 开发环境。

我们引入 Web 项目依赖、热部署依赖。由于本项目需要访问数据库，所以引入 spring-boot-starter-jdbc 依赖和 mysql-connector-java 依赖。 pom.xml 文件中依赖项如下：

实例：

依次新建以下类结构

• GoodsDo：商品类，对应 goods 商品表；
• GoodsDao：商品数据访问类，用于访问数据库；
• GoodsService：商品服务类，用于封装对商品的操作；
• GoodsController：商品控制器类，用于对外提供 HTTP 接口；
• CorsConfig：跨域配置类，允许前端页面跨域访问后端接口。

此时项目目录如下：

开发商品类 GoodsDo ，代码如下：

实例：

商品数据访问类 GoodsDao 是本篇的重点，通过注入 JdbcTemplate 类型的组件，实现数据库操作。注入代码如下：

实例：

由于我们已经引入了 spring-boot-starter-jdbc 依赖，所以 Spring Boot 项目已经为我们自动配置了 JdbcTemplate 组件，我们拿来即用即可，这就是 Spring Boot 的强大之处！

此时我们启动应用，发现报错信息：

此处我们可以再度体会 Spring Boot 强大之处， Spring Boot 在为我们自动配置了 JdbcTemplate 之余，还在尝试自动为我们配置数据源 DataSource ，即 JdbcTemplate 要操作的真实数据库信息。报错信息已经提示我们，没有合适的数据库驱动、也没有合适的 URL 属性。

我们只需要通过配置文件指定数据源信息， Spring Boot 就可以识别配置，并加载到数据源组件中。 JdbcTemplate 也可以自动识别该数据源，从而实现对数据库的操作。配置文件信息如下：

实例：

需要注意的是，我们在 URL 配置中指定了编码方式，这样可以防止出现数据库中文乱码情况。同时指定了时区为北京时间所在的东八区（GMT%2B8），避免因时区问题导致错误。

此时再次启动 Spring Boot 应用，正常运行，说明我们的数据源配置生效了。

通过 JdbcTemplate 进行增删改查操作非常简洁， Spring 官方封装了原生 JDBC 中冗余的模板代码，使数据库访问操作更加简洁，代码如下：

实例：

getById 和 getList 方法中使用了匿名内部类，如果不了解的可以先去学习下相关知识。

商品服务类比较简单，直接调用 GoodsDao 完成商品服务方法封装即可。

实例：

我们还是遵循之前的 RESTful 风格，制定后端访问接口如下：

我们根据上面的接口列表，实现控制器类代码如下：

实例：

由于我们是前后端分离的项目开发方式，所以需要为 Spring Boot 添加跨域配置类：

实例：

本节主要介绍 Spring Boot 中 JdbcTemplate 的用法，所以前端页面仅给出代码和注释，不再进行详细介绍了。

前端只有一个页面，使用 Bootstrap 的样式和插件，通过 jQuery 的 $.ajax 方法访问后端接口，逻辑并不复杂。

此处简单展示下浏览商品部分的前端代码，感兴趣的同学可以从 Git仓库 查看完整代码。

实例：

直接使用浏览器打开前端页面，效果如下：

浏览商品

新增商品

编辑商品

本篇重点演示了 Spring Boot 中使用 JdbcTemplate 的方法。

基于 Spring Boot 自动装配的功能，我们只需要引入相应的依赖，编写必要的数据库参数配置，即可直接使用 JdbcTemplate 。所谓开箱即用，就是只需必要的操作，就可以直接到达可用的境界。

前端如何跟后端对接接口？分享这6种方式

一般来讲，前端不会给后端接口，而是后端给前端接口的情况比较普遍。一些人可能不理解接口和前端开发的关系，其实不合适的接口设计会极大地影响用户的页面体验。那么今天就跟着千锋武汉Web前端培训小编一起来看看，前端如何调用后端接口？有哪几种方式？

首先，要弄清楚前端提供一个接口或者调用后台接口，那么这个接口具体指什么？网上用户上传图片作为头像这个需求需要后台人员处理，当用户登录 修改自己个人信息的时候，上传了头像。此时，后台处理该用户update个人信息，将该图片存入数据库，一般存的都是图片地址，string形式的数据。然后，要返回到前台的时候，后台人员需要对这些用户的个人信息进行处理，不只是头像，还有一些别的信息。后台通过语言编译，生成json格式的键值对（一般是json 还有xml txt 等数据格式）。生成一个地址也就是url，前台人员利用ajax，将返回的data显示到页面就好了。大体上来讲，接口一般指的是HTTP接口，也可以说是HTTP API。接口由后端提供，前端调用后端接口以获取后端数据。而且接口由URL和HTTP方法构成，URL为接口的地址，HTTP方法指的是GET, PUT, DELETE等等。

前端调用后端接口无外乎六种方法，如下：

1、打开vs，创建空的asp.net mvc演示项目【WebMVC】

（1）依次点击【文件】->【新建】->【项目】；

（2）在【新建项目】界面选择【Web】->【ASP.NET Web 应用程序(.NET Framework)】，输入名称，选择框架至少4.5版本，点击【确定】按钮；

（3）选择【空】->【MVC】->【确定】 ；

（4）创建好了项目。

2、在项目中

（1）在Controllers文件夹上点击鼠标右键，依次选择【添加】->【控制器】，即可完成HomeController的创建；

（2）在Controller的Index方法内，点击鼠标右键，选择【添加视图】；

（3）在项目中添加文件夹【Content】并添加jquery源文件；

（4）在Index页面添加jquery的引用。

3、在Index页面中添加一个输入文本框，一个按钮，以及显示结果的dom。

4、在HomeController中添加新的方法，用于接收前台传入的参数，组装后返回。

5、在Index页面，添加Jquery的ajax方式，调用后台接口，返回结果的处理代码。

6、在vs中，按F5调试运行结果，如下：

（1）在文本框中输入内容；

（2）点击按钮，调用接口，并将返回值显示在界面；

（3）如果要提交大量数据，或者敏感数据，请修改ajax的type方式，这样参数就不会在url地址栏中显示了。

本篇千锋武汉Web前端培训小编讲了接口的概念和前端调用后端接口的六种方式，希望对大家的前端开发项目能有所帮助。关于前端学习的更多疑问，大家可以可以关注“武汉千锋”微信公众号进行更加深入的学习。

如果你想要快速高效的学习Web前端开发，你可以来千锋武汉Web前端培训。千锋武汉Web前端培训课程以实战项目驱动教学，结合时下流行技术，加入大数据可视化内容，同时深化了PHP+MySQL开发内容，精准匹配企业线下及未来需求，除了培养学员的开发技术，着力培养学员的大前端视角与全栈思维，深度贯穿前端后端开发，紧贴主流企业一线需求，助力千锋学员毕业即高薪就业。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com