宿州微网站建设,app wordpress,惠州外贸网站建设,wordpress怎么上传主题文章目录 技术栈实现代码实现数据库 本案例适合新手#xff0c;特别是杠刚入门thinkphp和layui#xff0c;但又不是特别熟悉这类 主要实现登录退出功能#xff0c;用户模块的增删改查功能#xff0c;分页功能是layui表单自带功能 效果图 左侧的菜单栏我没有写对应的页面特别是杠刚入门thinkphp和layui但又不是特别熟悉这类 主要实现登录退出功能用户模块的增删改查功能分页功能是layui表单自带功能 效果图 左侧的菜单栏我没有写对应的页面需要的自己添加上就行把菜单弄出来主要是为了好看一点 目录结构
技术栈
thinkphp6layui
实现
layui实现后台布局 中间件和session判断用户是否登录 用到think-template模板引擎安装完tp框架后需要自己安装
composer create-project topthink/think6.0.x-dev tpcomposer require topthink/think-viewajax请求数据 msyql数据库
代码实现
登录页面相关的请求方法都写在了页面中
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title登录页面/title!-- 引入LayUI的CSS文件 --link relstylesheet href/layui/css/layui.css!-- 引入LayUI的JS文件 --script src/layui/layui.js/scriptstyle* {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
/headbodydiv classlogin-containerh1登录/h1form classlayui-form action/admin/index methodpostdiv classlayui-form-itemlabel forusername classlayui-form-label用户名/labeldiv classlayui-input-blockinput typetext idusername nameusername placeholder请输入用户名 required lay-verifyrequired autocompleteoff classlayui-input/div/divdiv classlayui-form-itemlabel forpassword classlayui-form-label密码/labeldiv classlayui-input-blockinput typepassword idpassword namepassword placeholder请输入密码 required lay-verifyrequired autocompleteoff classlayui-input/div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn lay-submit lay-filterlogin登录/button/div/div/form/div!DOCTYPE html
!-- 省略其他代码 --scriptlayui.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
htmlheadmeta charsetutf-8titleLayui/titlemeta namerenderer contentwebkitmeta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1link relstylesheet href/layui/css/layui.css mediaall!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --
/headbodytable classlayui-hide idtest lay-filtertest/table!-- 定义编辑用户弹层 --div idedit-form styledisplay:none;form classlayui-form action lay-filter id${id}div classlayui-form-itemlabel classlayui-form-labelId/labeldiv classlayui-input-blockinput typetext nameid required lay-verifyrequired autocompleteoff classlayui-input value...disabled/div/divdiv classlayui-form-itemlabel classlayui-form-label用户名/labeldiv classlayui-input-blockinput typetext nameusername required lay-verifyrequired autocompleteoff classlayui-inputvalue.../div/divdiv classlayui-form-itemlabel classlayui-form-label邮箱/labeldiv classlayui-input-blockinput typetext nameemail required lay-verifyrequired autocompleteoff classlayui-inputvalue.../div/divdiv classlayui-form-itemlabel classlayui-form-label地址/labeldiv classlayui-input-blockinput typetext nameaddress required lay-verifyrequired autocompleteoff classlayui-inputvalue.../div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn lay-submit lay-filtereditSubmit修改/buttonbutton typereset classlayui-btn layui-btn-primary重置/button/div/div/form/div!-- 新增用户模块弹层 --div idadd-form styledisplay:none;form classlayui-form actiondiv classlayui-form-itemlabel classlayui-form-label用户名/labeldiv classlayui-input-blockinput typetext nameusername lay-verifyrequired placeholder请输入用户名 autocompleteoffclasslayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label邮箱/labeldiv classlayui-input-blockinput typetext nameemail lay-verifyrequired|email placeholder请输入邮箱 autocompleteoffclasslayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label地址/labeldiv classlayui-input-blockinput typetext nameaddress lay-verifyrequired placeholder请输入地址 autocompleteoffclasslayui-input/div/divdiv classlayui-form-item/div/form/divscript typetext/html idtoolbarDemodiv classlayui-btn-containerbutton classlayui-btn layui-btn-sm lay-eventgetCheckData获取选中行数据/buttonbutton classlayui-btn layui-btn-sm layui-btn-danger lay-eventgetCheckLength获取选中数目/buttonbutton classlayui-btn layui-btn-sm layui-btn-warm lay-eventisAll验证是否全选/buttonbutton classlayui-btn layui-btn-sm layui-btn-normal lay-eventadd添加用户/button/div
/scriptscript typetext/html idbarDemoa classlayui-btn layui-btn-xs lay-eventedit编辑/aa classlayui-btn layui-btn-danger layui-btn-xs lay-eventdel删除/a
/scriptscript src/layui/layui.js charsetutf-8/script!-- 注意如果你直接复制所有代码到本地上述 JS 路径需要改成你本地的 --scriptvar 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[nameid]).val(data.id);layero.find(input[nameusername]).val(data.username);layero.find(input[nameemail]).val(data.email);layero.find(input[nameaddress]).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
htmlheadmeta charsetutf-8titleLayui/titlemeta namerenderer contentwebkitmeta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1link relstylesheet href/layui/css/layui.css mediaall!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --
/headbodytable classlayui-hide idtest lay-filtertest/table!-- 定义编辑用户弹层 --div idedit-form styledisplay:none;form classlayui-form action lay-filter id${id}div classlayui-form-itemlabel classlayui-form-labelId/labeldiv classlayui-input-blockinput typetext nameid required lay-verifyrequired autocompleteoff classlayui-input value...disabled/div/divdiv classlayui-form-itemlabel classlayui-form-label用户名/labeldiv classlayui-input-blockinput typetext nameusername required lay-verifyrequired autocompleteoff classlayui-inputvalue.../div/divdiv classlayui-form-itemlabel classlayui-form-label邮箱/labeldiv classlayui-input-blockinput typetext nameemail required lay-verifyrequired autocompleteoff classlayui-inputvalue.../div/divdiv classlayui-form-itemlabel classlayui-form-label地址/labeldiv classlayui-input-blockinput typetext nameaddress required lay-verifyrequired autocompleteoff classlayui-inputvalue.../div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn lay-submit lay-filtereditSubmit修改/buttonbutton typereset classlayui-btn layui-btn-primary重置/button/div/div/form/div!-- 新增用户模块弹层 --div idadd-form styledisplay:none;form classlayui-form actiondiv classlayui-form-itemlabel classlayui-form-label用户名/labeldiv classlayui-input-blockinput typetext nameusername lay-verifyrequired placeholder请输入用户名 autocompleteoffclasslayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label邮箱/labeldiv classlayui-input-blockinput typetext nameemail lay-verifyrequired|email placeholder请输入邮箱 autocompleteoffclasslayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label地址/labeldiv classlayui-input-blockinput typetext nameaddress lay-verifyrequired placeholder请输入地址 autocompleteoffclasslayui-input/div/divdiv classlayui-form-item/div/form/divscript typetext/html idtoolbarDemodiv classlayui-btn-containerbutton classlayui-btn layui-btn-sm lay-eventgetCheckData获取选中行数据/buttonbutton classlayui-btn layui-btn-sm layui-btn-danger lay-eventgetCheckLength获取选中数目/buttonbutton classlayui-btn layui-btn-sm layui-btn-warm lay-eventisAll验证是否全选/buttonbutton classlayui-btn layui-btn-sm layui-btn-normal lay-eventadd添加用户/button/div
/scriptscript typetext/html idbarDemoa classlayui-btn layui-btn-xs lay-eventedit编辑/aa classlayui-btn layui-btn-danger layui-btn-xs lay-eventdel删除/a
/scriptscript src/layui/layui.js charsetutf-8/script!-- 注意如果你直接复制所有代码到本地上述 JS 路径需要改成你本地的 --scriptvar 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[nameid]).val(data.id);layero.find(input[nameusername]).val(data.username);layero.find(input[nameemail]).val(data.email);layero.find(input[nameaddress]).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([usernameRequest::post(username),emailRequest::post(email),addressRequest::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如果不知道是开发环境还是生产环境两个都改一下 表的结构
完结
