SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
2024-04-10 03:03:26
前端页面的搭建
首先我们在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"stripestyle="width: 100%"><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><el-table-columnprop="clazz"label="班级"></el-table-column><el-table-columnprop="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"stripestyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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"stripestyle="width: 100%"><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><el-table-columnprop="clazz"label="班级"></el-table-column><el-table-columnprop="sumScore"label="总分"></el-table-column><el-table-columnlabel="操作"><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-paginationlayout="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 {@Resourceprivate StudentService studentService;@GetMappingpublic 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();}@PostMappingpublic 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 {@Resourceprivate 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;}
}SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...相关推荐
- 从零开始搭建一个web图书管理项目（增删改查功能）
参考资料:https://blog.csdn.net/qq_23994787/article/details/73612870 http://how2j.cn/ 实习第一周,写下一些在建立web项目中 ...
- Springboot+Mybatis-plus实现增删改查功能超详细
1.后端实现 用到的依赖:Springboot,Mybatis-plus,lombok,mysql驱动 1.1.利用IDEA2021创建一个Springboot项目 注意:Name(项目名称) loc ...
- dept在Java里面_EmpDeptManager 在JavaEE环境下搭建三大框架体系实现员工的增删改查系统 Develop 261万源代码下载- www.pudn.com...
文件名称: EmpDeptManager下载 收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 39 KB 上传时间: 2016-07-08 下载次数: 0 提 供 者 ...
- Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能，无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
- 基于SpringBoot开发一个Restful服务，实现增删改查功能
点击上方"方志朋",选择"置顶公众号" 技术文章第一时间送达! 作者:虚无境 cnblogs.com/xuwujing/p/8260935.html 前言 在去 ...
- springboot增删改查案例_大神基于SpringBoot开发一个Restful服务，实现增删改查功能...
前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
- javaweb增删改查实例_JavaWeb图像可视化管理系统之后台搭建（二）用户管理与增删改查（内含代码）...
上一篇文章中,我们介绍了环境配置与后台设计,对于不了解的同学,可以看这个链接 CharlesDDDD:JavaWeb图像可视化管理系统之后台搭建(一)环境配置与后台设计zhuanlan.zhihu. ...
- mock模拟的数据能增删改查吗_Mock.js模拟数据，脱离后端独立开发，实现增删改查功能...
在目前容近对端手近对端手近对端手近对端手近我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于 ...
- web前端期末大作业 基于HTML+CSS+JavaScript角色管理(带增删改查功能)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | ...
最新文章
- HDU 4869 Turn the pokers（思维+组合公式+高速幂）
- unittest单元测试简单介绍
- 机器人码垛手持式编程_三分钟告诉你企业为什么要使用全自动码垛机械手！
- android 动态设置View的高度和宽度，ViewTreeObserver使用
- Apollo使用指南（一）普通应用接入指南
- ArcGIS实验教程——实验四十二：ArcGIS密度分析（核密度、点密度、线密度）
- https://www.cnblogs.com/skywang12345/category/455711.html
- 推荐新唐工业级ARM9（NUC972DF62Y)，集成64M DDR2，多至11个串口
- 对于微信二维码相关官方文档的一些注解（微信登录和绑定微信、关注公众号）
- 苹果2019年财报数据：年收入2600亿美元，市值1.3万亿美元
- 微众java面试_微众面试经验
- 使用JavaMail实现收取和回复邮件
- jqGrid 数据加载完事件 loadComplete 使用
- Facebook广告怎么投放？脸书广告的展现形式是怎么样的？
- 【网络间谍篇】SolarWinds供应链攻击事件的来龙去脉
- 北漂生活第十六弹-5.29拖更时刻
- 网络攻防实验：ARP和DNS欺骗攻击
- WPF 九 （ loaded 事件和 Initialized 事件区别以及事件执行顺序总结）
- 深入了解侧扫声呐图像处理拖鱼位置估算
- 【python】datetime模块计算时间差