前端頁面的搭建
首先我們在resources包下新建一個文件夾static，SpringBoot默認會去把static包下的文件做一個路由
然后在static包下新建一個HTML File類型的文件，文件名為index.html(這是默認的)
在index.html文件中
<!DOCTYPE html>
<html lang="en">
//完整的html分為head(頭)、body(身)
<head>
//head中一般寫一些描述性的東西，或者引入一些樣式
<meta charset="UTF-8">
//上面都不用管，實際上html就是xml格式的文件
//首先我們把這里的一級標題修改一下
<title>學生信息1</title>
</head>
<body>
//網頁的內容在body中定義
//<h1>~<h6> -- 一級到六級標題
//實際上MarkDown和html可以相互轉換
<h2>學生信息2</h2>
</body>
</html>那么學生信息1和學生信息2有什么區別呢？？
#注在運行SpringBoot項目之后，index.html可以直接在文件夾中通過瀏覽器打開
在看完兩個標題的區別之后，我們繼續在index.html文件中添加內容
Element--網站快速成型工具
//剛剛的網頁頁面只有標題，光禿禿的很難看
//所以我們這邊去加一些樣式，這里需要用到前端的一些樣式庫
//在這里推薦前端框架Vue，基於它開發的有一個前端樣式庫element
將在前端樣式庫element中拉過來的模板修改之后覆蓋之前index.html文件的內容
//前端頁面的搭建
//（添加分頁功能、前端頁面的布局、新增和刪除功能、編輯功能和搜索功能之前的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學生信息</title>
<!-- import CSS -->
<link rel="stylesheet" href="element.css">
</head>
<body>
<h2>學生信息</h2>
<div id="app">
//我們先把上半部分的el-table拉到index.html文件中，並做相應修改
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="gender"
label="性別">
</el-table-column>
<el-table-column
prop="clazz"
label="班級">
</el-table-column>
<el-table-column
prop="sumScore"
label="總分">
</el-table-column>
</el-table>
</div>
</body>
<!-- 導入前端依賴庫 -->
<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>
<script>
new Vue({
//這里的#app是jquery的語法，#表示查找id，那么#app就是取到上面<div id="app">這個標簽
el: '#app',
data:{
//在這個data后面加上上面表格需要展示的數據
tableData: [],//先定義tableData的類型--list
},
//這邊還可以加上created()方法，在它初始化的時候會默認調用這個方法
created(){
$.get("http://localhost:8080/stu").then(res=>{
//這里面是賦值操作
this.tableData=res.data;
})
}
})
</script>
</html>#記得要刷新一下重啟服務器哦
現在我們去拉一些前端開源的庫(資源)
然后修改一下index.html文件中的內容--導入前端依賴庫
做完這一步之后我們前端頁面環境的搭建就基本完成了
前端頁面的編寫
觀察我們數據庫中的表之后，我們在前端樣式庫element選擇Table表格來展現我們的數據
//其中代碼為
//觀察發現這里的代碼分為兩塊
<template>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
-----------------------------------------------------------------------------------
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}]
}
}
}
</script>我們先把上半部分的el-table拉到index.html文件中
以上步驟對index.html文件的修改都在上方index.html代碼中
添加分頁功能、前端頁面的布局、新增和刪除功能、編輯功能和搜索功能
前端不擅長，這邊放一下實現這些功能的代碼，以后也用不到，就不細說了
實現分頁和增刪改查功能的代碼
前端index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學生信息</title>
<!-- import CSS -->
<link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width:80%;margin:0 auto">
<h2>學生信息</h2>
<el-row>
<el-col :span="6">
<el-button type="success" round @click="add">新增</el-button>
<el-input style="width:60%" v-model="clazz" placeholder="請輸入班級進行查找" @keyup.enter.native="search"></el-input>
</el-col>
</el-row>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="gender"
label="性別">
</el-table-column>
<el-table-column
prop="clazz"
label="班級">
</el-table-column>
<el-table-column
prop="sumScore"
label="總分">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
</template>
</el-table-column>
</el-table>
<el-row type="flex" class="row-bg" justify="center">
<el-pagination
layout="prev, pager, next"
:total="totalElements"
:page-size="pageSize"
:current-page.sync="pageNum"
@current-change="loadTable">
</el-pagination>
</el-row>
<el-dialog title="新增學生" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡" :label-width="formLabelWidth">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性別" :label-width="formLabelWidth">
<el-select v-model="form.gender" placeholder="請選擇性別">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
<el-form-item label="班級" :label-width="formLabelWidth">
<el-input v-model="form.clazz"></el-input>
</el-form-item>
<el-form-item label="總分" :label-width="formLabelWidth">
<el-input v-model="form.sumScore"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">確 定</el-button>
</div>
</el-dialog>
</div>
</body>
<!-- 導入前端依賴庫 -->
<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>
<script>
new Vue({
el: '#app',
data:{
tableData: [],
pageSize:10,
pageNum:1,
totalElements:0,
clazz:'',
dialogFormVisible:false,
form: {},
formLabelWidth: '80px'
},
created(){
this.loadTable();
},
methods:{
loadTable(){
$.get("/stu/pageOrsearch?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&clazz="+this.clazz).then(res=>{
this.tableData=res.data.content;
this.totalElements=res.data.totalElements;
})
},
del(id){
console.log(id);
$.ajax({
url: '/stu/' + id,
type: 'delete',
contentType: 'application/json'
}).then(res=>{
console.log(res);
// 重新加載頁面
this.loadTable();
})
},
add(){
this.dialogFormVisible = true;
},
save(){
console.log(this.form);
$.ajax({
url:'/stu',
type:'post',
contentType:'application/json',
data: JSON.stringify(this.form)
}).then(res=>{
console.log(res);
this.dialogFormVisible = false;
this.loadTable();
this.form = {};
})
},
edit(row){
this.form = row;
this.dialogFormVisible = true;
},
search(){
this.pageNum = 1;
this.loadTable();
}
}
})
</script>
</html>SpringBoot項目入口
package com.shujia;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringBootDemoApplication {
public static void main(String[] args) {
// 啟動Spring應用
SpringApplication.run(SpringBootDemoApplication.class,args);
}
}
Controller層
package com.shujia.Controller;
import com.shujia.Entity.Student;
import com.shujia.Service.StudentService;
import com.shujia.common.Result;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController // 將數據以JSON格式返回
@RequestMapping("/stu")
public class StudentController {
@Resource
private StudentService studentService;
@GetMapping
public Result<List<Student>> findAll() {
List<Student> list = studentService.findAll();
return Result.success(list);
}
// /stu/page?pageSize=10&pageNum=1
// @GetMapping("/page")
// public Result<Page<Student>> findPage(@RequestParam(name = "pageSize") Integer pageSize,
// @RequestParam(name = "pageNum") Integer pageNum) {
// System.out.println(pageSize);
// System.out.println(pageNum);
// Page<Student> page = studentService.findPage(pageSize, pageNum);
// return Result.success(page);
//
// }
@DeleteMapping("/{id}")
public Result deleteById(@PathVariable("id") Integer id) {
System.out.println(id);
studentService.deleteById(id);
return Result.success();
}
@PostMapping
public Result saveStu(@RequestBody Student stu) {
studentService.save(stu);
return Result.success();
}
@GetMapping("/pageOrsearch")
public Result<Page<Student>> searchByClazz(@RequestParam(name = "pageSize") Integer pageSize,
@RequestParam(name = "pageNum") Integer pageNum,
@RequestParam(name = "clazz") String clazz) {
System.out.println(clazz);
Page<Student> students = studentService.searchByClazz(pageSize, pageNum, clazz);
return Result.success(students);
}
}
common
package com.shujia.common;
public class Result<T> {
private String code;
private String msg;
private T data;
public Result() {
}
public Result(T data) {
this.data = data;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
// 請求成功 不返回數據
public static <T> Result<T> success() {
Result rs = new Result<>();
rs.setCode("200");
rs.setMsg("ok");
return rs;
}
// 請求成功 返回數據
public static <T> Result<T> success(T data) {
Result<T> rs = new Result<T>(data);
rs.setCode("200");
rs.setMsg("ok");
return rs;
}
// 請求失敗
public static <T> Result<T> error(String code, String msg) {
Result rs = new Result<>();
rs.setCode(code);
rs.setMsg(msg);
return rs;
}
}
Service層
package com.shujia.Service;
import com.shujia.Dao.StudentRepository;
import com.shujia.Entity.Student;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
@Service
public class StudentService {
@Resource
private StudentRepository studentRepository;
public List<Student> findAll() {
return studentRepository.findAll();
}
public Page<Student> findPage(Integer pageSize, Integer pageNum) {
PageRequest pg = PageRequest.of(pageNum - 1, pageSize);
Page<Student> pageStu = studentRepository.findAll(pg);
return pageStu;
}
public void deleteById(Integer id) {
studentRepository.deleteById(id);
}
public void save(Student stu) {
studentRepository.save(stu);
}
public Page<Student> searchByClazz(Integer pageSize, Integer pageNum, String clazz) {
Sort sort = new Sort(Sort.Direction.DESC, "sum_score");
PageRequest pg = PageRequest.of(pageNum - 1, pageSize, sort);
Page<Student> stuLikeClazz = studentRepository.findByClazz(clazz, pg);
return stuLikeClazz;
}
}
Dao層
package com.shujia.Dao;
import com.shujia.Entity.Student;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
@Repository
public interface StudentRepository extends JpaRepository<Student, Integer> {
@Query(value = "select * from student where clazz like %?%", nativeQuery = true)
public Page<Student> findByClazz(String clazz, PageRequest pg);
}
Entity層
package com.shujia.Entity;
import javax.persistence.*;
@Entity
@Table(name = "student")
public class Student {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY) // 描述id自增
private Integer id;
private String name;
private Integer age;
private String gender;
private String clazz;
// 屬性名一般同數據庫中表的列名保持一致，不一致時可以使用@Column注解
@Column(name = "sum_score")
private Integer sumScore;
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 Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getClazz() {
return clazz;
}
public void setClazz(String clazz) {
this.clazz = clazz;
}
public Integer getSumScore() {
return sumScore;
}
public void setSumScore(Integer sumScore) {
this.sumScore = sumScore;
}
}