Springboot+bootstrap介面版之增刪改查及圖片上傳

YoonBongChi發表於2020-12-03

匯入pom

	<mysql.version>5.1.44</mysql.version>
	<version>${mysql.version}</version>
	
	<dependency>
	    <groupId>com.alibaba</groupId>
	    <artifactId>druid-spring-boot-starter</artifactId>
	    <version>1.1.10</version>
	</dependency>
	<dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.3.1</version>
	</dependency>

2. 配置yml

0.0jpa配置和埠

	  server:
	  port: 80
	  servlet:
	    context-path: /
	spring:
	  jpa:
	    hibernate:
	      ddl-auto: update
	    show-sql: true

1.0duird資料連線池

datasource:
    #1.JDBC
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/yind?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
    username: root
    password: 123
    druid:
      initial-size: 5
      min-idle: 5
      max-active: 20
      max-wait: 60000
      time-between-eviction-runs-millis: 60000
      min-evictable-idle-time-millis: 30000
      validation-query: SELECT 1 FROM DUAL
      test-while-idle: true
      test-on-borrow: true
      test-on-return: false
      pool-prepared-statements: true
      max-pool-prepared-statement-per-connection-size: 20
      filter:
        stat:
          merge-sql: true
          slow-sql-millis: 5000
      web-stat-filter:
        enabled: true
        url-pattern: /*
        exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
        session-stat-enable: true
        session-stat-max-count: 100
      stat-view-servlet:
        enabled: true
        url-pattern: /druid/*
        reset-enable: true
        login-username: admin
        login-password: admin
        allow: 127.0.0.1

1.1解決thymeleaf模板快取

	thymeleaf:
	    cache: false

1.2解決圖片上傳大小限制問題,也可採取配置類

	  servlet:
	    multipart:
	      max-file-size: 20MB
	      max-request-size: 60MB

上傳檔案對映配置類MyWebAppConfigurer.java

建一個config包

 /**
 * 資源對映路徑
 */
@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        registry.addResourceHandler("/uploadImages/**").addResourceLocations("file:E:/temp/");
        super.addResourceHandlers(registry);
    }
}

1.解析

registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
 這個配置是,如果你不配,他會把你的圖片的請求,當作請求來處理。

registry.addResourceHandler("/uploadImages/**").addResourceLocations("file:E:/temp/");
這個配置是一個虛擬對映,將E:/temp/對映成一個網路請求

工具類

StringUtils .java

		package com.javabz.springbootjpa.utils;
		
		import java.util.ArrayList;
		import java.util.Arrays;
		import java.util.List;
		import java.util.Set;
		
		/**
		 * @author因果
		 * @site www.xiaomage.com
		 * @company xxx公司
		 * @create  2020-12-03 19:28
		 */
		public class StringUtils {
		    // 私有的構造方法,保護此類不能在外部例項化
		    private StringUtils() {
		    }
		
		    /**
		     * 如果字串等於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);
		    }
		
		    /**
		     * set集合轉string
		     * @param hasPerms
		     * @return
		     */
		    public static String SetToString(Set hasPerms){
		        return  Arrays.toString(hasPerms.toArray()).replaceAll(" ", "").replace("[", "").replace("]", "");
		    }
		
		    /**
		     * 轉換成模糊查詢所需引數
		     * @param before
		     * @return
		     */
		    public static String toLikeStr(String before){
		        return isBlank(before) ? null : "%"+before+"%";
		    }
		
		    /**
		     *	將圖片的伺服器訪問地址轉換為真實存放地址
		     * @param imgpath	圖片訪問地址(http://localhost:8080/uploadImage/2019/01/26/20190126000000.jpg)
		     * @param serverDir	uploadImage
		     * @param realDir	E:/temp/
		     * @return
		     */
		    public static String serverPath2realPath(String imgpath, String serverDir, String realDir) {
		        imgpath = imgpath.substring(imgpath.indexOf(serverDir));
		        return imgpath.replace(serverDir,realDir);
		    }
		
		    /**
		     * 過濾掉集合裡的空格
		     * @param list
		     * @return
		     */
		    public static List<String> filterWhite(List<String> list){
		        List<String> resultList=new ArrayList<String>();
		        for(String l:list){
		            if(isNotBlank(l)){
		                resultList.add(l);
		            }
		        }
		        return resultList;
		    }
		
		    /**
		     * 從html中提取純文字
		     * @param strHtml
		     * @return
		     */
		    public static String html2Text(String strHtml) {
		        String txtcontent = strHtml.replaceAll("</?[^>]+>", ""); //剔出<html>的標籤
		        txtcontent = txtcontent.replaceAll("<a>\\s*|\t|\r|\n</a>", "");//去除字串中的空格,回車,換行符,製表符
		        return txtcontent;
		    }
		
		    public static void main(String[] args) {
		    }
		}

PageUtil.java

	package com.javabz.springbootjpa.utils;
	
	import java.util.Map;
	import java.util.Set;

	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();
	    }
	}

PageBean.java

package com.javabz.springbootjpa.utils;

import javax.servlet.http.HttpServletRequest;
import java.util.Map;

/**
 * 分頁工具類
 */
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(StringUtils.isNotBlank(page)) {
			this.page = Integer.parseInt(page);
		}
	}

	public int getRows() {
		return rows;
	}

	public void setRows(String rows) {
		if(StringUtils.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(StringUtils.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(StringUtils.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 + "]";
	}
}

實體類

Teacher.java

	package com.javabz.springbootjpa.entity;
	
	import lombok.ToString;
	
	import javax.persistence.*;
	
	@Entity
	@Table(name = "t_springboot_teacher")
	@ToString
	public class Teacher {
	    @Id
	    @GeneratedValue
	    private Integer tid;
	    @Column(length = 16)
	    private String tname;
	    @Column(length = 4)
	    private String sex;
	    @Column(length = 100)
	    private String description;
	    @Column(length = 200)
	    private String imagePath;
	
	    public Integer getTid() {
	        return tid;
	    }
	
	    public void setTid(Integer tid) {
	        this.tid = tid;
	    }
	
	    public String getTname() {
	        return tname;
	    }
	
	    public void setTname(String tname) {
	        this.tname = tname;
	    }
	
	    public String getSex() {
	        return sex;
	    }
	
	    public void setSex(String sex) {
	        this.sex = sex;
	    }
	
	    public String getDescription() {
	        return description;
	    }
	
	    public void setDescription(String description) {
	        this.description = description;
	    }
	
	    public String getImagePath() {
	        return imagePath;
	    }
	
	    public void setImagePath(String imagePath) {
	        this.imagePath = imagePath;
	    }
	}

編寫dao類

	package com.javabz.springbootjpa.resources;
	
	import com.javabz.springbootjpa.entity.Teacher;
	import org.springframework.data.jpa.repository.JpaRepository;
	import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
	
	/**
	 * 
	 * 只要繼承JpaRepository,通常所用的增刪查改方法都有
	 *  第一個引數:操作的實體類
	 *  第二個引數:實體類對應資料表的主鍵
	 *
	 *  要使用高階查詢必須繼承
	 * org.springframework.data.jpa.repository.JpaSpecificationExecutor<T>介面
	 */
	public interface TeacherDao extends JpaRepository<Teacher, Integer>, JpaSpecificationExecutor<Teacher> {
	}

service層

TeacherService

		package com.javabz.springbootjpa.service;
		
		import com.javabz.springbootjpa.entity.Teacher;
		import com.javabz.springbootjpa.utils.PageBean;
		import org.springframework.data.domain.Page;
		
		/**
		 * @author因果
		 * @site www.xiaomage.com
		 * @company xxx公司
		 * @create  2020-12-03 20:25
		 */
		public interface TeacherService {
		    public Teacher save(Teacher teacher);
		
		    public void deleteById(Integer id);
		
		    public Teacher findById(Integer id);
		    public Page<Teacher> listPager(Teacher teacher, PageBean pageBean);
		}

TeacherServiceImpl.java

注意: 分頁的返回值是Page的願因是page能給於pageBean賦setTotal值

	package com.javabz.springbootjpa.service.impl;
	
	import com.javabz.springbootjpa.entity.Teacher;
	import com.javabz.springbootjpa.resources.TeacherDao;
	import com.javabz.springbootjpa.service.TeacherService;
	import com.javabz.springbootjpa.utils.PageBean;
	import com.javabz.springbootjpa.utils.StringUtils;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.data.domain.Page;
	import org.springframework.data.domain.PageRequest;
	import org.springframework.data.domain.Pageable;
	import org.springframework.data.jpa.domain.Specification;
	import org.springframework.stereotype.Service;
	
	import javax.persistence.criteria.CriteriaBuilder;
	import javax.persistence.criteria.CriteriaQuery;
	import javax.persistence.criteria.Predicate;
	import javax.persistence.criteria.Root;
	
	/**
	 * @author因果
	 * @site www.xiaomage.com
	 * @company xxx公司
	 * @create  2020-12-03 20:26
	 */
	@Service
	public class TeacherServiceImpl implements TeacherService {
	    @Autowired
	    private TeacherDao teacherDao;
	    @Override
	    public Teacher save(Teacher teacher) {
	        return teacherDao.save(teacher);
	    }
	
	    @Override
	    public void deleteById(Integer id) {
	        teacherDao.deleteById(id);
	    }
	
	    @Override
	    public Teacher findById(Integer id) {
	        return teacherDao.findById(id).get();
	    }
	
	    @Override
	    public Page<Teacher> listPager(Teacher teacher, PageBean pageBean) {
	//        jpa的Pageable分頁是從0頁碼開始
	        Pageable pageable = PageRequest.of(pageBean.getPage()-1, pageBean.getRows());
	        return teacherDao.findAll(new Specification<Teacher>() {
	            @Override
	            public Predicate toPredicate(Root<Teacher> root, CriteriaQuery<?> criteriaQuery, CriteriaBuilder criteriaBuilder) {
	                Predicate predicate = criteriaBuilder.conjunction();
	                if(teacher != null){
	                    if(StringUtils.isNotBlank(teacher.getTname())){
	                        predicate.getExpressions().add(criteriaBuilder.like(root.get("tname"),"%"+teacher.getTname()+"%"));
	                    }
	                }
	                return predicate;
	            }
	        },pageable);
	    }
	}

controll

	package com.javabz.springbootjpa.controller;
	
	import com.javabz.springbootjpa.entity.Teacher;
	import com.javabz.springbootjpa.service.TeacherService;
	import com.javabz.springbootjpa.utils.PageBean;
	import com.javabz.springbootjpa.utils.PageUtil;
	import com.javabz.springbootjpa.utils.StringUtils;
	import org.apache.commons.io.FileUtils;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.data.domain.Page;
	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.PathVariable;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.multipart.MultipartFile;
	import org.springframework.web.servlet.ModelAndView;
	
	import javax.servlet.http.HttpServletRequest;
	import java.io.File;
	import java.io.IOException;
	
	/**
	 * @author 小李飛刀
	 * @site www.javaxl.com
	 * @company
	 * @create  2019-02-20 22:15
	 */
	@Controller
	@RequestMapping("/teacher")
	public class TeacherController {
	    @Autowired
	    private TeacherService teacherService;
	
	    @RequestMapping("/listPager")
	    public ModelAndView list(Teacher teacher, HttpServletRequest request){
	        PageBean pageBean = new PageBean();
	        pageBean.setRequest(request);
	        ModelAndView modelAndView = new ModelAndView();
	        Page<Teacher> teachers = teacherService.listPager(teacher, pageBean);
	        modelAndView.addObject("teachers",teachers.getContent());
	        pageBean.setTotal(teachers.getTotalElements()+"");
	        modelAndView.addObject("pageCode", PageUtil.createPageCode(pageBean)/*.replaceAll("<","<").replaceAll("&gt:",">")*/);
	        modelAndView.setViewName("list");
	        return modelAndView;
	    }
	
	    @RequestMapping("/toEdit")
	    public ModelAndView toEdit(Teacher teacher){
	        ModelAndView modelAndView = new ModelAndView();
	        modelAndView.setViewName("edit");
	        modelAndView.addObject("sexArr",new String[]{"男","女"});
	        if(!(teacher.getTid() == null || "".equals(teacher.getTid()))) {
	            Teacher t = teacherService.findById(teacher.getTid());
	            modelAndView.addObject("teacher", t);
	        }
	        return modelAndView;
	    }
	
	    @RequestMapping("/add")
	    public String add(Teacher teacher, MultipartFile image){
	        try {
	            String diskPath = "E://temp/"+image.getOriginalFilename();
	            String serverPath = "/uploadImages/"+image.getOriginalFilename();
	            if(StringUtils.isNotBlank(image.getOriginalFilename())){
	                FileUtils.copyInputStreamToFile(image.getInputStream(),new File(diskPath));
	                teacher.setImagePath(serverPath);
	            }
	            teacherService.save(teacher);
	        } catch (IOException e) {
	            e.printStackTrace();
	        }
	        return "redirect:/teacher/listPager";
	    }
	
	
	    @RequestMapping("/edit")
	    public String edit(Teacher teacher, MultipartFile image){
	        String diskPath = "E://temp/"+image.getOriginalFilename();
	        String serverPath = "/uploadImages/"+image.getOriginalFilename();
	        if(StringUtils.isNotBlank(image.getOriginalFilename())){
	            try {
	                FileUtils.copyInputStreamToFile(image.getInputStream(),new File(diskPath));
	                teacher.setImagePath(serverPath);
	            } catch (IOException e) {
	                e.printStackTrace();
	            }
	        }
	        teacherService.save(teacher);
	        return "redirect:/teacher/listPager";
	    }
	
	    @RequestMapping("/del/{bid}")
	    public String del(@PathVariable(value = "bid") Integer bid){
	        teacherService.deleteById(bid);
	        return "redirect:/teacher/listPager";
	    }
	}

JSP程式碼

list.html

	<!DOCTYPE html>
	<html lang="en">
	<html xmlns:th="http://www.thymeleaf.org">
	<head>
	    <meta charset="UTF-8">
	    <title>書籍列表</title>
	    <script type="text/javascript" th:src="@{/static/js/xxx.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="@{/teacher/listPager}" method="post">
	    書籍名稱: <input type="text" name="tname" />
	    <input type="submit" value="提交"/>
	</form>
	<a th:href="@{/teacher/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="teacher : ${teachers}">
	        <td th:text="${teacher.tid}"></td>
	        <td><img style="width: 60px;height: 60px;" id="imgshow" th:src="${teacher.imagePath}" th:alt="${teacher.tname}"/></td>
	        <!--<td th:text="${teacher.imagePath}"></td>-->
	        <td th:text="${teacher.tname}"></td>
	        <td th:text="${teacher.sex}"></td>
	        <td th:text="${teacher.description}"></td>
	        <td>
	            <a th:href="@{'/teacher/del/'+${teacher.tid}}">刪除</a>
	            <a th:href="@{'/teacher/toEdit?tid='+${teacher.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="@{${teacher.tid} ? '/teacher/edit' : '/teacher/add'}" method="post" enctype="multipart/form-data">
	    <input type="hidden" name="tid" th:value="${teacher.tid}" />
	    <input type="hidden" name="imagePath" th:value="${teacher.imagePath}" />
	    <img id="imgshow" src="" alt=""/>
	    <input type="file" name="image" onchange="preShow();"></br>
	    教員名稱: <input type="text" name="tname" th:value="${teacher.tname}" /></br>
	    教員描述: <input type="text" name="description" th:value="${teacher.description}" /></br>
	    單選回顯
	    <input type="radio" name="sex"
	           th:each ="s:${sexArr}"
	           th:value="${s}"
	           th:text ="${s}"
	           th:attr ="checked=${s == teacher.sex}">
	
	    <input type="submit" value="提交"/>
	</form>
	
	</body>
	</html>

在這裡插入圖片描述

連結

連結: bootstrap3.
提取碼:wivs

測試

http://localhost/teacher/listPager

效果圖

在這裡插入圖片描述

總結:

1.不知如何終結

相關文章