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…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...