前期準(zhǔn)備

使用idea新建個(gè)SpringBoot項(xiàng)目

在數(shù)據(jù)庫(kù)中建student表

建包

1.編寫(xiě)entity包下實(shí)體類Student

（一個(gè)Javabean規(guī)范）

package com.example.stu.kudestu.stu.entity;import javax.persistence.*;@Entity@Table(name = 'student')//@Entity 應(yīng)用在實(shí)體類上 @Table(name = 'student') 應(yīng)用在實(shí)體類上,并且name屬性為數(shù)據(jù)庫(kù)表名public class Student { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) //ID自增 private Integer id; private String name; private int age; private String sex; @Override public String toString() { return 'Student{' +'id=' + id +', name=’' + name + ’’’ +', age=' + age +', sex=’' + sex + ’’’ +’}’; } public Student() { } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; }}

2.編寫(xiě)dao層StudentDao類

package com.example.stu.kudestu.stu.dao;import com.example.stu.kudestu.stu.entity.Student;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.Query;import org.springframework.data.repository.query.Param;import java.util.List;public interface StudentDao extends JpaRepository<Student,Integer> {//<Student,Integer>兩個(gè)參數(shù)實(shí)體類和主鍵類型 Student findStuById(Integer id); @Query(name='findStuByName',nativeQuery = true,value = 'select * from student where name=:name ') List<Student> findStuByName(@Param('name') String name);}

3.編寫(xiě)service層類StudentService，面象接口

import com.example.stu.kudestu.stu.entity.Student;import org.springframework.data.domain.Page;import java.util.List;public interface StudentService { Student save(Student student);//添加學(xué)生 Student update(Student student);//修改 void delete(Integer id);//通過(guò)id刪除學(xué)生 Student findStuById(Integer id);//通過(guò)ID查找學(xué)生，接口中沒(méi)有此方法，在StudentDao接口創(chuàng)建 List<Student> findStuByName(String name);//通過(guò)學(xué)生姓名查找，在StudentDao接口創(chuàng)建 /** * 分頁(yè)查詢所有數(shù)據(jù) * @param page //當(dāng)前頁(yè) * @param pageSize //每頁(yè)記錄數(shù) * @return */ Page<Student> findAll(int page,int pageSize);}

在service對(duì)接口實(shí)現(xiàn)

import org.springframework.stereotype.Service;import java.util.List;@Servicepublic class StudentServiceimpl implements StudentService { @Autowired//用于類中的屬性注入 private StudentDao studentDao; @Override public Student save(Student student) { return studentDao.save(student); } @Override public Student update(Student student) { return studentDao.save(student); } @Override public void delete(Integer id) { studentDao.deleteById(id); } @Override public Student findStuById(Integer id) { return studentDao.findStuById(id); } @Override public List<Student> findStuByName(String name) { return studentDao.findStuByName(name); } @Override public Page<Student> findAll(int page,int pageSize) { Pageable pageable= PageRequest.of(page,pageSize); return studentDao.findAll(pageable); }}

4.編寫(xiě)Controller層StudentController類

package com.example.stu.kudestu.stu.controller;import com.example.stu.kudestu.stu.dao.StudentDao;import com.example.stu.kudestu.stu.entity.Student;import com.example.stu.kudestu.stu.service.StudentService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletResponse;import java.util.List;@RestController /*應(yīng)用在Controller層的類上面@RequestMapping('/s')public class StudentController { @Autowired//依賴注入 private StudentService studentService; /** * 添加學(xué)生 * @param student 要添加學(xué)生對(duì)象 * @return */ @PostMapping('/add') /*@PostMapping 映射一個(gè)POST請(qǐng)求 Spring MVC新特性 提供了對(duì)Restful風(fēng)格的支持@GetMapping，處理get請(qǐng)求 @PostMapping，處理post請(qǐng)求 @PutMapping，處理put請(qǐng)求 @DeleteMapping，處理delete請(qǐng)求*/ public Student save(Student student){ return studentService.save(student); } /** * 修改學(xué)生 * @param student */ @PostMapping('/update') public Student update(Student student){ return studentService.save(student); } /** * 刪除學(xué)生 * @param id 要?jiǎng)h除學(xué)生id * @return */ @GetMapping('/del/{id}') public String del(@PathVariable int id){ studentService.delete(id); return 'yes'; } @GetMapping('/findByName/{name}') public List<Student> findByName(@PathVariable String name){ return studentService.findStuByName(name); } @GetMapping('/query') public Page<Student> findByPage(Integer page , HttpServletResponse response){ response.setHeader('Access-Control-Allow-Origin','*'); //解決跨域請(qǐng)求 if(page==null||page<=0){ page=0; }else{ page-=1; } return studentService.findAll(page,5); }}

@RestController

應(yīng)用在Controller層的類上面，@RestController注解相當(dāng)于@ResponseBody ＋ @Controller合在一起的作用，同時(shí)返回的數(shù)據(jù)為json數(shù)據(jù)

使用@Controller 注解，在對(duì)應(yīng)的方法上，視圖解析器可以解析return 的jsp,html頁(yè)面，并且跳轉(zhuǎn)到相應(yīng)頁(yè)面若返回json等內(nèi)容到頁(yè)面，則需要加@ResponseBody注解

@PostMapping(value = '/add')等價(jià)于@RequestMapping(value = '/add',method = RequestMethod.POST)

5.利用HBuilder進(jìn)行前端編寫(xiě)

Jquery.js內(nèi)容到https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js復(fù)制即可

主頁(yè)面：index.html

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> <script src='http://www.baoyu77737.com/bcjs/js/jquery.js' type='text/javascript' charset='utf-8'></script><script type='text/javascript'> var page = 1; var tp = 0; $(function(){showData(); }); function upPage(){if(page>1){ page--; showData();} } function downPage(){if(page<tp){ page++; showData();} } function showData(){$.ajax({ url:’http://localhost:8888/stu/s/query?page=’+page, success:function(result){var rel = result.content; tp = result.totalPages;var htmlStr = '<table width=’80%’ algin=’center’ border=’1’>'+ '<tr><th>ID</th><th>姓名</th><th>年齡</th><th>性別</th><th>操作</th></tr>';for(var i=0;i<rel.length;i++){ var stu = rel[i]; htmlStr += '<tr><td>'+stu.id+'</td><td>'+stu.name+'</td><td>'+stu.age+'</td><td>'+stu.sex+'</td>'+ '<td><a href=’’>編輯</a>&nbsp;<a href=’http://localhost:8888/stu/s/del/'+stu.id+'’>刪除</a></td></tr>'; }htmlStr += '</table>';$('#show').html(htmlStr); }}); } </script> </head> <body><h1 style='text-align: center;'>學(xué)生管理系統(tǒng)</h1> <hr> <a href='http://www.baoyu77737.com/bcjs/add.html' rel='external nofollow' >添加學(xué)生</a><div id='show'> </div><a href='javascript:upPage();' rel='external nofollow' >上一頁(yè)</a>&nbsp;&nbsp;<a href='javascript:downPage();' rel='external nofollow' >下一頁(yè)</a> </body></html>

頁(yè)面效果

添加學(xué)生的頁(yè)面信息add.html

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> </head> <body> <h1>添加學(xué)生</h1> <hr> <form action='http://localhost:8888/stu/s/add' method='post'> <p>姓名：<input type='text' name='name' /> </p> <p>年齡：<input type='text' name='age' /> </p> <p>性別：<input type='radio' name='sex' value='男' checked />男<input type='radio' name='sex' value='女' />女 </p> <p><input type='submit' value='保存' /> </p> </form> </body></html>

頁(yè)面效果

’

如何利用分頁(yè)

直接調(diào)用Dao接口的父類JPA接口的分頁(yè)方法

在Service接口層定義：

/** * 分頁(yè)查詢所有數(shù)據(jù) * @param page * @param pageSize * @return */ Page<Student> findAll(int page,int pageSize);

Service實(shí)現(xiàn)：

public Page<Student> findAll(int page,int pageSize) { Pageable pageable= PageRequest.of(page,pageSize); return studentDao.findAll(pageable); }

Controller層：

@GetMapping('/query') public Page<Student> findByPage(Integer page , HttpServletResponse response){ response.setHeader('Access-Control-Allow-Origin','*'); if(page==null||page<=0){ page=0; }else{ page-=1; } return studentService.findAll(page,5); }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。