springboot对jpa的支持以及与bootstrap的简单增删查改+图片上传

一、jpa是什么

       JPA全称Java Persistence API,是一组用于将数据存入数据库的类和方法的集合。JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中。   简单说jpa是jdk对数据库提供的接口,可以自动生成表。

二、springboot对jpa的配置

1、创建springboot项目时勾选jpa配置

 2、在pom.xml添加依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

3、application.yml配置

spring:
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true

 4、创建一个实体类

注解:

@Entity

@Table(name="表名")

@Id

@GeneratedValue//主键

@Column(length = 100)//列


import javax.persistence.*;

/**
 * @author 疯子侠
 * @site www.donggua.com
 * @company donggua公司
 * @create 2019-02-22 21:27
 */
@Entity
@Table(name = "t_springboot_person")
public class Person {
    @Id
    @GeneratedValue
    private Integer tid;
    @Column(length = 100)
    private String Pdesc;
    @Column(length = 300)
    private String image_path;
    @Column(length = 10)
    private String sex;
    @Column(length = 100)
    private String name;

    public Integer getTid() {
        return tid;
    }

    public void setTid(Integer tid) {
        this.tid = tid;
    }

    public String getPdesc() {
        return Pdesc;
    }

    public void setPdesc(String pdesc) {
        Pdesc = pdesc;
    }

    public String getImage_path() {
        return image_path;
    }

    public void setImage_path(String image_path) {
        this.image_path = image_path;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

启动类在数据库就会生成一张表和一个序列表

5、继承JpaRepository<实体类,主键的id类型>, JpaSpecificationExecutor<实体类>就有了增删查改的方法

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;

public interface PersonDao extends JpaRepository<Person,Integer> , JpaSpecificationExecutor<Person> {
}

实现类

serviceImpl层:

@Service
public class PersonServiceImpl implements PersonService {
    @Autowired
    private PersonDao personDao;

    @Override
    public Person save(Person person) {
        //在jpa中,增加和修改都是同一个方法
        return personDao.save(person);
    }

    @Override
    public void deleteById(Integer tid) {//删除
        personDao.deleteById(tid);
    }

    @Override
    public Person findById(Integer tid) {//查单个
        //查单个的方法是findById().get(),若用.getOne()这个方法会报错
        return personDao.findById(tid).get();
    }
    @Override
    public Page<Person> listPager(Person person, PageBean pageBean) {
         //jpa的Pageable分页是从0页码开始
        //PageBean.start('当前页',‘当也展示记录数’)
        Pageable pageable = PageRequest.of(pageBean.getPage()-1, pageBean.getRows());
        return personDao.findAll(new Specification<Person>() {
            @Override
            public Predicate toPredicate(Root<Person> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder criteriaBuilder) {
                Predicate predicate = criteriaBuilder.conjunction();
                if(person != null){
                    if(Stringutil.isNotBlank(person.getName())){
                        predicate.getExpressions().add(criteriaBuilder.like(root.get("name"),"%"+person.getName()+"%"));
                    }
                }
                return predicate;
            }
        },pageable);
    }

  }

 

service层 :

    public Person save(Person person) ;

    public void deleteById(Integer tid);

    public Person findById(Integer tid) ;

    public Page<Person> listPager(Person person, PageBean pageBean);

三、springboot+jpa+bootstrap做一个简单的增删查改以及图片上传

pom.xml要添加图片上传的依赖

<dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>

 application.yml配置添加配置

# 解决图片上传大小限制问题,也可采取配置类
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 60MB

config

springboot内嵌tomcat用配置关联

@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/images/**").addResourceLocations("file:E:/temp/");
        super.addResourceHandlers(registry);
    }
}

 

controller层

@Controller
@RequestMapping("/person")
public class PersonController {
    @Autowired
    private PersonService personService;

    @RequestMapping("/listPager")
    public ModelAndView list(Person person, HttpServletRequest request){
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        ModelAndView modelAndView = new ModelAndView();
        Page<Person> persons = personService.listPager(person, pageBean);
        modelAndView.addObject("persons",persons.getContent());
        pageBean.setTotal(persons.getTotalElements()+"");
        modelAndView.addObject("pageCode", PageUtil.createPageCode(pageBean)/*.replaceAll("<","<").replaceAll("&gt:",">")*/);
        modelAndView.setViewName("list");
        return modelAndView;
    }


    @RequestMapping("/toEdit")
    public ModelAndView toEdit(Person person){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("edit");
        modelAndView.addObject("sexArr",new String[]{"男","女"});
        if(!(person.getTid() == null || "".equals(person.getTid()))) {
            Person t = personService.findById(person.getTid());
            modelAndView.addObject("person", t);
        }
        return modelAndView;
    }

    @RequestMapping("/add")
    public String add(Person person, MultipartFile image){
        try {
            String diskPath = "E://temp/"+image.getOriginalFilename();
            String serverPath = "http://localhost:8080/springboot/images/"+image.getOriginalFilename();
            if(Stringutil.isNotBlank(image.getOriginalFilename())){
                FileUtils.copyInputStreamToFile(image.getInputStream(),new File(diskPath));
                person.setImage_path(serverPath);
            }
            personService.save(person);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "redirect:/person/listPager";
    }


    @RequestMapping("/edit")
    public String edit(Person person, MultipartFile image){
        String diskPath = "E://temp/"+image.getOriginalFilename();
        String serverPath = "http://localhost:8080/springboot/images/"+image.getOriginalFilename();
        if(Stringutil.isNotBlank(image.getOriginalFilename())){
            try {
                FileUtils.copyInputStreamToFile(image.getInputStream(),new File(diskPath));
                person.setImage_path(serverPath);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        personService.save(person);
        return "redirect:/person/listPager";
    }

    @RequestMapping("/del/{bid}")
    public String del(@PathVariable(value = "bid") Integer bid){
        personService.deleteById(bid);
        return "redirect:/person/listPager";
    }
}

pageBean

public class PageBean {
    private int page = 1;// 页码

    private int rows = 3;// 页大小

    private int total = 0;// 总记录数

    private boolean pagination = true;// 是否分页

    //	保存上次查询的参数
    private Map<String, String[]> paramMap;
    //	保存上次查询的url
    private String url;

    public void setRequest(HttpServletRequest request) {
        String page = request.getParameter("page");
        String rows = request.getParameter("offset");
        String pagination = request.getParameter("pagination");
        this.setPage(page);
        this.setRows(rows);
        this.setPagination(pagination);
        this.setUrl(request.getRequestURL().toString());
        this.setParamMap(request.getParameterMap());
    }

    public PageBean() {
        super();
    }

    public Map<String, String[]> getParamMap() {
        return paramMap;
    }

    public void setParamMap(Map<String, String[]> paramMap) {
        this.paramMap = paramMap;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public void setPage(String page) {
        if(Stringutil.isNotBlank(page)) {
            this.page = Integer.parseInt(page);
        }
    }

    public int getRows() {
        return rows;
    }

    public void setRows(String rows) {
        if(Stringutil.isNotBlank(rows)) {
            this.rows = Integer.parseInt(rows);
        }
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public void setTotal(String total) {
        if(Stringutil.isNotBlank(total)) {
            this.total = Integer.parseInt(total);
        }
    }

    public boolean isPagination() {
        return pagination;
    }

    public void setPagination(boolean pagination) {
        this.pagination = pagination;
    }

    public void setPagination(String pagination) {
        if(Stringutil.isNotBlank(pagination) && "false".equals(pagination)) {
            this.pagination = Boolean.parseBoolean(pagination);
        }
    }

    /**
     * 最大页
     * @return
     */
    public int getMaxPage() {
        int max = this.total/this.rows;
        if(this.total % this.rows !=0) {
            max ++ ;
        }
        return max;
    }

    /**
     * 下一页
     * @return
     */
    public int getNextPage() {
        int nextPage = this.page + 1;
        if(nextPage > this.getMaxPage()) {
            nextPage = this.getMaxPage();
        }
        return nextPage;
    }

    /**
     * 上一页
     * @return
     */
    public int getPreviousPage() {
        int previousPage = this.page -1;
        if(previousPage < 1) {
            previousPage = 1;
        }
        return previousPage;
    }


    /**
     * 获得起始记录的下标
     *
     * @return
     */
    public int getStartIndex() {
        return (this.page - 1) * this.rows;
    }

    @Override
    public String toString() {
        return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination + "]";
    }
}

 Stingutil

public class Stringutil {
    // 私有的构造方法,保护此类不能在外部实例化
    private Stringutil() {
    }

    /**
     * 如果字符串等于null或去空格后等于"",则返回true,否则返回false
     *
     * @param s
     * @return
     */
    public static boolean isBlank(String s) {
        boolean b = false;
        if (null == s || s.trim().equals("")) {
            b = true;
        }
        return b;
    }

    /**
     * 如果字符串不等于null或去空格后不等于"",则返回true,否则返回false
     *
     * @param s
     * @return
     */
    public static boolean isNotBlank(String s) {
        return !isBlank(s);
    }
}

PageUtil

public class PageUtil {
    public static String createPageCode(PageBean pageBean) {
        StringBuffer sb = new StringBuffer();
        /*
         * 拼接向后台提交数据的form表单
         * 	注意:拼接的form表单中的page参数是变化的,所以不需要保留上一次请求的值
         */
        sb.append("<form id='pageBeanForm' action='"+pageBean.getUrl()+"' method='post'>");
        sb.append("<input type='hidden' name='page'>");
        Map<String, String[]> parameterMap = pageBean.getParamMap();
        if(parameterMap != null && parameterMap.size() > 0) {
            Set<Map.Entry<String, String[]>> entrySet = parameterMap.entrySet();
            for (Map.Entry<String, String[]> entry : entrySet) {
                if(!"page".equals(entry.getKey())) {
                    String[] values = entry.getValue();
                    for (String val : values) {
                        sb.append("<input type='hidden' name='"+entry.getKey()+"' value='"+val+"'>");
                    }
                }
            }
        }
        sb.append("</form>");

        if(pageBean.getTotal()==0){
            return "未查询到数据";
        }else{
            sb.append("<li><a href='javascript:gotoPage(1)'>首页</a></li>");
            if(pageBean.getPage()>1){
                sb.append("<li><a href='javascript:gotoPage("+pageBean.getPreviousPage()+")'>上一页</a></li>");
            }else{
                sb.append("<li class='disabled'><a href='javascript:gotoPage(1)'>上一页</a></li>");
            }
            for(int i=pageBean.getPage()-1;i<=pageBean.getPage()+1;i++){
                if(i<1||i>pageBean.getMaxPage()){
                    continue;
                }
                if(i==pageBean.getPage()){
                    sb.append("<li class='active'><a href='#'>"+i+"</a></li>");
                }else{
                    sb.append("<li><a href='javascript:gotoPage("+i+")'>"+i+"</a></li>");
                }
            }
            if(pageBean.getPage()<pageBean.getMaxPage()){
                sb.append("<li><a href='javascript:gotoPage("+pageBean.getNextPage()+")'>下一页</a></li>");
            }else{
                sb.append("<li class='disabled'><a href='javascript:gotoPage("+pageBean.getMaxPage()+")'>下一页</a></li>");
            }
            sb.append("<li><a href='javascript:gotoPage("+pageBean.getMaxPage()+")'>尾页</a></li>");
        }

        /*
         * 给分页条添加与后台交互的js代码
         */
        sb.append("<script type='text/javascript'>");
        sb.append("		function gotoPage(page) {");
        sb.append("			document.getElementById('pageBeanForm').page.value = page;");
        sb.append("			document.getElementById('pageBeanForm').submit();");
        sb.append("		}");
        sb.append("		function skipPage() {");
        sb.append("			var page = document.getElementById('skipPage').value;");
        sb.append("			if(!page || isNaN(page) || parseInt(page)<1 || parseInt(page)>"+pageBean.getMaxPage()+"){");
        sb.append("				alert('请输入1~N的数字');");
        sb.append("				return;");
        sb.append("			}");
        sb.append("			gotoPage(page);");
        sb.append("		}");
        sb.append("</script>");
        return sb.toString();
    }
}

前端代码

list.html

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/static/js/aa.js}"></script>
    <link rel="stylesheet" th:href="@{/static/js/bootstrap3/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/js/bootstrap3/css/bootstrap-theme.min.css}">
    <script type="text/javascript" th:src="@{/static/js/bootstrap3/js/jquery-1.11.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/bootstrap3/js/bootstrap.min.js}"></script>
</head>
<body>
<form th:action="@{/person/listPager}" method="post">
    书籍名称: <input type="text" name="name" />
    <input type="submit" value="提交"/>
</form>
<a th:href="@{/person/toEdit}">新增</a>
<table border="1px" width="600px">
    <thead>
    <tr>
        <td>ID</td>
        <td>头像</td>
        <td>姓名</td>
        <td>性别</td>
        <td>简介</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr th:each="person : ${persons}">
        <td th:text="${person.tid}"></td>
        <td><img style="width: 60px;height: 60px;" id="imgshow" th:src="${person.image_path}" th:alt="${person.name}"/></td>
        <!--<td th:text="${teacher.imagePath}"></td>-->
        <td th:text="${person.name}"></td>
        <td th:text="${person.sex}"></td>
        <td th:text="${person.pdesc}"></td>
        <td>
            <a th:href="@{'/person/del/'+${person.tid}}">删除</a>
            <a th:href="@{'/person/toEdit?tid='+${person.tid}}">修改</a>
        </td>
    </tr>
    </tbody>
</table>


<nav>
    <ul class="pagination pagination-sm" th:utext="${pageCode}">
    </ul>

    <!--可以与之前的自定义标签分页进行对比-->
    <!--<ul class="pagination pagination-sm">-->
    <!--<form id='pageBeanForm' action='http://localhost:8080/springboot/teacher/listPager' method='post'><input type='hidden' name='page'></form>-->
    <!--<li><a href='javascript:gotoPage(1)'>首页</a></li>-->
    <!--<li class='disabled'><a href='javascript:gotoPage(1)'>上一页</a></li>-->
    <!--<li class='active'><a href='#'>1</a></li>-->
    <!--<li><a href='javascript:gotoPage(2)'>2</a></li>-->
    <!--<li><a href='javascript:gotoPage(2)'>下一页</a></li>-->
    <!--<li><a href='javascript:gotoPage(4)'>尾页</a></li>-->
    <!--<script type='text/javascript'>	function gotoPage(page) {	document.getElementById('pageBeanForm').page.value = page; document.getElementById('pageBeanForm').submit();	}	function skipPage() {	var page = document.getElementById('skipPage').value;	if(!page || isNaN(page) || parseInt(page)<1 || parseInt(page)>4){ alert('请输入1~N的数字');	return;	}	gotoPage(page);	}</script>-->
    <!--</ul>-->
</nav>
</body>
</html>

edit.html

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户编辑界面</title>

    <script type="text/javascript">
        function preShow() {

        }
    </script>
</head>
<body>

<form th:action="@{${person.tid} ? '/person/edit' : '/person/add'}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="tid" th:value="${person.tid}" />
    <input type="hidden" name="image_path" th:value="${person.image_path}" />
    <img id="imgshow" src="" alt=""/>
    <input type="file" name="image" onchange="preShow();"></br>
    教员名称: <input type="text" name="name" th:value="${person.name}" /></br>
    教员描述: <input type="text" name="pdesc" th:value="${person.pdesc}" /></br>
    单选回显
    <input type="radio" name="sex"
           th:each ="s:${sexArr}"
           th:value="${s}"
           th:text ="${s}"
           th:attr ="checked=${s == person.sex}">

    <input type="submit" value="提交"/>
</form>

</body>
</html>

运行后的效果

原文地址:https://blog.csdn.net/oydl_1234/article/details/87888883

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e