当前位置：首页 > news >正文

SSM框架实战小项目：打造高效用户管理系统 day3

news 2025/9/15 7:02:40

前言

在前两篇博客中，后台已经搭建完毕，现在需要设计一下前端页面

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文件…...

编程日记 2024/10/20 18:23:51

一款现代化、可定制的跨平台文件浏览器，高颜值高效率的的管理神器！（附私活源码）

在如今这个注重效率的时代，我们每天都在与文件打交道。但是，你有没有感觉到传统的文件管理器总是让人提不起劲？单调的外观，有限的功能，仿佛是上个世纪的产物。一直以来，我都在寻找一款既颜值高又功能强…...

编程日记 2024/10/20 18:22:50

【C】二分查找与函数1

二分查找练习： 给定一个整型的有序数组，在数组中找到指定的一个值，如： 1，2，3，4，5，6，7，8，9，10 找出7.如果找到了&#x…...

编程日记 2024/10/20 18:21:49

光纤光学的基本方程

一、麦克斯韦方程与亥姆赫兹方程 1.1 麦克斯韦方程光纤是一种介质光波导，具有以下特点： ① 无传导电流 ② 无自由电荷 ③ 线性各向同性推导出来的即为波动方程。为材料在真空中的磁导率，为材料在真空中的介电常数，n为材料折…...

编程日记 2024/10/20 18:20:48

题解：CF584D Dima and Lisa

前置知识哥德巴赫猜想，任一大于 2 2 2 的偶数都可写成两个素数之和。思路我们可以分类讨论一下。 n n n 一开始就是质数。直接输出即可 n n n 是偶数，那么一定可以写成两个质数之和。那么暴力枚举两个质数即可。如果以上均不符合，计…...

编程日记 2024/10/20 18:18:47

【OD】【E卷】【真题】【100分】内存资源分配（PythonJavaJavaScriptC++C）

题目描述有一个简易内存池，内存按照大小粒度分类，每个粒度有若干个可用内存资源，用户会进行一系列内存申请，需要按需分配内存池中的资源返回申请结果成功失败列表。分配规则如下： 分配的内存要大于等于内存的申请…...

编程日记 2024/10/20 18:17:45

Linux基础项目开发day05：量产工具——页面系统

文章目录一、数据结构抽象page_manager.h 二、页面管理器page_manager.c 三、单元测试1、main.page.c2、page_test.c3、Makefile修改3.1、unittest中的Makefile3.2、page中的Makefile 四、上机实验前言前面实现了显示、输入、文字、UI系统，现在我们就来实现页面的…...

编程日记 2024/10/20 18:14:42

保护企业终端安全，天锐DLP帮助企业智能管控终端资产

为有效预防员工非法调包公司的软硬件终端资产，企业管理员必须建立高效的企业终端安全管控机制，确保能够即时洞察并确认公司所有软硬件资产的状态变化。这要求企业要有一套能够全面管理终端资产的管理系统，确保任何未经授权的资产变动都能被迅…...

编程日记 2024/10/20 18:11:39

2024市场营销第3次课

品牌管理 1.认识品牌品牌定义：一个名称、术语、标志、符号或设计，或者是它们的组合，用来识别某个销售商或某一群销售商的产品或服务，并使其与竞争者的产品或服务区分开来。品牌构成：成功品牌的构成都是由外及内的…...

编程日记 2024/10/20 18:10:37

Python基础之函数的定义与调用

一、函数的定义在Python中，函数是一段可重复使用的代码块，用于完成特定的任务。可以使用def关键字来定义函数。语法如下： def function_name(parameters): """docstring""" # function body return expres…...

编程日记 2024/10/20 18:07:34

GPU在AI绘画中的作用以及GPU的选择

大家好，我是Shelly，一个专注于输出AI工具和科技前沿内容的AI应用教练，体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具，拥抱AI时代的到来。 GPU在AI绘画中的作用： GPU在A…...

编程日记 2024/10/20 18:06:33

【火山引擎】 Chat实践 | 大模型调用实践 | python

目录一前期工作二 Doubao-pro-4k_test实践一前期工作 1 已在火山方舟控制台在线推理页面创建了推理接入点，接入大语言模型并获取接入点 ID。 2 已参考安装与初始化中的步骤完成 SDK 安装和访问凭证配置...

编程日记 2024/10/20 18:05:32

mysql学习教程，从入门到精通，SQL 注入（42）

1、 SQL 注入 SQL 注入是一种严重的安全漏洞，它允许攻击者通过操纵 SQL 查询来访问、修改或删除数据库中的数据。由于 SQL 注入的潜在危害，我不能提供具体的恶意代码示例。然而，我可以向你展示如何防御 SQL 注入，并解释其工作原理…...

编程日记 2024/10/20 18:00:25

图论day60|108.冗余连接（卡码网）、109.冗余连接II（卡码网）【并查集摧毁信心的一题，胆小的走开！】

图论day60|108.冗余连接（卡码网）、109.冗余连接II（卡码网）【并查集摧毁信心的一题，胆小的走开！】 108.冗余连接（卡码网）109.冗余连接II（卡码网）【并查集摧毁…...

编程日记 2024/10/20 17:58:21

即使是编程新手，也能利用ChatGPT编写高质量的EA

在外汇交易领域，MetaTrader是一款备受欢迎的交易软件，包括MT5和MT4，提供了众多强大的分析工具和自动化交易功能。对于没有编程经验的新手而言，编写专家顾问（EA）可能显得既复杂又令人望而却步。幸运的是&…...

编程日记 2024/10/20 17:55:18

StarRocks大批量数据导入方案-使用 Routine Load 导入数据

本文详细介绍如何使用Routine Load 导入数据一、准备工作 1.1 安装基础环境主要是安装StarRocks和Kafka，本文直接跳过不做详细介绍~ 二、概念及原理 2.1 概念导入作业（Load job） 导入作业会常驻运行，当导入作业的状态为 R…...

编程日记 2024/10/20 17:53:15

从零开始学PHP之输出语句变量常量

一、输出方式在 PHP 中输出方式： echo，print，print_r，var_dump 1、echo和print为php的输出语句 2、var_dump，print_r为php的输出函数 （这里不做介绍）echo 和 print 区别 1、echo - 可以输出…...

编程日记 2024/10/20 17:52:14

二叉树算法之字典树（Trie）详细解读

字典树（Trie，也称前缀树或单词查找树）是一种用于快速查找字符串的数据结构，主要应用于字符串集合的高效存储和查找。字典树特别适合处理具有相同前缀的大量字符串集合，比如单词自动补全、拼写检查等场景。 1. 字典树的…...

编程日记 2024/10/20 17:51:13

butterfly侧边栏音乐模块

方法1.美观但换页后没法播放 1.blog根目录/source文件夹下新建_data文件夹（如果没有_data文件夹） 2.在刚刚的_data文件夹里创建widget.yml文件 bottom:- class_name: user-musicid_name: user-musicname: 音乐icon: fas fa-heartbeatorder:html: <…...

编程日记 2024/10/20 17:46:09

【论文阅读】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…...

编程日记 2024/10/20 17:45:08

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/15 0:18:50

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/9/14 10:14:39

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/9/14 10:39:35

docker详细操作--未完待续

docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...

编程新知 2025/9/12 22:07:56

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2025/9/9 14:51:22

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

【Java_EE】Spring MVC

目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递注意事项编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据编辑RequestBody …...

编程新知 2025/9/3 18:59:01