python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-Tag标签管理实现

锋哥原创的Springboot+Layui python222网站实战:

python222网站实战课程视频教程(SpringBoot+Python爬虫实战) ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程(SpringBoot+Python爬虫实战) ( 火爆连载更新中... )共计23条视频,包括:python222网站实战课程视频教程(SpringBoot+Python爬虫实战) ( 火爆连载更新中... )、第2讲 架构搭建实现、第3讲 页面系统属性动态化设计实现等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1yX4y1a7qM/

后端:

package com.python222.controller.admin;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.python222.entity.PageBean;
import com.python222.entity.Tag;
import com.python222.service.TagService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.HashMap;
import java.util.Map;/*** 管理员-Tag控制器* @author Administrator**/
@Controller
@RequestMapping(value = "/admin/tag")
public class TagAdminController {@Autowiredprivate TagService tagService;/*** 根据条件分页查询Tag标签* @param page* @param limit* @return* @throws Exception*/@ResponseBody@RequestMapping(value = "/list")public Map<String,Object> list(@RequestParam(value="page",required=false)Integer page,@RequestParam(value="limit",required=false)Integer limit)throws Exception{Map<String, Object> resultMap = new HashMap<>();PageBean pageBean=new PageBean(page,limit);Page<Tag> tagPage = tagService.page(new Page<>(pageBean.getPage(), pageBean.getPageSize()));resultMap.put("code", 0);resultMap.put("count", tagPage.getTotal());resultMap.put("data", tagPage.getRecords());return resultMap;}/*** 添加或者修改Tag标签* @param tag* @return*/@ResponseBody@RequestMapping("/save")public Map<String,Object> save(Tag tag){if(tag.getId()==null){tagService.save(tag);}else{tagService.updateById(tag);}Map<String, Object> resultMap = new HashMap<>();resultMap.put("success", true);return resultMap;}/*** 删除Tag标签* @param id* @return* @throws Exception*/@ResponseBody@RequestMapping("/delete")public Map<String,Object> delete(Integer id)throws Exception{Map<String, Object> resultMap = new HashMap<>();tagService.removeById(id);resultMap.put("success", true);return resultMap;}/*** 根据id查询Tag标签实体* @param id* @return* @throws Exception*/@ResponseBody@RequestMapping("/findById")public Map<String,Object> findById(Integer id)throws Exception{Map<String, Object> resultMap = new HashMap<>();Tag tag=tagService.getById(id);resultMap.put("tag", tag);resultMap.put("success", true);return resultMap;}
}

tagManage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tag标签管理</title>
<link rel="stylesheet" href="/static/layui/css/layui.css"></link>
<link rel="stylesheet" href="/static/css/css.css"></link>
</head>
<body><div style="padding: 20px"><span class="layui-breadcrumb"><a>首页</a><a><cite>Tag标签管理</cite></a></span><div style="padding-top: 20px;"><div><div><button class="layui-btn layuiadmin-btn-list" data-type="batchdel" onclick="addTag()">添加</button></div></div><div><table width="100%" id="tagListTable" ></table></div></div></div><script src="/static/layui/layui.js"></script><script src="/static/js/jquery.js"></script><script src="/static/js/common.js"></script>
<script type="text/javascript">layui.use(['element','form','table'], function(){var form=layui.form;var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块$ = layui.jquery; // 使用jquerytable = layui.table;table.render({elem: '#tagListTable',url:'/admin/tag/list',cols: [[{type:'checkbox'},{field:'id', width:100,title: '编号'},{field:'name', title: 'Tag标签名称'},{field:'sort', width:100, title: '排列序号',align:'center'},{field:'action', width:250, title: '操作',align:'center',templet:formatAction}]],page: true});});function deleteOne(id){layer.confirm('您确定要删除这条记录吗?', {title:"系统提示",btn: ['确定','取消'] //按钮}, function(){layer.closeAll('dialog');$.post("/admin/tag/delete",{"id":id},function(result){if(result.success){layer.msg("删除成功!");table.reload("tagListTable",{});}else{layer.msg("删除失败,请联系管理员!");}},"json");}, function(){});}function addTag(){layer.open({type: 2,title: '添加Tag标签',area: ['500px', '500px'],content: '/admin/saveTag.html' //iframe的url});}function modifyTag(id){layer.open({type: 2,title: '修改Tag标签',area: ['500px', '500px'],content: '/admin/saveTag.html?id='+id //iframe的url});}function formatAction(d){return "<button class='layui-btn layui-btn-normal layui-btn-xs' onclick='modifyTag("+d.id+")'><i class='layui-icon layui-icon-edit'></i>编辑</button><button class='layui-btn layui-btn-warm layui-btn-xs' onclick='deleteOne("+d.id+")'><i class='layui-icon layui-icon-delete' ></i>删除</button>";}</script>
</body>
</html>

saveTag.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加或者修改Tag标签</title>
<link rel="stylesheet" href="/static/layui/css/layui.css"></link>
<style type="text/css">table tr td{padding: 10px;}</style>
</head>
<body>
<div style="padding: 20px"><form method="post"><table><tr><td>Tag标签名称:</td><td><input type="text" id="name" name="name" class="layui-input" style="width: 300px"/></td></tr><tr><td>排列序号:</td><td><input type="text" id="sort" name="sort" class="layui-input" style="width: 100px;display: inline;"/>&nbsp;&nbsp;<span>(根据数值从小到大排序)</span></td></tr><tr><td><button class="layui-btn" onclick="submitData();return false;">提交</button></td><td><font id="errorInfo" color="red"></font></td></tr></table></form>
</div>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/common.js"></script>
<script type="text/javascript">layui.use(['form'], function(){});function submitData(){var name=$("#name").val().trim();var sort=$("#sort").val().trim();if(name=="") {$("#errorInfo").text("请输入Tag标签名称!");$("#name").focus();return false;}if(sort=="") {$("#errorInfo").text("请输入排列序号!");$("#sort").focus();return false;}if (!(/(^[1-9]\d*$)/.test(sort))) {$("#errorInfo").text("排列序号必须是正整数!");$("#sort").focus();return false;}var id=getQueryVariable("id");if(id){$.post("/admin/tag/save",{id:id,name:name,sort:sort},function(result){if(result.success){layer.alert('修改成功!',function () {parent.reloadPage();});}else{$("#errorInfo").text(result.errorInfo);}},"json");}else{$.post("/admin/tag/save",{name:name,sort:sort},function(result){if(result.success){layer.alert('添加成功!',function () {parent.reloadPage();});}else{$("#errorInfo").text(result.errorInfo);}},"json");}}function getQueryVariable(variable){var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i<vars.length;i++) {var pair = vars[i].split("=");if(pair[0] == variable){return pair[1];}}return(false);}$(function(){var id=getQueryVariable("id");if(id){$.post("/admin/tag/findById",{id:id},function(result){if(result.success){var tag=result.tag;$("#name").val(tag.name);$("#sort").val(tag.sort);}else{layer.alert('服务器加载有问题,请联系管理员!');}},"json");}});</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647968.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1174:长整数排序(指针专题)

题目描述 长整数排序。输入n 然后输入n个位数不超过100位的大整数&#xff0c;输入的整数可能含有前导0。将这n个长整数排序后输出&#xff0c;输出不含前导0。int greater(char *s1, char *s2){若s1指向的整数大于s2指向的整数&#xff0c;返回一个正整数;若s1指向的整数小于s…

看门狗定时器

1. 看门狗 看门狗: 用于设备在 程序异常(死机) 时 可以自动重启设备 实现原理: 通过定时器 进行定时 , 在定时器时间结束前 进行 "喂狗" 重置定时器时间 若时间到,还没有"喂狗",系统重启 本质就是一个定时器, 如何定时? 定时器 本质是对 晶振时钟进行 计…

Leetcode—144. 二叉树的前序遍历【简单】

2023每日刷题&#xff08;九十六&#xff09; Leetcode—144. 二叉树的前序遍历 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr…

物业app开发成功案例:如何满足用户需求

在当今数字化时代&#xff0c;物业管理已经不再是一个简单的领域。随着智能手机的普及和移动互联技术的发展&#xff0c;许多物业管理公司纷纷投入物业App开发&#xff0c;以提升管理效率、改善用户体验。本文将介绍一个成功的案例&#xff0c;探讨如何满足用户需求。 物业App…

vue —— h函数的学习与使用

文章目录 一、h函数是什么&#xff1f;二、h函数格式说明及使用示例1&#xff1a;简单创建一个VNode&#xff08;vue3&#xff09;示例2&#xff1a;vue2中h函数用法示例3&#xff1a;vue3中h函数的用法vue2和vue3中h函数的区别&#xff1f; 三、h函数实现原理四、h函数常用场景…

800G光传输网络中的相干调制与PAM4技术

在800G光传输网络架构中&#xff0c;相干调制技术和PAM4&#xff08;四电平脉冲幅度调制&#xff09;技术各具优势&#xff0c;分别针对不同应用场景提供高效解决方案。 相干调制是高级光通信的核心技术之一&#xff0c;它通过精密操控光载波的频率、相位和振幅来编码信息&…

HMI-Board以太网数据监视器(二)MQTT和LVGL

E ∫ d E ∫ k d q r 2 k L ∫ d q r 2 E \int dE \int \frac{kdq}{r^2} \frac{k}{L} \int \frac{dq}{r^2} E∫dE∫r2kdq​Lk​∫r2dq​ E Q 2 π ϵ L 2 E \frac{Q}{2\pi\epsilon L^2} E2πϵL2Q​ Γ ( n ) ( n − 1 ) ! ∀ n ∈ N \Gamma(n) (n-1)!\quad\forall n…

JavaScript 学习笔记(WEB APIs Day4)

「写在前面」 本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. JavaScript 学习笔记&#xff08;Day1&#xff09; 2. JavaSc…

C#使用RabbitMQ-1_Docker部署并在c#中实现简单模式消息代理

介绍 RabbitMQ是一个开源的消息队列系统&#xff0c;实现了高级消息队列协议&#xff08;AMQP&#xff09;。 &#x1f340;RabbitMQ起源于金融系统&#xff0c;现在广泛应用于各种分布式系统中。它的主要功能是在应用程序之间提供异步消息传递&#xff0c;实现系统间的解耦和…

pytorch学习笔记(十一)

优化器学习 把搭建好的模型拿来训练&#xff0c;得到最优的参数。 import torch.optim import torchvision from torch import nn from torch.nn import Sequential, Conv2d, MaxPool2d, Flatten, Linear from torch.utils.data import DataLoaderdataset torchvision.datas…

uniapp安卓android离线打包本地打包整理

离线打包准备 下载Android studio 1.准备资源hbuilder 2.准备离线SDK 最新android平台SDK下载最新android平台SDK下载 3.离线打包key申请 4.直接导入HBuilder-Integrate-AS工程,直接运行simpleDemo项目即可 5.安装java 1.8 jdk-8u151-windows-x64 6.遇到这个报错报错Caus…

在游戏里开公司!基于ERNIE SDK的多智能体游戏应用

在虚拟世界有一座神奇的办公室&#xff0c;当你输入你的创业方向&#xff0c;办公室的智慧打工人们将团结合作&#xff0c;为你的项目勤劳奔走&#xff0c;并在过程中&#xff0c;把日报周报都写好&#xff0c;让你随时掌握项目进度和最终成果&#xff01;该项目基于ERNIE SDK开…

MSG3D论文解读

论文在stgcn与sta-lstm基础上做的。下面讲一下里面的方法&#xff1a; 1.准备工作 符号。这里是对符号进行解释。 一个人体骨骼图被记为G(v,E) 图卷积&#xff1a; 图卷积定义 考虑一种常用于处理图像的标准卷积神经网络 (CNN)。输入是像素网格。每个像素都有一个数据值向…

Windows10上使Git Bash支持rsync命令操作步骤

rsync命令是linux上常用的工具之一&#xff0c;用于远程以及本地系统中拷贝/同步文件和文件夹。 Windows Git Bash默认并不支持rsync&#xff0c;如下图所示&#xff1a; 使Git Bash支持rsync命令操作步骤&#xff1a; 1.从https://repo.msys2.org/msys/x86_64/ 下…

一、MongoDB、express的安装和基本使用

数据库【Sqlite3、MongoDB、Mysql】简介&小记 Sqlite3&#xff1a; SQLite3是一个轻量级的数据库系统&#xff0c;它被设计成嵌入式数据库。这意味着它是一个包含在应用程序中的数据库&#xff0c;而不是独立运行的系统服务。适用场景&#xff1a;如小型工具、游戏、本地…

算力总规模位列全球第二!中创:助推数据中心建设

近日&#xff0c;国新办举办新闻发布会&#xff0c;介绍2023年工业和信息化发展情况。算力、数据中心、云计算等与数字化转型、能源利用息息相关&#xff0c;被多次提及。 工业和信息化部新闻发言人、运行监测协调局局长陶青表示&#xff1a; 数字基础设施支撑有力&#xff0c;…

力扣算法-Day18

18.四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff1…

亚马逊鲲鹏系统:批量注册买家号的新利器

近年来&#xff0c;随着电商市场的迅速发展&#xff0c;亚马逊作为全球最大的在线零售平台之一&#xff0c;其买家号的需求也日益增长。而亚马逊鲲鹏系统是一个能够批量全自动注册亚马逊买家号的系统。而对于全自动批量注册&#xff0c;账号资料方面&#xff0c;也有一定的要求…

vue3 + antd 封装动态表单组件(二)

传送带&#xff1a; vue3 antd 封装动态表单组件&#xff08;一&#xff09; 前置条件&#xff1a; vue版本 v3.3.11 ant-design-vue版本 v4.1.1 vue3 antd 封装动态表单组件&#xff08;一&#xff09;是基础版本&#xff0c;但是并不好用&#xff0c; 因为需要配置很多表…

【QT+QGIS跨平台编译】之八:【zstd+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、zstd介绍二、文件下载三、文件分析四、pro文件五、编译实践一、zstd介绍 ZSTD(Zstandard的缩写),是一种快速压缩算法,提供了高压缩比功能。ZSTD还为小数据提供了一种特殊的模式,称为字典压缩。ZSTD库使用BSD许可证作为开放源码软件提供的。它的格式是稳定的,…