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 {

   @Autowired
   private 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; // 使用jquery
		  table = 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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年CSDN年底总结-独立开源创作者第一年

2023年最大的变化&#xff0c;就是出来创业&#xff0c;当独立开源创作者&#xff0c;这一年发起SolidUI开源项目&#xff0c;把知乎重新开始运营起来。CSDN粉丝破万&#xff0c;CSDN博客专家和AI领域创作者。 2023年年度关键词&#xff1a;创业 https://github.com/CloudOrc…

HCIP:三层架构

配置r1 配置r2 给sw1在vlanif1上配地址&#xff0c;并且ping 23.1.1.1 可通 给sw2配地址 在sw1上做汇总 在sw2上做汇总 在sw1上启动 在sw2上启动 在sw1上启动vlan 在sw2上启动vlan 在sw1上给接口配置vlan 在sw2上给接口配置vlan 在sw3上划分vlan 在sw4上划分vlan 给sw5划分vlan…

小红书如何做混部?

作者&#xff1a;宋泽辉&#xff08;小红书&#xff09;、张佐玮&#xff08;阿里云&#xff09; 编者按&#xff1a; Koordinator 是一个开源项目&#xff0c;是基于阿里巴巴内部多年容器调度、混部实践经验孵化诞生&#xff0c;是行业首个生产可用、面向大规模场景的开源混…

【RabbitMQ】延迟队列之死信交换机

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《RabbitMQ实战》。&#x1f3af;&#x1f3af; &am…

10.多柱状图(MuliBarChart)

愿你出走半生,归来仍是少年&#xff01; 环境&#xff1a;.NET 7、MAUI 话接上回&#xff08;9.单柱状图&#xff08;SingleBarChart&#xff09;&#xff09;&#xff0c;从单柱拓展到多柱状图。 1.数据设置 private void InitValue(List<BasicSerieDto> dtos){Serie…

[ACM学习] 进制转换

进制的本质 本质是每一位的数位上的数字乘上这一位的权重 将任意进制转换为十进制 原来还很疑惑为什么从高位开始&#xff0c;原来从高位开始的&#xff0c;可以被滚动地乘很多遍。 将十进制转换为任意进制

泽众云真机-机型集中化运维方案升级全面完成

2024年元月份&#xff0c;泽众云真机运维团队&#xff0c;经过几个月软硬件多轮安装调试&#xff0c;机型集中化运维方案升级全面完成。解决了云真机的机型集中化运维难题&#xff0c;方便了运营人员手机管理。 具体如下&#xff1a; 1、集中化运维&#xff0c;如服务器、PC、…

数学建模学习笔记||一文了解美赛论文如何写作

目录 ​编辑 Title/标题 要求 形式 Summary Sheet/摘要 要求 三要素 书写特点 内容 开头段 中间段 格式 内容 结尾段 关键词 Contents/目录 Introduction/引言 Problem Background/问题背景 Restatement of the Problem/问题重述 Literature Review/文献综…

RabbitMQ 笔记一

概览&#xff1a; MQ基本概念 RabbitMQ入门 基本工作模 1.MQ是什么&#xff1f; MQ:Message Queue, 存储消息的中间件&#xff0c;是消息发送过程中的暂存容器&#xff0c;主要用于解决分布式系统进程间的通信。 分布式系统通信的两种方式&#xff1a;直接远程调用、借助第三…

vue---打印本地当前时间Demo

<template><view class"content" tap"getCurrentTime()">打印时间</view> </template><script>export default {data() {return {title: Hello}},onLoad() {},methods: {getCurrentTime() {//获取当前时间并打印var _this …

E7数据库备份和恢复

E7数据库备份和恢复 一、实验目的 在Mysql上&#xff0c;学习如何备份数据库和恢复的各种方法。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存&#xff1b; 2、软件要求:Mysql&#xff1b; 3、时间:1小时&#xff1b; 4、撰写实验报告并按时提交。 三、…

windows下git pull超时,ping不通github

报错 ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 解决办法 修改hosts 最后加一行&#xff0c;文件位置&#xff1a;…

利用 “diart“ 和 OpenAI 的 Whisper 简化实时转录

利用 "diart" 和 OpenAI 的 Whisper 简化实时转录 工作原理 Diart 是一个基于人工智能的 Python 库&#xff0c;用于实时记录说话者语言&#xff08;即 "谁在什么时候说话"&#xff09;&#xff0c;它建立在 pyannote.audio 模型之上&#xff0c;专为实时…

Ubuntu 22.04安装Nginx负载均衡

君衍. 一、编译安装Nginx二、轮询算法实现负载均衡三、加权轮询算法实现负载均衡四、ip_hash实现负载均衡 一、编译安装Nginx 这里我们先将环境准备好&#xff0c;我使用的是Ubuntu22.04操作系统&#xff1a; 这个是我刚安装好的&#xff0c;所以首先我们进行保存快照防止安装…

金融OCR领域实习日志(二)——四种OCR模型效果测试(附图)

文章目录 四种模型ocr效果简单测试模型场景1.paddle框架下PP-OCRv31.1.效果如下&#xff1a;1.2.总结 2.paddle框架下ppocr_server_v22.1.效果如下2.2.总结 3.CnOCR3.1.效果如下3.2.总结 4.TesseractOCR4.1.效果如下4.2.总结 5.后续想法 四种模型ocr效果简单测试 模型 PP-OCR…

文件操作---C++

文件操作目录 1.文本文件1.1写文件1.2读文件1.2.1第一种方式&#xff1a;流输入方式1.2.2第二种方式&#xff1a;getline成员函数1.2.3第三种方式&#xff1a;getline全局函数1.2.4第四种方式&#xff1a;按一个一个字符读取 2.二进制文件2.1写文件2.2读文件 程序运行时产生的数…

【C++进阶】STL容器--list使用迭代器问题分析

目录 前言 1. list的基本使用 1.1 list构造函数 1.2 list迭代器 1.3 list capacity 1.4 list元素访问 1.5 list 修改操作 insert erase swap resize clear 2. list失效迭代器问题 3. list使用算法库函数问题 总结 前言 list&#xff08;链表&#xff09;在C中非常重要…

分享7种SQL的进阶用法

分享7种SQL的进阶用法 前言 还只会使用SQL进行简单的insert、update、detele吗&#xff1f;本文给大家带来7种SQL的进阶用法&#xff0c;让大家在平常工作中使用SQL简化复杂的代码逻辑。 1.自定义排序&#xff08;ORDER BY FIELD&#xff09; 在MySQL中ORDER BY排序除了可以…

vue模拟聊天页面列表:滚动到底部,滚动到顶部触发加载更多

先看下效果&#xff1a; 代码&#xff1a; <template><div><div style"text-align: center"><button click"scrollTop">滚动到顶部</button><button click"scrollBottom">滚动到底部</button></d…

GitHub Copilot 与 ChatGPT:哪种工具更适合软件开发?

GitHub Copilot 与 ChatGPT&#xff1a;哪种工具更适合软件开发&#xff1f; 比较 ChatGPT 与 GitHub Copilot编程语言功能性定制化训练数据上下文准确性 ChatGPT 与 GitHub Copilot&#xff1a;哪个更适合软件开发&#xff1f;常见问题解答&#xff1a; 不断发展的编程世界正在…