❤【爆肝万字】手把手教你SpringBoot+MyBatis+jQuery+HTML5从0开始写网页一学就会！（内附源码）❤

转x33g5p2x  于2021-11-22 转载在 HTML5  
字(9.3k)|赞(0)|评价(0)|浏览(735)

今天带给大家的是SpringBoot+MyBatis+jQuery+HTML5+CSS简单实现前后端交互，保证干货满满，看完你就可以动手写你自己的程序！

首先得需要你创建一个SpringBoot项目，具体怎么创建这里久不多说啦。

其次，你的创建一张这样一张表用于连接测试功能，很简单的一张表，当然只是用于功能测试，实际业务中可没有这么简单的表哟。

创建完成以后你pom.xm文件中的中应该有如下引入依赖：

  1. <!--springWeb-->
  2.         <dependency>
  3.             <groupId>org.springframework.boot</groupId>
  4.             <artifactId>spring-boot-starter-web</artifactId>
  5.         </dependency>
  7.         <!--本地测试-->
  8.         <dependency>
  9.             <groupId>org.springframework.boot</groupId>
  10.             <artifactId>spring-boot-starter-test</artifactId>
  11.             <scope>test</scope>
  12.         </dependency>
  14.         <!--mybatis-->
  15.         <dependency>
  16.             <groupId>org.mybatis.spring.boot</groupId>
  17.             <artifactId>mybatis-spring-boot-starter</artifactId>
  18.             <version>2.1.3</version>
  19.         </dependency>
  21.         <!--mysql-->
  22.         <dependency>
  23.             <groupId>mysql</groupId>
  24.             <artifactId>mysql-connector-java</artifactId>
  25.             <scope>5.1.38</scope>
  26.         </dependency>
  28.         <!--热部署-->
  29.         <dependency>
  30.             <groupId>org.springframework.boot</groupId>
  31.             <artifactId>spring-boot-devtools</artifactId>
  32.             <optional>true</optional>
  33.         </dependency>
  35.         <!--thymeleaf-->
  36.         <dependency>
  37.             <groupId>org.springframework.boot</groupId>
  38.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  39.         </dependency>
  41.         <!--jquery依赖-->
  42.         <dependency>
  43.             <groupId>org.webjars</groupId>
  44.             <artifactId>jquery</artifactId>
  45.             <version>3.5.1</version>
  46.         </dependency>

依赖写入以后，记得在点击此刻出现在你IDEA界面右上角的刷新按钮哟。

注入依赖以后，在你的项目中src目录下的resources目录下建立application.yml文件，当然你也可以使用application.properties来进行配置，但是这里我们更加推荐通过.yml文件对其进行配置，因为它的属性结构可以让参数看起来更加简洁清晰。配置如下：

  1. spring:
  2.   #thymeleaf页面缓存关闭
  3.   thymeleaf:
  4.     cache: false
  5.   datasource:
  6.     username: root
  7.     password: root
  8.     url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8
  9.     driver-class-name: com.mysql.cj.jdbc.Driver
  11. # 开发环境配置
  12. server:
  13.   # 服务器的HTTP端口，默认为80
  14.   port: 1717
  15.   servlet:
  16.     # 应用的访问路径
  17.     context-path: /
  18.   tomcat:
  19.     # tomcat的URI编码
  20.     uri-encoding: UTF-8
  21.     # tomcat最大线程数，默认为200
  22.     max-threads: 800
  23.     # Tomcat启动初始化的线程数，默认值25
  24.     min-spare-threads: 30
  26. # 日志配置
  27. logging:
  28.   level:
  29.     com.gantiexia: debug
  30.     org.springframework: warn
  32. # MyBatis
  33. mybatis:
  34.   # 搜索指定包别名
  35.   typeAliasesPackage: com.gantiexia.**.entity
  36.   # 配置mapper的扫描，找到所有的mapper.xml映射文件
  37.   mapperLocations: classpath*:mapper/**/*.xml

注意！ 上面spring的配置中，datasource要写入你自己数据库的连接参数，这里博主用到的MYSQL的连接方式。同样，最后MyBatis的路径配置决定了你的项目能否找到对应的承接数据库的文件。

连接数据库

在java包下创建层级目录，com/gantiexia/springboot_test，然后在springboot_test包下创建entity包，在这个包下创建实体集。

  1. package com.gantiexia.springboot_test.entity;
  3. /** * @author GanTieXia * @date 2021/8/21 4:20 */
  4. public class User {
  5.     /** 用户名*/
  6.     private String userName;
  7.     /** 账号*/
  8.     private String idNumber;
  9.     /** 密码*/
  10.     private String passWord;
  11.     /** 年龄*/
  12.     private String age;
  13.     /** 性别*/
  14.     private String sex;
  16.     public String getUserName() {
  17.         return userName;
  18.     }
  20.     public void setUserName(String userName) {
  21.         this.userName = userName;
  22.     }
  24.     public String getIdNumber() {
  25.         return idNumber;
  26.     }
  28.     public void setIdNumber(String idNumber) {
  29.         this.idNumber = idNumber;
  30.     }
  32.     public String getPassWord() {
  33.         return passWord;
  34.     }
  36.     public void setPassWord(String passWord) {
  37.         this.passWord = passWord;
  38.     }
  40.     public String getAge() {
  41.         return age;
  42.     }
  44.     public void setAge(String age) {
  45.         this.age = age;
  46.     }
  48.     public String getSex() {
  49.         return sex;
  50.     }
  52.     public void setSex(String sex) {
  53.         this.sex = sex;
  54.     }
  56.     @Override
  57.     public String toString() {
  58.         return "User{" +
  59.                 "userName='" + userName + '\'' +
  60.                 ", idNumber='" + idNumber + '\'' +
  61.                 ", passWord='" + passWord + '\'' +
  62.                 ", age='" + age + '\'' +
  63.                 ", sex='" + sex + '\'' +
  64.                 '}';
  65.     }
  66. }

实体集写好以后，紧接着我们在springboot_test包下创建层级目录：mapper/user，然后再在user包下创建命为UserMapper的接口：

  1. package com.gantiexia.springboot_test.mapper.user;
  3. import com.gantiexia.springboot_test.entity.User;
  4. import org.apache.ibatis.annotations.Mapper;
  6. import java.util.List;
  8. /** * @author GanTieXia * @date 2021/8/21 4:30 */
  9. @Mapper
  10. public interface UserMapper {
  11.     /** * 获取信息 * * @return */
  12.     List<User> getMessage();
  13. }

然后在resources目录下，创建层级目录mapper/user,在user包下面创建UserMapper.xml用于写我们的数据库查询语句。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  3. <mapper namespace="com.gantiexia.springboot_test.mapper.user.UserMapper">
  4.     
  5.     <select id="getMessage" resultType="com.gantiexia.springboot_test.entity.User">
  6.         select userName,idNumber,passWord,age,sex from t_user;
  7.     </select>
  9. </mapper>

注意！ 此处的namespace对应的是你的mapper接口所在的路径，各个namespace之间相互独立不影响。

好了，到此我们就得写个测试类看这个dao接口（又称mapper）能否连接数据库，接下来在test包下，按如下路径创建测试类，创建如下路径下的文件：

编写测试类：

  1. package com.gantiexia.springboot_test;
  3. import com.gantiexia.springboot_test.entity.User;
  4. import com.gantiexia.springboot_test.service.UserService;
  5. import org.junit.jupiter.api.Test;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.boot.test.context.SpringBootTest;
  9. import java.util.List;
  11. @SpringBootTest
  12. class SpringbootUserCtrlApplicationTests {
  14.     @Autowired
  15.     private UserService userService;
  17.     @Test
  18.     public void getAllMessage(){
  19.         List<User> list = userService.getMessage();
  20.         for(User user : list){
  21.             System.out.println(user);
  22.         }
  23.     }
  24. }

运行结果如下：

至此成功由代码获取到数据库中的数据。

编写业务功能模块代码

按照如下路径创建文件，注意，UserService接口在service目录下。

编写service目录下的UserService接口代码：

  1. package com.gantiexia.springboot_test.service;
  3. import com.gantiexia.springboot_test.entity.User;
  5. import java.util.List;
  7. /** * @author GanTieXia * @date 2021/8/21 4:36 */
  8. public interface UserService {
  10.     /** * 获取信息 * * @return */
  11.     List<User> getMessage();
  12. }

编写service目录下的serviceImpl包下的UserServiceImpl类代码：

  1. package com.gantiexia.springboot_test.service.serviceImpl;
  3. import com.gantiexia.springboot_test.entity.User;
  4. import com.gantiexia.springboot_test.mapper.user.UserMapper;
  5. import com.gantiexia.springboot_test.service.UserService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Service;
  8. import org.springframework.transaction.annotation.Transactional;
  10. import java.util.List;
  12. /** * @author GanTieXia * @date 2021/8/21 4:36 */
  13. @Service
  14. @Transactional
  15. public class UserServiceImpl implements UserService {
  17.     @Autowired
  18.     private UserMapper userMapper;
  20.     /** * 获取所有信息 * * @return */
  21.     @Override
  22.     public List<User> getMessage() {
  23.         return userMapper.getMessage();
  24.     }
  25. }

然后创建如下层级路径以及路径下的文件：

编写controller路径下的UserCtrl文件：

  1. package com.gantiexia.springboot_test.controller;
  3. import com.gantiexia.springboot_test.entity.User;
  4. import com.gantiexia.springboot_test.service.UserService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.ResponseBody;
  10. import java.util.List;
  12. /** * @author GanTieXia * @date 2021/8/20 23:06 */
  13. @Controller
  14. @RequestMapping("firstTest")
  15. public class UserCtrl {
  17.     @Autowired
  18.     private UserService userService;
  20.     @RequestMapping("/getMessage")
  21.     @ResponseBody
  22.     public List<User> getMessage(){
  23.         return userService.getMessage();
  24.     }
  26.     @RequestMapping("/testMyFirstPage")
  27.     public String toPage(){
  28.         return "/user/testPage";
  29.     }
  30. }

接下来就要去写前端页面了，这里我们只写一个简单的样式，以供参考。

按照如下路径在resources目录下创建你的HTML5页面：

接下来我们编写testPage.html页面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>SpringBoot</title>
  6. </head>
  7. <style> #picture { width: 50px; height: 50px; border-radius: 50%; background-color: red; position: relative; left: -25px; } #showPicture{ width: 50px; height: 50px; border-radius: 50%; } </style>
  8. <body>
  9. <div>
  10.     <div style="width: 100%;background-color: cornflowerblue;height: 50px">
  11.         <div id="picture" style="float: right;">
  12.             <img id="showPicture" src="/picture/picture.jpg">
  13.         </div>
  14.         <div style="float: right">
  15.             <p style="width: 150px;">用户名：<label id="userName"></label></p>
  16.         </div>
  17.         <div style="float: right">
  18.             <p style="width: 150px;">账号：<label id="idNumber"></label></p>
  19.         </div>
  20.     </div>
  21. </div>
  22. </body>
  23. <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
  24. <script> // 这里我们随便加载一下数据，大家知道原理就好啦 $.ajax({ type:"post", url: "/firstTest/getMessage", async:false, success:function (data) { for(var i=0;i<data.length;i++){ $("#userName").html(data[0].userName) $("#idNumber").html(data[0].idNumber) } } }) </script>
  25. </html>

注意！ 此处的中我们用到了jQuery，它的使用需要你去下载相应的js文件，放在对应的包里，这里为了大家能达到效果，建议大家将这个文件放在和我一样的路径下：

为了展示头像效果，我在static包下创建了一个picture文件夹，用来装待会我们要显示在前端的图片，你们也可以先随便放一张图片在这里，注意图片路径和图片名字得和我一样， 因为前端引入的时候输入它的路径了，你也可以在前端页面中将图片改成你自己的图片路径：

相信大家前面看了那么多遍这个文件，一定好奇这个类是干嘛的吧！

他就是我们springBoot项目中的启动类啦，这个文件我是放在gantiexia这个文件的路径下面的， 因为它能够读取到同级以及同级子目录下的文件。这样无论你是由多少个包像springboot_test、springboot_testOne、springboot_testThree等等等它都能识别到。我们来看看它长什么样子：

  1. package com.gantiexia;
  3. import org.springframework.boot.SpringApplication;
  5. import org.springframework.boot.autoconfigure.SpringBootApplication;
  7. /** * @author GanTieXia * @date 2021/8/20 23:06 */
  8. @SpringBootApplication
  9. public class SpringbootTestApplication {
  11.     public static void main(String[] args) {
  12.         SpringApplication.run(SpringbootTestApplication.class, args);
  13.         System.out.println("springBoot项目启动成功...");
  14.     }
  16. }

当然我自己改动了一下的哈。我们找到这个类，右键运行起这个类：

在访问前端网页的时候，要确保你的数据库能够正常连接。

接下来我们打开网页，输入刚才我们控制器中定义的url地址，端口号为我们application.yml文件中server下定义的port: 1717（可随意更改，只要不冲突就好）。注意这里我们前端页面Ajax中取得是数据库中得第一条数据没加任何得业务逻辑。

输入网址：localhost:1717/firstTest/testMyFirstPage

效果图：

到此，数据库-后端-前端全部打通，如果有不懂的，欢迎大家留言，我会一一解答。

今天的分享就到这里，觉得博主的分享有用的记得一键三连，谢谢大家，我们下期再见~

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/qq_51250453/article/details/120168480

内容来源于网络，如有侵权，请联系作者删除！

Javaspringjqueryhtml5肝铁侠笔记

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com