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…...
Java中的动态代理——介绍与使用示例
Java中的动态代理其实就是一种“代理”模式，在运行时帮我们创建一个“代理对象”，通过这个代理对象可以在不改变原本方法的情况下，做一些额外的事情，比如记录日志、检查权限等。这种代理机制非常灵活和实用，特别是在像…...
微信开发者工具：音乐小程序报错
报错信息 GET http://localhost:3000/1.mp3 net::ERR CONNECTION REFUSED (env: Windows,mp,1.06.2303220;lib:3.6.0) 原因：小程序没有直接获取本地文件，为了提高访问速度，而采用放到网络服务器中网络访问的方式获取文件内容 解决办法&#…...
P2-3与P2-4.【C语言基本数据类型、运算符和表达式】第三节与第四节
讲解视频： P2-3.【基本数据类型、运算符和表达式】第三节 P2-4.【基本数据类型、运算符和表达式】第四节 目录 必备知识与理论 任务实施 必备知识与理论 C语言中把除了控制语句和输入输出以外的几乎所有的基本操作都作为运算符处理。 其运算符和表达式数量之多&a…...
Python | Leetcode Python题解之第492题构造矩形
题目： 题解： class Solution:def constructRectangle(self, area: int) -> List[int]:w int(sqrt(area))while area % w:w - 1return [area // w, w]...
新版vs code + Vue高亮、语法自动补全插件
vs code 版本或及以上 安装以下三个插件插件 Vetur Vue语法支持。包括语法高亮、语法代码提示、语法lint检测 ESLint语法纠错 Prettier 2.左下角设置 3.进行配置 配置内容： {"editor.fontSize": 20,"window.zoomLevel": 1,"workben…...
【优选算法】（第四十五篇）
目录 地图分析（medium） 题目解析 讲解算法原理 编写代码 课程表（medium） 题目解析 讲解算法原理 编写代码 地图分析（medium） 题目解析 1.题目链接：. - 力扣（LeetCode&#…...
自闭症儿童的康复与培养：揭秘有效方法
在生命的广阔画卷中，每一个孩子都是独一无二的色彩，他们带着各自的使命和梦想，踏上人生的旅程。然而，对于自闭症儿童而言，这段旅程似乎更加崎岖和艰难。幸运的是，星贝育园康复中心如同一盏明灯，…...
rom定制系列------小米8澎湃os1.0.28安卓13客户定制固件 刷写以及界面预览
💝💝💝 小米8后置指纹版，机型代码dipper， 官方最终版为12.5.2安卓10的版本。对于一些工作室不太适用。客户需要应用在安卓13的固件。根据客户提供的固件将卡刷改为线刷。并且修改其中客户需求。去除不需要的内置应用以…...
【CTF-SHOW】Web入门 Web14 【editor泄露-详】【var/www/html目录-详】
editor泄露问题通常出现在涉及文件编辑器或脚本编辑器的题目中，尤其是在Web安全或Pwn（系统漏洞挖掘）类别中。editor泄露的本质是由于系统未能妥善处理临时文件、编辑历史或进程信息，导致攻击者可以通过某种途径获取正在编辑的敏感…...
Chrome谷歌浏览器禁止空格下翻页但可以暂停和播放视频脚本js
前提 播放某些网站的视频的时候(不能网页全屏的视频) 会产生空格下翻页但是不能暂停播放视频，解决方案:下载油猴或者脚本猫把这代码填进去 (function() {use strict;document.body.onkeydown function(event) {var e window.event || event;// 检查是否按下空格…...