Intellij IDEA创建SpringBoot项目(超详细)+Mybatis整合Ajax+Bootstrap前端学习增删改查

Java 专栏收录该内容
15 篇文章 0 订阅

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前言

  • 博文仅介绍了如何查询数据,但项目源码包含增删改查的方便大家学习Java。异常类未完善,后期补上谢谢一键三连
  • 本次项目 后端技术:SpringBoot+Mybatis 整合前端技术:Bootstrap框架+Ajax。
  • 本次项目仅用于学习,各路大神有建议可以私聊提出,互相进步。
  • 本人不擅长前端,所以前端代码显得臃肿,将就吧,主要是学习Java后端。
  • 正常开发手段,应该要有实体基类,(例如:编号,创建时间,修改时间,删除时间,删除人等等)这种重复的数据字段可以归类,某个实体类继承这个基类就ok了。面向对象封装继承的思想就出来啦!

一、SpringBoot介绍

  • 解决了在使用Spring/SpringMVC/Mybatis等框架时,需要添加大量的依赖、添加固定的配置的问题,最直接的表现就是不必添加公共的依赖,也不必配置通用的配置。

二、创建SpringBoot项目

  • 打开 IDEA 2019,文件 File --> 新建 New --> 项目 project --> 选择 Spring Initializr --> Next 下一步
    在这里插入图片描述

  • Group:一般的是域名,或者是 cn.xxx 英文名都OK的。

  • Artifact:项目名称。
    在这里插入图片描述

  • 勾选需要的配置相关的依赖,本文章以 SpringBoot + Mybatis 整合的 JavaWeb 项目,所以勾上 Spring Web,MyBatis,MySql 数据库驱动,Lombok。 SpringBoot版本选2.3.3
    Lombok 是一个Java库,它会自动插入编辑器和构建工具中,相关详细请看该文章——链接如下:https://blog.csdn.net/qq_41254299/article/details/104176272
    在这里插入图片描述

  • 然后 Next 下一步到 选择项目路径,最后 finish。
    在这里插入图片描述

  • Finish 创建成功后,将会自动下载各种 jar 包,此时我们手动选择自己配置的 Maven 工具。
    在这里插入图片描述

  • 选择好 Maven 文件目录后 OK ,等待下载完行了。
    在这里插入图片描述

  • 项目创建成功 ,文件目录结构
    在这里插入图片描述


三、配置项目与数据链接

  1. 打开 application.properties 文件,写入配置信息

    #1.项目启动的端口
    server.port=8080
    
    #2.数据库连接参数
    spring.datasource.url=jdbc:mysql://localhost:3306/testkey?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.username=root
    spring.datasource.password=123456
    

    testkey是先前创建好的数据库,所以测试前先设计好数据库,数据表(MySQL)

    DROP TABLE IF EXISTS `goods`;
    CREATE TABLE `goods` (
      `pid` int(11) NOT NULL,
      `pname` varchar(15) DEFAULT NULL,
      `pprices` varchar(10) DEFAULT NULL,
      PRIMARY KEY (`pid`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    ------------------------------------------------------------------
    
    INSERT INTO `goods` VALUES ('100', '铅笔', '2.00');
    INSERT INTO `goods` VALUES ('101', '黑色签字笔', '3.00');
    INSERT INTO `goods` VALUES ('106', '惠普电脑n900', '6080');
    INSERT INTO `goods` VALUES ('107', '华硕电脑M009', '5789');
    INSERT INTO `goods` VALUES ('110', '红米K40', '1999');
    
  2. 打开启动类(SpingbootApplication)测试,显示以下信息则配置数据链接成功。

  3. 以便于项目后面持久层的开发。
    在这里插入图片描述

  4. 同时创建测试页访问是否创建springboot项目成功。

    • 在 resources 下的 static 创建 web/test.html 一个测试页面。(为了方便目录结构清晰,src和resource下创建包和多层目录,先进行设置下,把当前的钩去掉) 。然后在用New/Directory创建目录时,使用 / 进行创建,例如web/js/,即可达到多层目录结构。
      在这里插入图片描述

    • 编写简单页面在这里插入图片描述

    • 运行启动类(SpingbootApplication),然后浏览器输入8080端口访问,即可成功!(http://localhost:8080/web/test.html在这里插入图片描述


四、创建项目代码分层结构

  • 一般的项目创建,代码的分层结构,常见分为几种包:controller 控制器层、entity 实体层、mapper 持久层、service 业务层。service下又分 ex (Exception类),impl(implement 实现业务接口类)。

  • 额外的包有:config 配置类,interceptor 拦截器配置,util 工具类,等等其它包,根据项目需求分层。

  • 接下来 resources 下的 mapper 和 static 两个文件夹。mapper 配置抽象方法匹配的映射,编写SQL语句;static 静态资源,例如:js、jq、html、css等文件。在这里插入图片描述

  • 注意:idea和eclipse不同,不能识别Java文件夹中的xml文件,如果直接放在resource下,可以扫描识别,但是放在resource中的Java文件不能编译识别。

  • 现在我们只创建 controller、entity、mapper、service,同时 service 下创建 impl(即implement),这五个包。
    鼠标右击打开 New package:com.superclovers.spingboot.controller 在项目下创建controller控制器层,余下四个包同理创建。在这里插入图片描述
    在这里插入图片描述


五、正式开始编码工作

(一)实体类 entity——持久层的开发

  • 1、entity 包下创建 Goods 类
    @Data 是lombok工具包含了set,get,toString 方法,相关详细请看该文章——链接如下:https://blog.csdn.net/qq_41254299/article/details/104176272

    package com.superclovers.spingboot.entity;
    
    import lombok.Data;
    import java.io.Serializable;
    
    /**
     * 商品列表信息数据的实体类
     */
    @Data
    public class GoodsEntity implements Serializable {
        private static final long serialVersionUID = -7123568729160306865L;
        private Integer pid;
        private String pname;
        private String pprices;
    }
    

(二)持久层接口mapper,添加抽象方法

  • 1、mapper 包下创建 GoodsMapper 类

    package com.superclovers.spingboot.mapper;
    
    import com.superclovers.spingboot.entity.GoodsEntity;
    import org.springframework.stereotype.Repository;
    import java.util.List;
    
    /**
     * 处理商品数据的持久层接口
     */
    @Repository
    public interface GoodsMapper {
        /**
         * 获取所有商品列表
         * @return 商品列表
         */
        List<GoodsEntity> findList();
    }
    

    第一:@Reponsitory使用后,在启动类上需要添加@MapperScan(“xxx.xxx.xxx.mapper”)注解;
    第二:@Mapper注解使用后相当于@Reponsitory加@MapperScan注解,会自动进行配置加载。

  • 2、为让框架知道持久层接口在哪里,可以为持久层接口添加@Mapper注解,但是,这种做法就要求每个持久层接口都必须添加以上注解,可以改为在启动类(Application)的声明之前添加@MapperScan注解,以配置持久层接口所在的包。@MapperScan("com.superclovers.springboot.mapper")在这里插入图片描述

(三)抽象方法匹配的映射,编写SQL语句

  • 1、在 resources 创建 mapper 目录,注意创建的是 Directory 类型的目录,接着创建 GoodsMapper.xml 文件
    New ——> File ——> 文件名:GoodsMapper.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.superclovers.spingboot.mapper.GoodsMapper">
        <!-- 获取所有商品信息列表 -->
        <!-- List<GoodsEntity> findList();  -->
        <select id="findList" resultType="com.superclovers.spingboot.entity.GoodsEntity">
            select pid,pname,pprices from goods
        </select>
    </mapper>
    

    在这里插入图片描述

  • 2、在 application.properties 中配置这些XML映射文件的位置

    #3.Mybatis配置
    #3.1配置映射类所在的包
    mybatis.type-aliases-package=com.superclovers.springboot.entity
    #3.2mapper文件所在路径,这样写可匹配mapper目录下的所有mapper,包括其子目录下的
    mybatis.mapper-locations=classpath:mapper/*.xml
    
  • 3、测试类中编写并执行单元测试
    在 test 文件夹下的 mapper 下创建测试类

    		package com.superclovers.springboot.mapper;
    	
    	import com.superclovers.springboot.entity.GoodsEntity;
    	import org.junit.Test;
    	import org.junit.runner.RunWith;
    	import org.springframework.beans.factory.annotation.Autowired;
    	import org.springframework.boot.test.context.SpringBootTest;
    	import org.springframework.test.context.junit4.SpringRunner;
    	
    	import java.util.List;
    	
    	@RunWith(SpringRunner.class)
    	@SpringBootTest
    	public class GoodsMapperTests {
    	
    	    @Autowired
    	    public GoodsMapper mapper;
    	
    	    @Test
    	    public void findList() {
    	        System.err.println(mapper);
    	
    	        List<GoodsEntity> list = mapper.findList();
    	        System.err.println("count=" + list.size());
    	        for (GoodsEntity item : list) {
    	            System.out.println(item);
    	        }
    	    }
    	}
    

    在这里插入图片描述

  • 4、Run findList() 出现以下结果,查询到数据库的数据,则持久层这块内容成功。
    在这里插入图片描述


接下来就是控制器与持久层的对接工作!!!


六、业务层与持久层

(一)什么是业务层

  • 业务层用于控制业务流程和业务逻辑,从而保障数据安全。业务可能是由多个持久层功能组合而成,对于普通用户而言,表现为“某一个功能”;
    在外部访问时,只允许访问业务层,不允许直接访问持久层。

(二)创建业务接口

  • 创建业务层接口,添加抽象方法。在 service 包创建 IGoodsService (这里类名前加大写 I 表示业务接口类)

    package com.superclovers.springboot.service;
    
    import java.util.List;
    import com.superclovers.springboot.entity.GoodsEntity;
    
    /**
     * 处理商品数据的业务层接口
     */
    public interface IGoodsService {
    
        /**
         * 获取热销商品列表
         * @return 热销商品列表
         */
        List<GoodsEntity> getHotList();
    
    }
    

    在这里插入图片描述

(三)实现业务接口

  • 业务层实现类:在 service 的 impl 下创建 实现接口类 GoodsServiceImpl。

    package com.superclovers.springboot.service.impl;
    
    import com.superclovers.springboot.entity.GoodsEntity;
    import com.superclovers.springboot.mapper.GoodsMapper;
    import com.superclovers.springboot.service.IGoodsService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class GoodsServiceImpl implements IGoodsService {
        @Autowired
        private GoodsMapper goodsMapper;
    
        /**
         * 获取热销商品列表
         * @return 热销商品列表
         */
        @Override
        public List<GoodsEntity> getHotList() {
            return goodsMapper.findList();
        }
    }
    
    

    在这里插入图片描述

  • 在 test 下创建 com.superclovers.springboot.service.GoodsServiceTests 测试类,编写并执行测试方法,测试业务层实现类。

    package com.superclovers.springboot.service;
    
    import com.superclovers.springboot.entity.GoodsEntity;
    import org.junit.Test;
    import org.junit.runner.RunWith;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.boot.test.context.SpringBootTest;
    import org.springframework.test.context.junit4.SpringRunner;
    
    import java.util.List;
    
    @RunWith(SpringRunner.class)
    @SpringBootTest
    public class GoodsServiceTests {
        @Autowired
        IGoodsService service;
    
        @Test
        public void getHotList() {
            List<GoodsEntity> list = service.getHotList();
            System.err.println("count=" + list.size());
            for (GoodsEntity item : list) {
                System.err.println(item);
            }
        }
    }
    
    

    在这里插入图片描述

七、控制器层与持久层

(一)控制器的作用

  • 通过控制器接收用户的注册请求,当接收到请求后,控制器自身并不实现插入数据的操作,而是调用持久层对象来完成插入数据,最后,将结果响应给客户端。

(二)响应JSON数据的Result类创建

  • 先创建 util 工具包层,然后创建 ResponseResult 类,用于向客户端响应JSON数据。
package com.superclovers.springboot.util;

/**
 * 响应JSON结果的类
 *
 * @param <T> 响应的数据的类型
 *
 */
public class ResponseResult<T> {

    private Integer state;
    private String message;
    private T data;

    public ResponseResult() {
        super();
    }

    public ResponseResult(Integer state) {
        super();
        this.state = state;
    }

    public ResponseResult(Integer state, T data) {
        super();
        this.state = state;
        this.data = data;
    }

    public Integer getState() {
        return state;
    }

    public void setState(Integer state) {
        this.state = state;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

}

(三)创建控制器类

  • 创建控制类的基类

    package com.superclovers.springboot.controller;
    /**
     * 控制器类的基类
     */
    public abstract class BaseController {
    	
    	/**
    	 * 表示响应成功,用户的操作是正确的
    	 */
    	protected static final Integer SUCCESS = 200;
    
    }
    
    
  • 在 controller 包下创建 GoodsController 控制器类,并添加@RestController和@RequestMapping(“goods”)注解,然后在类中声明业务层对象

package com.superclovers.springboot.controller;

import com.superclovers.springboot.entity.GoodsEntity;
import com.superclovers.springboot.service.IGoodsService;
import com.superclovers.springboot.util.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * 处理商品相关请求的控制器类
 */
@RestController
@RequestMapping("springboot")
public class GoodsController extends BaseController {
    @Autowired
    private IGoodsService goodsService;

    @GetMapping("hot")
    public ResponseResult<List<GoodsEntity>> getHotList() {
        // 执行查询
        List<GoodsEntity> data = goodsService.getHotList();
        // 返回
        return new ResponseResult<>(SUCCESS, data);
    }
}

(四)测试

  • 运行启动类,打开浏览器,在地址栏中输入 http://localhost:8080/springboot/hot 进行测试,观察在浏览器看到的响应结果是否正确。在这里插入图片描述
  • 用新版火狐浏览器,测试,可看到json数据。
    在这里插入图片描述

八、整合前端界面

springboot 整合 ajax前端

  1. 在静态资源的文件目录 resources/static/web/ 下创建 goods.html 编码页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link type="text/css" rel="styleSheet" href="../js/bootstrap-3.4.1/css/bootstrap.css"/>
        <script src="../js/jquery-3.3.1.js"></script>
        <title></title>
    </head>
    <body>
    <div style="width: 1000px; border: 1px groove solid; margin: 0 auto; margin-top: 120px;">
    	<button id="btn_add" type="button" class="btn btn-default">新 增</button>
    	<table class="table table-hover">
        	<thead>
        		<tr style="font-size: 20px; font-weight: bold; text-align: center; border-top: 1px red solid;">
            		<td>编 号</td>
            		<td>名 称</td>
            		<td>单 价</td>
            		<td>操 作</td>
        		</tr>
        	</thead>
        	<tbody id="goods" style="text-align: center;">
        		<tr style="font-size: 15px;">
            		<td>23</td>
            		<td>23</td>
            		<td>23</td>
            		<td>23</td>
        		</tr>
        	</tbody>
    	</table>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            showGoodList();
        })
    
    //遍历数据
    function showGoodList() {
        $.ajax({
            "url": "/springboot/hot",
            "type": "get",
            "dataType": "json",
            "success": function (json) {
                var list = json.data;
                $("#goods").empty();
                for (var i = 0; i < list.length; i++) {
                    var html = '<tr>' +
                        '<td id="upid">#{pid}</td>' +
                        '<td id="upname">#{pname}</td>' +
                        '<td id="upprices">#{pprices}¥</td>' +
                        '<td>' +
                        '<button id="" type="button" class="btn btn-default" data-toggle="modal" data-target="#updateModal"><a href="javascript:btn_update(' + list[i].pid + ')">修改</a></button>' +
                        '<button data-id="12" id="btn_delete" type="button" class="btn btn-default" data-toggle="modal" data-target="#deleteModal" onclick="btn_delete(#{pid})">删除</button>' +
                        '</td>' +
                        '</tr>';
                    html = html.replace(/#{pid}/g, list[i].pid);
                    html = html.replace(/#{pname}/g, list[i].pname);
                    html = html.replace(/#{pprices}/g, list[i].pprices);
                    $("#goods").append(html);
                }
            }
        })
    }
    </body>
    </html>
    

    记得引入 bootstrap 框架和 jQuery 脚本
    最后打开浏览器输入 http://localhost:8080/springboot/goods.html 页面数据显示,完成前后端的交互。


剩下的增删改功能,下载源码对照学习理解。

九、结束(项目源码链接)

源码地址:GitHub:https://github.com/Xiaosen0v0/-spingboot.git
Git码云:https://gitee.com/Xiaosen2477/spingboot

数据库文件:https://pan.baidu.com/s/1skFuRvjbEgBcQjhwZKu2Iw
密码:73hm

后续的内容请耐心等等,马上就来!写作不易请点赞加收藏+关注,谢谢!

转载请注明出处:https://blog.csdn.net/qq_41254299
本文出自【Superclover_的博客】

<p> <br /> </p> <p style=&quot;color:#24292E;&quot;> 课程的实战源码是我在 GitHub 上开源项目&nbsp;<a href=&quot;https://github.com/ZHENFENG13/spring-boot-projects&quot;>spring-boot-projects</a>&nbsp;中的其中一个项目代码,目前已有 2300 多个 star,项目截图如下: </p> <p style=&quot;color:#24292E;&quot;> <img src=&quot;https://img-bss.csdn.net/201908031439119810.png&quot; alt=&quot;&quot; /> </p> <p style=&quot;color:#24292E;&quot;> <br /> </p> <p style=&quot;color:#24292E;&quot;> 由于项目比较受大家欢迎,因此心中就出现了将它做成教视频的想法,也就是你现在了解的这个课程《SpringBoot入门及前后端分离项目开发》,本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发。Spring Boot 介绍、前后端分离、API 规范等内容<strong>旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力;</strong>这最后的项目实战为课程的主要部分,我会带着大家实际的开发一个前后端分离的 Spring Boot 实践项目,让大家实际操作并从无到有开发一个线上项目,并习到一定的开发经验以及其中的开发技巧,<span>旨在让读者具有将 Spring Boot 真正应用于项目开发的能力;</span> </p> <p style=&quot;color:#24292E;&quot;> 以下为实践项目的页面和功能展示,分别为: </p> <ul style=&quot;color:#24292E;&quot;> <li> 登录页面 </li> </ul> <p> <span style=&quot;background-color:#FFFFFF;&quot;><img src=&quot;https://img-bss.csdn.net/201908031438579072.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p style=&quot;color:#24292E;&quot;> <br /> </p> <ul style=&quot;color:#24292E;&quot;> <li> 列表页面(分页功能) </li> </ul> <p> <span style=&quot;background-color:#FFFFFF;&quot;><img src=&quot;https://img-bss.csdn.net/201908031438403196.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p style=&quot;color:#24292E;&quot;> <br /> </p> <ul style=&quot;color:#24292E;&quot;> <li> 图片上传功能 </li> </ul> <p> <span style=&quot;background-color:#FFFFFF;&quot;><img src=&quot;https://img-bss.csdn.net/201908031438176997.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p style=&quot;color:#24292E;&quot;> <br /> </p> <ul style=&quot;color:#24292E;&quot;> <li> 富文本编辑器整合使用 </li> </ul> <p style=&quot;color:#24292E;&quot;> <br /> </p> <p style=&quot;color:#24292E;&quot;> <img src=&quot;https://img-bss.csdn.net/201908031437475366.png&quot; alt=&quot;&quot; /> </p> <p style=&quot;color:#24292E;&quot;> 实践项目的主要功能和页面就是这些,通过项目展示大家也能够感受到,在实际应用开发中的高频次功能都已经实现,稍加修改就可以运用到企业开发中,整个项目的开发模式为前后端分离的模式,即 Spring Boot 提供后端接口,前端页面通过 Ajax 异步调用接口的方式与后端服务器进行交互并将数据填充至页面中,这也是目前企业开发中比较重用的开发模式,希望大家能够了解并且能够实际的上手开发。 </p> <p> <br /> </p>
评论 26 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

Superclovers_

感谢你的支持,再接再厉

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值