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…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN，根据VPN原理，打通两个内网必然需要借助一个公共中继节点，ktconnect工具巧妙的利用k8s原生的portforward能力，简化了建立连接的过程，apiserver间接起到了中继节…...
云原生安全实战：API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...
Git常用命令完全指南：从入门到精通
Git常用命令完全指南：从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生？别怕，教你轻松起飞！ 最近Homebrew更新至最新版，每次执行 brew 命令时都会自动从官方地址 https://formulae.…...