这个我自己敲的项目，但是我不会使用这个前端模板为我自己用。有没有大佬指点的 ，我自己修改了一点 这是前端的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理easyui版</title>
<link rel="stylesheet" type="text/css" href="/easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/easyui/demo/demo.css">
</head>
<body>
<div id="tb">
<select id="cc" class="easyui-combotree" style="width:200px;" checkbox="true">
</select>
姓名：<input class="easyui-textbox" style="width:75px;height:22px" name="name" />
<a href="#" id="select" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="update()">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="addFile()">添加</a>
<a href="#" class="easyui-linkbutton" id="delete" data-options="iconCls:'icon-remove',plain:true">删除</a>
</div>
<div id="dg">
</div>
</body>
<div id="form1" hidden>
<form id="ff">
<table border="0" cellpadding="1" cellspacing="2" >
<input type="text" name="id" hidden>
<tr>
<td style="width:60px;">姓名：</td>
<td style="width:100px">
<input name="name" class="easyui-textbox" style="width:200px;"/>
</td>
</tr>
<tr>
<td >年龄：</td>
<td >
<input name="age" class="easyui-textbox" style="width:200px;" />
</td>
</tr>
<tr>
<td >性别：</td>
<td >
<input class="easyui-radiobutton" name="sex" value="1" label="男:">
<input class="easyui-radiobutton" name="sex" value="0" label="女:">
</td>
</tr>
<tr>
<td >注册时间：</td>
<td >
<input type="text" id="datetime1" name="time" style="width:200px;" data-options="formatter:ww4,parser:w4" class="easyui-datetimebox">
</td>
</tr>
<tr >
<td style="text-align: center"></td>
<td style="text-align: center"><a href="#" class="easyui-linkbutton" onclick="submitForm()">保存</a>
<a href="#" class="easyui-linkbutton" onclick="outTo()">返回</a>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script >
$(function () {
$('#dg').datagrid({
url: '/student/getAll',
border: false,
method: 'GET',
rownumbers: true,
toolbar: '#tb',
pagination: true,
fit: true,
pageSize: "15",
pageList: [5, 10, 15, 20],
editorHeight: "100",
striped: "true",
singleSelect: true,
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
columns: [
[
{field:'ck',checkbox:true},
{field: 'id', title: '学号', width: 120},
{field: 'name', title: '姓名', width: 120},
{field: 'sex', title: '性别', width: 120},
{field: 'age', title: '年龄', width: 120},
{field: 'time', title: '录入时间', width: 150},
]
],
});
$("#cc").combotree({
lines: true,
panelWidth: 200,
panelHeight: 200,
url: '/grade/name',
method: 'get',
textField: 'text',
valueField: 'id',
value:"请选择班级"
})
$("#bb").combotree({
lines: true,
panelWidth: 200,
panelHeight: 200,
url: '/grade/name',
method: 'get',
textField: 'text',
valueField: 'id',
value:"请选择班级"
})
$("#select").click(function(){//点击查询按钮的触发事件
$("#dg").datagrid('load',
{
name: $("input[name='name']").val(),
classId: classId(),
});
$("#cc").combotree('clear');
});
$("#delete").click(function () {
var rows = $('#dg').datagrid('getSelections');
if(rows.length>0){
confirm("确定删除此学生信息吗？", "确定？",function () {
var id;
for(var i in rows){
id=rows[i].id
}
$.ajax({
type: 'delete',
url: '/student/delete'+id,
contentType: 'application/json; charset=UTF-8',
dataType: "json",
success: function (res) {
if(res.code===20000){
var index = $('#dg').datagrid('getRowIndex',rows[0]);
$('#dg').datagrid('deleteRow',index);
layer.msg("删除成功")
}else{
layer.msg("删除失败")
}
}
})
})
}else{
layer.msg("请选择要删除的列")
}
})
});
function addFile() {
$('#form1').dialog({
title: '新增',
width: 350,
height: 300,
top: 150,
closed: false,//显示对话框
cache: false,
modal: true
})
}
function classId() {
var tree = $('#cc').combotree('tree');
if(tree!=null){
var data = tree.tree('getSelected');
if(data!=null){
return data.id;
}else{
return '';
}
}
}
function outTo(){
$("#form1").dialog('close');
$('#ff').form('clear');
}
function update() {
var rows = $('#dg').datagrid('getSelections');
if(rows.length>0){
var data=rows[0]
$("#ff").form('load',{
id:data.id,
name:data.name,
sex:data.sex,
age:data.age,
time:data.time,
})
$('#form1').dialog({
title: '修改',
width: 350,
height: 300,
top: 150,
closed: false,//显示对话框
cache: false,
modal: true
})
}else{
layer.msg("请选择需要修改的数据")
}
}
function submitForm() {
var data=$('#ff').serializeArray();
var json={};
for(var i=0;i<data.length;i++){
json[data[i]['name']]=data[i]['value'];
}
$.ajax({
type: 'POST',
url: '/student/add',
data: JSON.stringify(json),
contentType: 'application/json; charset=UTF-8',
dataType: "json",
success: function (result) {
if(result.code===20000){
layer.msg("录入成功")
$("#form1").dialog('close');
$('#ff').form('clear');
}else{
layer.msg("录入失败")
$("#form1").dialog('close');
$('#ff').form('clear');
}
}
})
}
function ww4(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function w4(s){
var reg=/[\u4e00-\u9fa5]/ //利用正则表达式分隔
var ss = (s.split(reg));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
</script>
</html>
这是我自己的后端代码接口
package com.studentlayerui.demo.controller;
import com.studentlayerui.demo.entity.dto.ResultDto;
import com.studentlayerui.demo.entity.pojo.StudentUser;
import com.studentlayerui.demo.service.StudentService;
import org.apache.catalina.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
@RestController
@RequestMapping("/student")
public class StudentController {
@Autowired
StudentService studentService;
//查询所有学生信息
/*@RequestMapping("/getAll")*/
@GetMapping(value="/getAll")
public ResultDto getAll() {
List<StudentUser> studentUsers = studentService.getAll();
return ResultDto.ok(studentUsers);
}
//删除学生信息
@GetMapping(value="/delete/{id}")
/*@RequestMapping(value ="/delete/{id}",method = RequestMethod.GET)*/
public ResultDto delete(@PathVariable("id") Integer id, HttpServletRequest request){
studentService.delete(id);
return ResultDto.ok();
}
//修改学生信息
/*@RequestMapping(value = "/update",method = RequestMethod.POST)*/
@PostMapping(value = "/update")
public ResultDto update(StudentUser studentUser){
studentService.update(studentUser);
return ResultDto.ok();
}
//增加学生信息
/* @RequestMapping("/add")*/
@GetMapping(value="/add")
public ResultDto add(StudentUser studentUser){
studentService.add(studentUser);
return ResultDto.ok();
}
}
请求大佬指点
有木有大佬帮助我，可以请喝红牛
没看懂，修改成啥样，需求呢