基于springboot+mybatis+mysql+layui+html用户信息增删改查源码
本项目用于学习使用。
下载地址: 文件分享
或点我下载
idea mysql jdk1.8 navcat
后端:springboot+mybatis
前端:ayui+html


- package com.zyyt.springboot.controller;
-
- import com.github.pagehelper.Page;
- import com.github.pagehelper.PageHelper;
- import com.zyyt.springboot.bean.ApiResult;
- import com.zyyt.springboot.bean.Student;
- import com.zyyt.springboot.service.StudentService;
- import org.springframework.stereotype.Controller;
- import org.springframework.ui.ModelMap;
- import org.springframework.validation.annotation.Validated;
- import org.springframework.web.bind.annotation.*;
-
- import javax.annotation.Resource;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
-
- @Controller
- @RequestMapping("/student")
- public class StudentController {
-
- @Resource
- private StudentService studentService;
-
- private String prefix = "student";
-
- @GetMapping()
- public String notice()
- {
- return prefix + "/list";
- }
- /**
- * 学生信息列表
- * @param student
- * @return
- */
- @RequestMapping("/list")
- @ResponseBody
- public Object list(int page, int limit,Student student){
- page = Math.max(page, 1);
- limit = limit < 1 ? 10: limit;
- Page<Student> studentpage = PageHelper.startPage(page, limit);
- studentService.queryStudentList(student);
- //重新封装返回参数,用于页面显示start
- Map<String, Object> result = new HashMap<>();
- result.put("data",studentpage.getResult());
- result.put("code",0);
- result.put("count",studentpage.getTotal());
- result.put("msg","学生信息列表");
- //重新封装返回参数,用于页面显示end
- return result;
- }
- /**
- * 修改公学生信息
- */
- @GetMapping("/edit")
- public String edit(Long id, ModelMap mmap) {
- Student student = studentService.queryStudentById(id);
- mmap.put("student", student);
- return prefix + "/edit";
- }
- /**
- * 学生信息查看
- * @param id 主键ID
- * @return
- */
- @RequestMapping("/queryStudentById")
- @ResponseBody
- public Object queryStudentById(long id) {
- Student student = studentService.queryStudentById(id);
- return student!=null ? ApiResult.success(student) : ApiResult.fail("学生信息不存在");
- }
- /**
- * 学生信息新增
- * @param student
- * @return
- */
- @RequestMapping("/addStudent")
- @ResponseBody
- public Object addStudent(@Validated Student student) {
- int cnt = studentService.addStudent(student);
- return cnt>0 ? ApiResult.success("新增成功") : ApiResult.fail("新增失败");
- }
- /**
- * 学生信息更新
- * @param student
- * @return
- */
- @RequestMapping("/updateStudent")
- @ResponseBody
- public Object updateStudent(@Validated Student student) {
- int cnt = studentService.updateStudentById(student);
- return cnt>0 ? ApiResult.success("修改成功") : ApiResult.fail("修改失败");
- }
- /**
- * 学生信息删除
- * @param id 主键ID
- * @return
- */
- @RequestMapping("/deleteStudentById")
- @ResponseBody
- public Object deleteStudentById(long id) {
- int cnt = studentService.deleteStudentById(id);
- return cnt>0 ? ApiResult.success("删除成功") : ApiResult.fail("删除失败");
- }
- }
前端代码:
list
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>springboot+mybatis+mysql+layUI+thymeleaf测试</title>
- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
- <script src="https://www.layuicdn.com/layui/layui.js"></script>
- </head>
- <body>
- <!-- 内容主体 -->
- <div class="main">
- <div class="books-pane">
- <button type="button" class="layui-btn layui-btn-fluid" id="btn_add"><i class="layui-icon"></i> 添加</button>
- </div>
- <div class="books-pane">
- <table class="layui-hide" id="student_table" lay-filter ="student_table"></table>
- <!--工具栏模板:-->
- <div type="text/html" id="toolbar" style="display: none;">
- <form class="layui-form layui-form-pane" lay-size="lg" style="text-align: left;height: 36px">
- <div class="layui-form-item">
- <div class="layui-inline">
- <label class="layui-form-label">关键字搜索</label>
- <div class="layui-input-inline">
- <input placeholder="姓名" type="text" name="keyword" autocomplete="off" class="layui-input">
- </div>
- </div>
- <div class="layui-inline">
- <button class="layui-btn" lay-submit lay-filter="*">搜索</button>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- <script type="text/html" id="lineBtns">
- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
- </script>
- <script>
- layui.use(['element', 'table', 'form', 'jquery','laydate'], function () {
- var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
- var table = layui.table;
- var form = layui.form;
- var $ = layui.jquery;
- table.render({
- elem: '#student_table'
- , url: '/student/list'
- , toolbar: '#toolbar'
- , title: '学员信息列表'
- , cols: [
- [
- {field: 'id', title: '序号', sort: true}
- , {field: 'name',title: '姓名'}
- , {field: 'sex', title: '性别', align: "center", templet: function(d){if(d.sex == 0){return '男'}else{return '女'}}}
- , {field: 'age', title: '年龄', sort: true}
- , {field: 'time', title: '出生日期', sort: true, templet : "{{layui.util.toDateString(d.time, 'yyyy-MM-dd')}}"}
- , {field: 'remarks', title: '简介'}
- , {fixed: 'right', align:'right', toolbar: '#lineBtns'}
- ]
- ], page: true
- });
- form.on('submit(*)', function (data) {
- layer.msg("根据姓名查找");
- table.reload('student_table', {
- url: '/student/list'
- , where: {name: data.field.keyword} //设定异步数据接口的额外参数
- });
- return false;
- });
- //监听行工具事件
- table.on('tool(student_table)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
- var data = obj.data,//获得当前行数据
- layEvent = obj.event; //获得 lay-event 对应的值
- if(layEvent === 'detail'){
- layer.msg('查看操作');
- } else if(layEvent === 'del'){
- layer.confirm('确定要删除当前信息吗?', function(index){
- //向服务端发送删除指令
- $.getJSON('/student/deleteStudentById',{id: data.id}, function(data){
- if (data.status === 200) {
- table.reload('student_table', {
- url: '/student/list'
- });
- layer.msg(data.data);
- } else if (data.status === 201) {
- layer.msg(data.data);
- }
- });
- });
- } else if(layEvent === 'edit'){
- layer.open({
- type: 2 ,
- title:"修改学员信息",
- area: ['500px', '600px'],
- shadeClose:false,
- content: "/student/edit?id="+data.id,
- });
- }
- });
- /**
- * 添加
- */
- $('#btn_add').on('click',function(index){
- layer.open({
- type: 2 ,
- title:"添加学员信息",
- area: ['500px', '600px'],
- shadeClose:false,
- content: "/student/add.html",
- });
- });
- });
- </script>
- </body>
- </html>
add:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
- <script src="https://www.layuicdn.com/layui/layui.js"></script>
- </head>
- <body>
- <div class="site-text" style="margin: 5%;">
- <form class="layui-form layui-form-pane" onsubmit="return false">
- <div class="layui-form-item">
- <div class="layui-form-item">
- <label class="layui-form-label">姓名</label>
- <div class="layui-input-block">
- <input class="layui-input" type="text" name="name" lay-verify="required">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">性别</label>
- <div class="layui-input-block">
- <input type="radio" name="sex" value="0" title="男" checked>
- <input type="radio" name="sex" value="1" title="女">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">年龄</label>
- <div class="layui-input-block">
- <input class="layui-input" type="text" name="age" lay-verify="required|number">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">出生年份</label>
- <div class="layui-input-block">
- <input type="text" class="layui-input" id="time" name="time" placeholder="yyyy-MM-dd" lay-verify="required|date">
- </div>
- </div>
- <div class="layui-form-item layui-form-text">
- <label class="layui-form-label">备注</label>
- <div class="layui-input-block">
- <textarea placeholder="请输入内容" class="layui-textarea" name="remarks" lay-verify="required"></textarea>
- </div>
- </div>
- <div class="layui-form-item">
- <div class="layui-input-block">
- <button class="layui-btn" lay-submit lay-filter="addStudent">立即提交</button>
- <button type="reset" class="layui-btn layui-btn-primary">重置</button>
- </div>
- </div>
- </div>
- </form>
- <script>
- layui.use(['element', 'table', 'form', 'jquery','laydate'], function(){
- var form = layui.form;
- var $ = layui.jquery;
- var table = layui.table;
- //监听提交
- form.on('submit(addStudent)', function(data){
- $.ajax({
- url: "../student/addStudent",
- type: "POST",
- data: data.field,
- success: function (data) {
- if (data.status === 200) {
- layer.alert(data.data, { shift: -1 }, function () {
- // 获得frame索引
- var index = parent.layer.getFrameIndex(window.name);
- //关闭当前frame
- parent.layer.close(index);
- //修改成功后刷新父界面
- window.parent.location.reload();
- });
- } else if (data.status === 201) {
- layer.msg(data.data);
- }
- },
- error: function (xhr, status, error) {
- layer.msg("网络出错")
- }
- });
- return false;
- });
- /**
- * 时间插件
- **/
- var laydate = layui.laydate;
- laydate.render({
- elem: '#time'
- });
- });
- </script>
- </div>
- </body>
- </html>
edit:
- <!DOCTYPE html>
- <html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
- <script src="https://www.layuicdn.com/layui/layui.js"></script>
- </head>
- <body>
- <div class="site-text" style="margin: 5%;">
- <form class="layui-form layui-form-pane" onsubmit="return false" th:object="${student}">
- <input name="id" th:field="*{id}" type="hidden">
- <div class="layui-form-item">
- <div class="layui-form-item">
- <label class="layui-form-label">姓名</label>
- <div class="layui-input-block">
- <input class="layui-input" type="text" name="name" th:field="*{name}" lay-verify="required">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">性别</label>
- <div class="layui-input-block">
- <input type="radio" name="sex" th:field="*{sex}" value="0" title="男" checked>
- <input type="radio" name="sex" th:field="*{sex}" value="1" title="女">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">年龄</label>
- <div class="layui-input-block">
- <input class="layui-input" type="text" name="age" th:field="*{age}" lay-verify="required|number">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">出生年份</label>
- <div class="layui-input-block">
- <input type="text" class="layui-input" id="time" name="time" th:field="*{time}" placeholder="yyyy-MM-dd" lay-verify="required|date">
- </div>
- </div>
- <div class="layui-form-item layui-form-text">
- <label class="layui-form-label">备注</label>
- <div class="layui-input-block">
- <textarea placeholder="请输入内容" class="layui-textarea" name="remarks" th:field="*{remarks}" lay-verify="required"></textarea>
- </div>
- </div>
- <div class="layui-form-item">
- <div class="layui-input-block">
- <button class="layui-btn" lay-submit lay-filter="updateStudent">立即提交</button>
- <button type="reset" class="layui-btn layui-btn-primary">重置</button>
- </div>
- </div>
- </div>
- </form>
- <script>
- layui.use(['element', 'table', 'form', 'jquery','laydate'], function(){
- var form = layui.form;
- var $ = layui.jquery;
- var table = layui.table;
- //监听提交
- form.on('submit(updateStudent)', function(data){
- $.ajax({
- url: "../student/updateStudent",
- type: "POST",
- data: data.field,
- success: function (data) {
- if (data.status === 200) {
- layer.alert(data.data, { shift: -1 }, function () {
- // 获得frame索引
- var index = parent.layer.getFrameIndex(window.name);
- //关闭当前frame
- parent.layer.close(index);
- //修改成功后刷新父界面
- window.parent.location.reload();
- });
- } else if (data.status === 201) {
- layer.msg(data.data);
- }
- },
- error: function (xhr, status, error) {
- layer.msg("网络出错")
- }
- });
- return false;
- });
- /**
- * 时间插件
- **/
- var laydate = layui.laydate;
- laydate.render({
- elem: '#time'
- });
- });
- </script>
- </div>
- </body>
- </html>
sql:
- -- ----------------------------
- DROP TABLE IF EXISTS `t_student`;
- CREATE TABLE `t_student` (
- `id` int(11) NOT NULL AUTO_INCREMENT,
- `name` varchar(255) DEFAULT NULL COMMENT '姓名',
- `age` int(11) DEFAULT NULL COMMENT '年龄',
- `sex` int(11) DEFAULT NULL COMMENT '性别',
- `time` datetime DEFAULT NULL COMMENT '出生年月',
- `remarks` text COMMENT '备注',
- `createTime` datetime DEFAULT NULL COMMENT '创建时间',
- PRIMARY KEY (`id`)
- ) ENGINE=InnoDB AUTO_INCREMENT=134 DEFAULT CHARSET=utf8mb4 COMMENT='主键';