利用thymeleaf 模板技術對讀取的班級信息進行映射,顯示 班級名稱。 對班級進行 刪除,修改 和 添加。 SpringBoot 的 model 映射。完整的增刪改查!

作業要求:

建立數據庫

classes班級表

cid  cname 

1801

1802

比如下圖:

我比較喜歡從後往前梳理流程和代碼

先來dao的 

dao層繼承了接口方法,就比如查單個或者查分頁的只用傳參數就ok不用寫sql語句的

ClassesDao

package com.msfh.news.dao;

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

import com.msfh.news.eneity.Classes;

public interface ClassesDao extends PagingAndSortingRepository<Classes, Integer>, JpaSpecificationExecutor<Classes> {
	Classes findByCcid(Integer ccid);
}

然後需要梳理service層 因爲我們的作業要求是一套完整的增刪改查所以我們就直接放些好的

這裏可以對比一下dao我沒有在dao裏寫太多的方法

但是我service調了很多方法,所以我們可以得知我所調用的方法是從接口來實現的

ClassesService

package com.msfh.news.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.msfh.news.dao.ClassesDao;
import com.msfh.news.eneity.Classes;

@Service
public class ClassesService {
    @Autowired
    private ClassesDao classessDao;
    
    
    public Iterable<Classes> findAll() {
    	return classessDao.findAll();
    }
    
    public Classes findByCcid(Integer ccid) {
    	return classessDao.findByCcid(ccid);
    }
    
    public void delete(Classes classes) {
    	classessDao.delete(classes);
    }
    
    public void classesAdd(Classes classes) {
    	classessDao.save(classes);
    }
}

接下來就是我們的controller層了

我們在這一層是通過thymeleaf 模板技術映射到html頁面的

ClassesController

package com.msfh.news.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.msfh.news.eneity.Classes;
import com.msfh.news.service.ClassesService;

@Controller
@RequestMapping("classes")
public class ClassesController {
    @Autowired
    private ClassesService classesService;
    /**
     * 映射模板
     * @return 路徑
     */
    @RequestMapping("classes")
    //@ResponseBody
    public String classes(Model model) {
    	List<Classes> data = (List<Classes>) classesService.findAll();
    	model.addAttribute("data", data);
    	return "news/classes";
    }
    
    @RequestMapping("findAll")
    @ResponseBody
    public Iterable<Classes> findAll() {
    	return classesService.findAll();
    }
    
    @RequestMapping("delete")
   // @ResponseBody
    public String delete(HttpServletRequest request) {
    	Integer ccid = Integer.parseInt(request.getParameter("ccid"));
    	System.out.println(ccid);
    	Classes classes = new Classes();
    	classes.setCcid(ccid);
    	classesService.delete(classes);
    	return "redirect:classes";
    }
    @RequestMapping("insert")
    public String insert() {
    	return "/news/classesAdd";
    }
    
    @RequestMapping("classesAdd")
    public String classesAdd(Classes classes) {
    	classesService.classesAdd(classes);
    	return "redirect:classes";
    }
    
    @RequestMapping("edit")
    public String edit(HttpServletRequest request,Model model)
    {
    	Integer ccid = Integer.parseInt(request.getParameter("ccid"));
    	Classes classes = classesService.findByCcid(ccid);
    	model.addAttribute("classes",classes);
    	return "/news/classesEdit";
    }
}

接下來是查詢的html頁面

在接下來會看到完整的增刪改查頁面,但是沒有刪除頁面我們的刪除直接映射到controller層然後去作用到方法去執行的刪除!

classes.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
</head>
<body>
  
<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 內容列表</strong></div>
  <div class="padding border-bottom">
    <button type="button" class="button border-yellow" onclick="window.location.href='/classes/insert'"><span class="icon-plus-square-o"></span> 添加</button>
  </div>
  <div id="app">
    <table class="table table-hover text-center">
      <tr>
        <th width="5%">ID</th>
        <th width="15%">班級名</th>
      </tr>

      <tr th:each="vo,key : ${data}">
        <td th:text="${vo.ccid}"></td>
        <td th:text="${vo.ccname}"></td>
        <td><div class="button-group"> <a class="button border-main"  th:href="@{/classes/edit(ccid=${vo.ccid})}"><span class="icon-edit"></span> 修改</a> <a class="button border-red" th:href="@{/classes/delete(ccid=${vo.ccid})}" ><span class="icon-trash-o"></span>刪除</a> </div></td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

classesAdd.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div class="panel admin-panel">
        <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加內容</strong></div>
        <div class="body-content">
            <form method="post" class="form-x" th:action="@{/classes/classesAdd}">  <!-- 規定編碼傳輸格式 -->
                <div class="form-group">
                    <div class="label">
                        <label>班級名稱:</label>
                    </div>
                    <div class="field">
                        <input type="text" class="input w50" name="ccname" id="ccname"/>
                        <div class="tips"></div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label></label>
                    </div>
                    <div class="field">
                        <button class="button bg-main icon-check-square-o" type="submit" name="submit"> 提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

classesEdit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div class="panel admin-panel">
        <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加內容</strong></div>
        <div class="body-content">
            <form method="post" class="form-x" th:action="@{/classes/classesAdd}" th:object="${classes}">  <!-- 規定編碼傳輸格式 -->
            	<input type="hidden" th:value="*{ccid}" id="ccid" name="ccid">
                <div class="form-group">
                    <div class="label">
                        <label>班級名稱:</label>
                    </div>
                    <div class="field">
                        <input type="text" class="input w50" name="ccname" id="ccname"  th:value="*{ccname}"/>
                        <div class="tips"></div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="label">
                        <label></label>
                    </div>
                    <div class="field">
                        <button class="button bg-main icon-check-square-o" type="submit" name="submit"> 提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章