当前位置：首页 > news >正文

thinkphp6结合layui增删改查综合案列

news 文章来源：https://blog.csdn.net/2301_76809965/article/details/130439939 2024/11/20 4:53:02

文章目录

- - 技术栈
  - 实现
  - 代码实现
  - 数据库

本案例适合新手，特别是杠刚入门thinkphp和layui，但又不是特别熟悉这类

主要实现登录退出功能，用户模块的增删改查功能，分页功能是layui表单自带功能
效果图
左侧的菜单栏我没有写对应的页面，需要的自己添加上就行，把菜单弄出来主要是为了好看一点
在这里插入图片描述
目录结构

技术栈

thinkphp6+layui

实现

layui实现后台布局
中间件和session判断用户是否登录
用到think-template模板引擎，安装完tp框架后需要自己安装

composer create-project topthink/think=6.0.x-dev tp

composer require topthink/think-view

ajax请求数据
msyql数据库

代码实现

登录页面，相关的请求方法都写在了页面中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页面</title><!-- 引入LayUI的CSS文件 --><link rel="stylesheet" href="/layui/css/layui.css"><!-- 引入LayUI的JS文件 --><script src="/layui/layui.js"></script><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Arial', sans-serif;background-color: #f0f2f5;display: flex;justify-content: center;align-items: center;height: 100vh;}.login-container {width: 450px;padding: 2rem;background-color: #ffffff;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 {color: #333333;text-align: center;margin-bottom: 1.5rem;}label {color: #333333;margin-bottom: 0.5rem;}input.layui-input {height: 40px;padding: 0 1rem;margin-bottom: 1.5rem;border: 1px solid #d9d9d9;border-radius: 5px;}button.layui-btn {height: 40px;color: #ffffff;background-color: #3498db;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s ease;}button.layui-btn:hover {background-color: #2980b9;}</style>
</head><body><div class="login-container"><h1>登录</h1><form class="layui-form" action="/admin/index" method="post"><div class="layui-form-item"><label for="username" class="layui-form-label">用户名：</label><div class="layui-input-block"><input type="text" id="username" name="username" placeholder="请输入用户名" required lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label for="password" class="layui-form-label">密码：</label><div class="layui-input-block"><input type="password" id="password" name="password" placeholder="请输入密码" required lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="login">登录</button></div></div></form></div><!DOCTYPE html>
<!-- 省略其他代码 --><script>layui.use(['form', 'layer'], function () {var form = layui.form;var layer = layui.layer;form.on('submit(login)', function(data){console.log(data);});});</script>
</body></html>

后台布局，layui.js和layui.css改成自己的

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/layui/css/layui.css" media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head><body><table class="layui-hide" id="test" lay-filter="test"></table><!-- 定义编辑用户弹层 --><div id="edit-form" style="display:none;"><form class="layui-form" action="" lay-filter="" id="${id}"><div class="layui-form-item"><label class="layui-form-label">Id</label><div class="layui-input-block"><input type="text" name="id" required lay-verify="required" autocomplete="off" class="layui-input" value="..."disabled></div></div><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input"value="..."></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input type="text" name="email" required lay-verify="required" autocomplete="off" class="layui-input"value="..."></div></div><div class="layui-form-item"><label class="layui-form-label">地址</label><div class="layui-input-block"><input type="text" name="address" required lay-verify="required" autocomplete="off" class="layui-input"value="..."></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="editSubmit">修改</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div><!-- 新增用户模块弹层 --><div id="add-form" style="display:none;"><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input type="text" name="email" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">地址</label><div class="layui-input-block"><input type="text" name="address" lay-verify="required" placeholder="请输入地址" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"></div></form></div><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="isAll">验证是否全选</button><button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加用户</button></div>
</script><script type="text/html" id="barDemo"><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 src="/layui/layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --><script>var userListData = JSON.parse('{:json_encode($userList)}');layui.use('table', function () {var table = layui.table;var $ = layui.jquery;table.render({elem: '#test', data: userListData, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}], title: '用户数据表', cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true, align: 'center' },{ field: 'username', title: '用户名', align: 'center', width: 120 },{ field: 'email', title: '邮箱', align: 'center' },{ field: 'address', title: '地址', align: 'center' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center' }]], page: true});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;case 'add':layer.open({type: 1,title: '新增用户',content: $('#add-form').html(), // 从页面中获取表单内容area: ['500px', '320px'],btn: ['提交', '取消'],yes: function (index, layero) {// 点击“提交”按钮时的回调函数var data = layero.find('form').serialize();// 发送表单数据到后端$.post('/admin/addUser', data, function (res) {if (res.success) {layer.msg(res.message);// 关闭弹出层layer.close(index);// 重新加载数据表格setTimeout(function () {window.location.reload();}, 2000);table.reload('test', {});} else {layer.msg(res.message);}}).fail(function () {layer.msg('请求失败，请重试');});}});};});//监听行工具事件,删除事件table.on('tool(test)', function (obj) {var data = obj.data;if (obj.event === 'del') {var id = data.id;// 弹出确认框layer.confirm('确定要删除该用户吗？', function (index) {// 用户点击了确定按钮，关闭确认框layer.close(index);// 使用Layui的内置jQuery发送POST请求$.post('/admin/deleteUserById', { id: id }, function (res) {if (res.success) {obj.del(); // 如果删除成功，从表格中删除行} else {layer.msg('删除失败');}}).fail(function () {layer.msg('请求失败，请重试');});});} else {// 弹出编辑层layer.open({type: 1,title: '编辑用户信息',content: $('#edit-form').html(), // 从页面中获取表单内容area: ['500px', '320px'],success: function (layero, index) {// 将用户数据填充到表单元素中layero.find('input[name="id"]').val(data.id);layero.find('input[name="username"]').val(data.username);layero.find('input[name="email"]').val(data.email);layero.find('input[name="address"]').val(data.address);}});}});// 监听编辑表单提交事件layui.form.on('submit(editSubmit)', function (data) {// 发送表单数据到后端$.post('/admin/updateUserById', data.field, function (res) {console.log(res);if (res.success) {layer.msg(res.message);// 关闭弹出层layer.closeAll('page');// 刷新页面重新加载表格setTimeout(function () {window.location.reload();}, 2000);} else {layer.msg('更新失败');}}).fail(function () {layer.msg('请求失败，请重试');});return false; // 阻止表单提交});});</script></body></html>

用户列表

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/layui/css/layui.css" media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head><body><table class="layui-hide" id="test" lay-filter="test"></table><!-- 定义编辑用户弹层 --><div id="edit-form" style="display:none;"><form class="layui-form" action="" lay-filter="" id="${id}"><div class="layui-form-item"><label class="layui-form-label">Id</label><div class="layui-input-block"><input type="text" name="id" required lay-verify="required" autocomplete="off" class="layui-input" value="..."disabled></div></div><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input"value="..."></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input type="text" name="email" required lay-verify="required" autocomplete="off" class="layui-input"value="..."></div></div><div class="layui-form-item"><label class="layui-form-label">地址</label><div class="layui-input-block"><input type="text" name="address" required lay-verify="required" autocomplete="off" class="layui-input"value="..."></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="editSubmit">修改</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div><!-- 新增用户模块弹层 --><div id="add-form" style="display:none;"><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input type="text" name="email" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">地址</label><div class="layui-input-block"><input type="text" name="address" lay-verify="required" placeholder="请输入地址" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"></div></form></div><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="isAll">验证是否全选</button><button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加用户</button></div>
</script><script type="text/html" id="barDemo"><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 src="/layui/layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --><script>var userListData = JSON.parse('{:json_encode($userList)}');layui.use('table', function () {var table = layui.table;var $ = layui.jquery;table.render({elem: '#test', data: userListData, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips'}], title: '用户数据表', cols: [[{ type: 'checkbox', fixed: 'left' },{ field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true, align: 'center' },{ field: 'username', title: '用户名', align: 'center', width: 120 },{ field: 'email', title: '邮箱', align: 'center' },{ field: 'address', title: '地址', align: 'center' },{ fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center' }]], page: true});//头工具栏事件table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：' + data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选' : '未全选');break;case 'add':layer.open({type: 1,title: '新增用户',content: $('#add-form').html(), // 从页面中获取表单内容area: ['500px', '320px'],btn: ['提交', '取消'],yes: function (index, layero) {// 点击“提交”按钮时的回调函数var data = layero.find('form').serialize();// 发送表单数据到后端$.post('/admin/addUser', data, function (res) {if (res.success) {layer.msg(res.message);// 关闭弹出层layer.close(index);// 重新加载数据表格setTimeout(function () {window.location.reload();}, 2000);table.reload('test', {});} else {layer.msg(res.message);}}).fail(function () {layer.msg('请求失败，请重试');});}});};});//监听行工具事件,删除事件table.on('tool(test)', function (obj) {var data = obj.data;if (obj.event === 'del') {var id = data.id;// 弹出确认框layer.confirm('确定要删除该用户吗？', function (index) {// 用户点击了确定按钮，关闭确认框layer.close(index);// 使用Layui的内置jQuery发送POST请求$.post('/admin/deleteUserById', { id: id }, function (res) {if (res.success) {obj.del(); // 如果删除成功，从表格中删除行} else {layer.msg('删除失败');}}).fail(function () {layer.msg('请求失败，请重试');});});} else {// 弹出编辑层layer.open({type: 1,title: '编辑用户信息',content: $('#edit-form').html(), // 从页面中获取表单内容area: ['500px', '320px'],success: function (layero, index) {// 将用户数据填充到表单元素中layero.find('input[name="id"]').val(data.id);layero.find('input[name="username"]').val(data.username);layero.find('input[name="email"]').val(data.email);layero.find('input[name="address"]').val(data.address);}});}});// 监听编辑表单提交事件layui.form.on('submit(editSubmit)', function (data) {// 发送表单数据到后端$.post('/admin/updateUserById', data.field, function (res) {console.log(res);if (res.success) {layer.msg(res.message);// 关闭弹出层layer.closeAll('page');// 刷新页面重新加载表格setTimeout(function () {window.location.reload();}, 2000);} else {layer.msg('更新失败');}}).fail(function () {layer.msg('请求失败，请重试');});return false; // 阻止表单提交});});</script></body></html>

后端代码
Index.php
这个文件没有什么好说的，就是访问index/index的时候渲染登录页面

<?php
namespace app\controller;
use app\BaseController;
use think\facade\View;class Index extends BaseController
{public function index(){return View::fetch();}public function hello($name = 'ThinkPHP6'){return 'hello,' . $name;}
}

Admin.php控制器
这个控制器中，首先index登录页面请求index方法判断用户名密码，用户名密码正确后渲染后台主页
用户名密码不正确重定向到登录页面
同时增删改查功能也是在这个控制器内完成的，但这些功能都需要经过中间件CheckLogin判断session是否存在，就是用户是否登录

<?php
namespace app\controller;use app\BaseController;
use think\facade\View;
use think\facade\Request;
use app\model\User;
use think\facade\Session;
use app\middleware\CheckLogin;
use app\model\UserList;class admin extends BaseController
{protected $middleware = [CheckLogin::class => ['except' => ['index']]]; //当执行admin控制器的时候就会调用CheckLogin中间件public function index(){$username = Request::post('username');$password = Request::post('password');$res = User::where('username', $username)->find();// 判断用户是否存在，以及密码是否正确if ($res && $res->password == md5($password)) {// 存储用户信息到session中Session::set('res', $res);View::assign('res', $res);return View::fetch();} else {// 密码不正确，重定向到登录页面return redirect('../Index/index')->with('error', '用户名或密码错误');}}public function logout(){session_destroy();return redirect('../Index/index')->with('error', '退出成功');}public function userList(){$list = UserList::select();// 分配数据给模板View::assign('userList', $list);// 渲染模板并返回return View::fetch();}public function deleteUserById(){$id = Request::post('id');$res = UserList::destroy($id);if ($res) {return json(['success' => true, 'message' => '删除成功']);} else {return json(['success' => false, 'message' => '删除失败']);}}public function updateUserById(){$id = Request::post('id');$username = Request::post('username');$email = Request::post('email');$address = Request::post('address');$res = UserList::update(['username'=>$username,'email'=>$email,'address'=>$address,'id' => $id]);try {$res = UserList::update(['username'=>$username,'email'=>$email,'address'=>$address,'id' => $id]);if ($res) {return json(['success' => true, 'message' => '更新成功']);} else {return json(['success' => false, 'message' => '更新失败']);}} catch (\Exception $e) {return json(['success' => false, 'message' => $e->getMessage()]);}}public function addUser(){$res = UserList::create(['username'=>Request::post('username'),'email'=>Request::post('email'),'address'=>Request::post('address')]);if ($res) {return json(['success' => true, 'message' => '添加成功']);} else {return json(['success' => false, 'message' => '添加失败']);}}
}

中间件代码CheckLogin.php代码

<?php
//判断用户是否登录的中间件
namespace app\middleware;use think\facade\Session;class CheckLogin
{public function handle($request,$next){// 判断session是否存在// if (Session::has('user')) {                  //设置的时候就设置了res，不要来读的时候就干个user在上面if (Session::has('res')) { // 如果session存在，继续执行后续请求return $next($request);} else {// 如果session不存在，重定向到登录页return redirect('../Index/index');}}
}

模型类，在这个案例中我们定义了两个模型类
一个是User模型类，就是管理员数据，另一个是UserList类就是展示在页面上的数据，我们增删改查需要操作的数据
User模型

<?php
namespace app\model;use think\Model;class User extends Model{protected $name = 'user';protected $pk = 'id';
}

UserList模型

<?php
namespace app\model;
use think\Model;class UserList extends Model{protected $name = 'user_list';protected $pk = 'id';
}

这个案例并没有用到路由模块，有需要用路由的自己去配置即可，router/app.php中

数据库

数据库就两个表
user和user_list
使用tp操作数据库前请先确保配置了数据库连接，开发环境跟目录下.env文件
生产环境config/database.php如果不知道是开发环境还是生产环境两个都改一下
表的结构
在这里插入图片描述

完结！

文章目录

技术栈

实现

代码实现

数据库

相关文章：