SSM框架实战小项目：打造高效用户管理系统 day3
前言
在前两篇博客中，后台已经搭建完毕，现在需要设计一下前端页面
webapp下的项目结构图
创建ftl文件夹，导入css和js
因为我们在后台的视图解析器中，设置了页面解析器，跳转路径为/ftl/*.ftl，所以需要ftl文件夹，以便识别。
css和js的资源我会上传。
list.ftl
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/ftl/css/bootstrap.min.css"><link rel="stylesheet" href="/ftl/css/laypage.css"><script src="/ftl/js/vue/vue.min.js"></script><script src="/ftl/js/jquery/jquery.min.js"></script><script src="/ftl/js/laypage/laypage.js" charset="utf-8"></script><script src="/ftl/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container"><form class="form-inline bg-warning" role="form">查询条件：<div class="form-group"><label class="sr-only" for="username">用户名称</label><input type="text" class="form-control" id="username" placeholder="用户名称"></div><div class="form-group"><label class="sr-only" for="userage">用户年龄</label><input type="text" class="form-control" id="userage" placeholder="用户年龄"></div><button type="button" id="findUser" class="btn bg-primary ">查询用户</button><button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button></form><div class="table-responsive"><table class="table"><thead><tr class="success"><td>用户</td><td>年龄</td><td>操作</td></tr></thead><tbody><tr class="active" v-for="(item,index) in result"><td>{{item.name}}</td><td>{{item.age}}</td><td><a href="#" @click="editEvent(item.id)">修改</a><a href="#" @click="delEvent(item.id)">删除</a></td></tr></tbody><tr><td colspan="3"><div id="pagenav"></div></td></tr></table></div>
</div><script>var app = new Vue({el: '#app',data: {result: []}});//查询用户数据var getUserPageList = function (curr) {$.ajax({type: "post",dataType: "json",url: "/user/getPage.do",data: {pageNum: curr || 1,pageSize: 5,name: $("#username").val(),age:$("#userage").val()},success: function (msg) {app.result = msg.page;//分页效果laypage({cont: 'pagenav',pages: msg.totalPage,skin: '#DB7093',first: '第一页',last: '最后一页',curr: curr || 1,jump: function (obj, first) {if (!first) {//点击跳页触发函数本身,并床底当前页的页码getUserPageList(obj.curr);}}});}});}getUserPageList();$("#findUser").click(function () {getUserPageList();});$("#addUserBtn").click(function (){layer.open({type: 2,title: '增加用户',fix: false,maxmin: true,shadeClose: true,area: ['1100px', '600px'],content: '/ftl/add.html',end: function () {getUserPageList();}});});var editEvent = function (id) {layer.open({type: 2,title: '编辑用户',fix: false,maxmin: true,shadeClose: true,area: ['1100px', '600px'],content: '/user/editPage.do?id=' + id,end: function () {getUserPageList();}});}var delEvent = function (uid) {layer.confirm("确认删除吗?",{btn: ['残忍删除', '容我想想']},function () {$.ajax({type: "get",dataType: "json",url: "/user/delUser.do",data: {id: uid},success: function () {getUserPageList();layer.msg("删除成功", {icon: 6})}})},function () {});}
</script>
</body>
</html> edit.ftl
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/ftl/css/bootstrap.min.css"><script src="/ftl/js/jquery/jquery.min.js"></script><script src="/ftl/js/jquery.validation/1.14.0/jquery.validate.min.js"></script><script src="/ftl/js/jquery.validation/1.14.0/messages_zh.min.js"></script><style>input.error {border: 1px solid red;}</style>
</head>
<body>
<div class="container"><form id="addUserForm"><br/><div class="form-group"><label for="username">用户名称：</label><input type="text" class="form-control" id="username" name="username" value="${data.name}"placeholder="输入名称"></div><div class="form-group"><label for="userage">用户年龄：</label><input type="text" class="form-control" id="userage" name="userage" value="${data.age}" placeholder="输入年龄"></div><div class="form-group"><button type="button" id="saveBtn" class="btn btn-success">修改</button><button type="button" id="cancelBtn" class="btn btn-default">取消</button></div></form>
</div><script>var updateUser = function () {if (!check().form()) {return;}$.ajax({type: "post",dataType: "json",url: "/user/updateUser.do",data: {"id":${data.id},"name": $("#username").val(),"age": $("#userage").val()},success: function (msg) {console.log("msg=-=-----" + msg)$("#cancelBtn").click();}/*,error: function (XmlHttpRequest, textStatus, errorThrown) {console.log("textStatus=====" + textStatus);}*/})}$("#saveBtn").click(function () {updateUser();})$("#cancelBtn").click(function () {var index = parent.layer.getFrameIndex(window.name);parent.getUserPageList();parent.layer.close(index);});function check() {return $("#addUserForm").validate({rules: {username: {required: true},userage: {required: true}},message: {username: {required: ""},userage: {required: ""}}});}</script>
</body>
</html>add.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery/jquery.min.js"></script><script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script><script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script><style>input.error {border: 1px solid red;}</style>
</head>
<body>
<div class="container"><form id="addUserForm"><br/><div class="form-group"><label for="username">用户名称：</label><input type="text" class="form-control" id="username" name="username" placeholder="输入名称"></div><div class="form-group"><label for="userage">用户年龄：</label><input type="text" class="form-control" id="userage" name="userage" placeholder="输入年龄"></div><div class="form-group"><button type="button" id="saveBtn" class="btn btn-success">提交</button><button type="button" id="cancelBtn" class="btn btn-default">取消</button></div></form>
</div><script>var addUser = function () {if (!check().form()) {return;}$.ajax({type: "post",dataType: "json",url: "/user/add.do",data: {"name": $("#username").val(),"age": $("#userage").val()},success: function (msg) {console.log("msg=-=-----" + msg)$("#cancelBtn").click();}/*,error: function (XmlHttpRequest, textStatus, errorThrown) {console.log("textStatus=====" + textStatus);}*/})}$("#saveBtn").click(function () {addUser();})$("#cancelBtn").click(function () {var index = parent.layer.getFrameIndex(window.name);parent.getUserPageList();parent.layer.close(index);});function check() {return $("#addUserForm").validate({rules: {username: {required: true},userage: {required: true}},message: {username: {required: ""},userage: {required: ""}}});}</script>
</body>
</html>大部分都是套用了组件，我们需要关注的仅仅是ajax传入后台数据的参数名和参数类型，以及页面显示后台数据的参数名和参数值。
相关文章：
SSM框架实战小项目：打造高效用户管理系统 day3
前言 在前两篇博客中，后台已经搭建完毕，现在需要设计一下前端页面 webapp下的项目结构图 创建ftl文件夹，导入css和js 因为我们在后台的视图解析器中，设置了页面解析器，跳转路径为/ftl/*.ftl，所以需要ftl文件…...
一款现代化、可定制的跨平台文件浏览器，高颜值高效率的的管理神器！（附私活源码）
在如今这个注重效率的时代，我们每天都在与文件打交道。 但是，你有没有感觉到传统的文件管理器总是让人提不起劲？单调的外观，有限的功能，仿佛是上个世纪的产物。 一直以来，我都在寻找一款既颜值高又功能强…...
【C】二分查找与函数1
二分查找 练习： 给定一个整型的有序数组，在数组中找到指定的一个值，如： 1，2，3，4，5，6，7，8，9，10 找出7.如果找到了&#x…...
光纤光学的基本方程
一、麦克斯韦方程与亥姆赫兹方程 1.1 麦克斯韦方程 光纤是一种介质光波导，具有以下特点： ① 无传导电流 ② 无自由电荷 ③ 线性各向同性 推导出来的即为波动方程。为材料在真空中的磁导率，为材料在真空中的介电常数，n为材料折…...
题解：CF584D Dima and Lisa
前置知识 哥德巴赫猜想，任一大于 2 2 2 的偶数都可写成两个素数之和。 思路 我们可以分类讨论一下。 n n n 一开始就是质数。直接输出即可 n n n 是偶数，那么一定可以写成两个质数之和。那么暴力枚举两个质数即可。 如果以上均不符合，计…...
【OD】【E卷】【真题】【100分】内存资源分配（PythonJavaJavaScriptC++C）
题目描述 有一个简易内存池，内存按照大小粒度分类，每个粒度有若干个可用内存资源，用户会进行一系列内存申请，需要按需分配内存池中的资源返回申请结果成功失败列表。 分配规则如下： 分配的内存要大于等于内存的申请…...
Linux基础项目开发day05：量产工具——页面系统
文章目录 一、数据结构抽象page_manager.h 二、页面管理器page_manager.c 三、单元测试1、main.page.c2、page_test.c3、Makefile修改3.1、unittest中的Makefile3.2、page中的Makefile 四、上机实验 前言 前面实现了显示、输入、文字、UI系统，现在我们就来实现页面的…...
保护企业终端安全，天锐DLP帮助企业智能管控终端资产
为有效预防员工非法调包公司的软硬件终端资产，企业管理员必须建立高效的企业终端安全管控机制，确保能够即时洞察并确认公司所有软硬件资产的状态变化。这要求企业要有一套能够全面管理终端资产的管理系统，确保任何未经授权的资产变动都能被迅…...
2024市场营销第3次课
品牌管理 1.认识品牌 品牌定义：一个名称、术语、标志、符号或设计，或者是它们的组合，用来识别某个销售商或某一群销售商的产品或服务，并使其与竞争者的产品或服务区分开来。 品牌构成：成功品牌的构成都是由外及内的…...
Python基础之函数的定义与调用
一、函数的定义 在Python中，函数是一段可重复使用的代码块，用于完成特定的任务。可以使用def关键字来定义函数。 语法如下： def function_name(parameters): """docstring""" # function body return expres…...
GPU在AI绘画中的作用以及GPU的选择
大家好，我是Shelly，一个专注于输出AI工具和科技前沿内容的AI应用教练，体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具，拥抱AI时代的到来。 GPU在AI绘画中的作用： GPU在A…...
【火山引擎】 Chat实践 | 大模型调用实践 | python
目录 一 前期工作 二 Doubao-pro-4k_test实践 一 前期工作 1 已在火山方舟控制台在线推理页面创建了推理接入点 ，接入大语言模型并获取接入点 ID。 2 已参考安装与初始化中的步骤完成 SDK 安装和访问凭证配置...
mysql学习教程，从入门到精通，SQL 注入（42）
1、 SQL 注入 SQL 注入是一种严重的安全漏洞，它允许攻击者通过操纵 SQL 查询来访问、修改或删除数据库中的数据。由于 SQL 注入的潜在危害，我不能提供具体的恶意代码示例。然而，我可以向你展示如何防御 SQL 注入，并解释其工作原理…...
图论day60|108.冗余连接（卡码网） 、109.冗余连接II（卡码网）【并查集 摧毁信心的一题，胆小的走开！】
图论day60|108.冗余连接（卡码网）、109.冗余连接II（卡码网）【并查集 摧毁信心的一题，胆小的走开！】 108.冗余连接（卡码网）109.冗余连接II（卡码网）【并查集 摧毁…...
即使是编程新手，也能利用ChatGPT编写高质量的EA
在外汇交易领域，MetaTrader是一款备受欢迎的交易软件，包括MT5和MT4，提供了众多强大的分析工具和自动化交易功能。对于没有编程经验的新手而言，编写专家顾问（EA）可能显得既复杂又令人望而却步。幸运的是&…...
StarRocks大批量数据导入方案-使用 Routine Load 导入数据
本文详细介绍如何使用Routine Load 导入数据 一、准备工作 1.1 安装基础环境 主要是安装StarRocks和Kafka，本文直接跳过不做详细介绍~ 二、概念及原理 2.1 概念 导入作业（Load job） 导入作业会常驻运行，当导入作业的状态为 R…...
从零开始学PHP之输出语句变量常量
一、 输出方式 在 PHP 中输出方式： echo，print，print_r，var_dump 1、echo和print为php的输出语句 2、var_dump，print_r为php的输出函数 （这里不做介绍）echo 和 print 区别 1、echo - 可以输出…...
二叉树算法之字典树（Trie）详细解读
字典树（Trie，也称前缀树或单词查找树）是一种用于快速查找字符串的数据结构，主要应用于字符串集合的高效存储和查找。字典树特别适合处理具有相同前缀的大量字符串集合，比如单词自动补全、拼写检查等场景。 1. 字典树的…...
butterfly侧边栏音乐模块
方法1.美观但换页后没法播放 1.blog根目录/source文件夹下新建_data文件夹（如果没有_data文件夹） 2.在刚刚的_data文件夹里创建widget.yml文件 bottom:- class_name: user-musicid_name: user-musicname: 音乐icon: fas fa-heartbeatorder:html: <…...
【论文阅读】Detach and unite: A simple meta-transfer for few-shot learning
分离与联合：一种用于小样本学习的简单元迁移方法 引用：Zheng Y, Zhang X, Tian Z, et al. Detach and unite: A simple meta-transfer for few-shot learning[J]. Knowledge-Based Systems, 2023, 277: 110798. 论文地址：下载地址 论文代码&a…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
基于 TAPD 进行项目管理
起因 自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD，需要提供一个企业名新建一个项目&#…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...