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

《代码实例前端Vue》Security查询用户列表，用户新增

news 2025/12/13 13:23:58

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>系统登录-超市订单管理系统</title><link rel="stylesheet" href="../css/style.css"><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/axios.min.js"></script>
</head>
<body class="login_bg">
<div id="app"><section class="loginBox"><header class="loginHeader"><h1>超市订单管理系统</h1></header><section class="loginCont"><div  style="text-align: center;height: 30px; font-size: 20px; color: red;">帐号或密码错误</div><div class="inputbox"><label for="userCode">用户名：</label><input type="text" class="input-text" v-model="username" id="userCode" name="userCode" placeholder="请输入用户名" required/></div><div class="inputbox"><label for="userPassword">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="userPassword" v-model="password" name="userPassword" placeholder="请输入密码" required/></div><div class="subBtn"><button type="button" value="登录" @click="loginBtn">登录</button><button type="button"  value="重置">重置</button></div></section></section>
</div><script>new Vue({el: '#app',data() {return {username:'',password:''}}, methods: {loginBtn(){let param = new URLSearchParams();param.append("username",this.username);param.append("password",this.password);axios({url:'http://localhost:8082/login',method:'post',data:param}).then(res=>{console.log(res.data)if(res.data.code==200){//存jwtlocalStorage.setItem("jwt",res.data.data);//跳页面window.location.href="index.html";}})}}, created() {}});
</script>
</body>
</html>

user_list.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超市订单管理系统</title><link type="text/css" rel="stylesheet" href="../../css/style.css"/><link type="text/css" rel="stylesheet" href="../../css/public.css"/><link href="../../css/bootstrap.css" rel="stylesheet"><script src="../../js/jquery-3.4.1.js"></script><script src="../../js/bootstrap.js"></script><script type="text/javascript" src="../../js/vue.js"></script><script type="text/javascript" src="../../js/axios.min.js"></script><style>table tr, td, th {text-align: center;}</style>
</head>
<body>
<div style="width: 100%;height: 100%" id="app"><div class="location"><strong>你现在所在的位置是:</strong> <span>用户管理页面</span></div><div class="search"><span>用户名：</span><input name="queryname"  v-model="name" class="input-text" type="text"><span>用户角色：</span><select name="queryUserRole" v-model="gender"><option value="">--请选择--</option><option value="1">男</option><option value="2">女</option></select><input type="hidden" name="pageIndex" value="1"/><input value="查 询"  @click="queryUser" type="submit" id="searchbutton" style="position: relative;top: 10px"><a href="./user_add.html" style="width: 120px">添加用户</a></div><!--用户--><table class="providerTable" cellpadding="0" cellspacing="0"><tr class="firstTr"><th width="10%">序号</th><th width="10%">用户编码</th><th width="20%">用户名称</th><th width="10%">性别</th><th width="15%">电话</th><th width="10%">用户角色</th><th width="10%">操作</th></tr><tr v-for="(u,index) in userList"><td><span>{{index+1}}</span></td><td><span>{{u.id}}</span></td><td><span>{{u.username}}</span></td><td><span>{{u.gender==1?'男':'女'}}</span></td><td><span>{{u.phone}}</span></td><td><span>xxx</span></td><td><span><a class="modifyUser" href="./user_update.html"><img src="../../images/xiugai.png" alt="修改" title="修改"/></a></span><span><a class="deleteUser" href="#"><img src="../../images/schu.png" alt="删除" title="删除"/></a></span></td></tr></table><!--分页组件--><center><div style="margin-top:10px"><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">下一页</span></a></li><li class="disabled"><span>当前 x 页/共 x 页/共 x 条</span></li></ul></nav></div></center></section><!--点击删除按钮后弹出的页面--><div class="zhezhao"><div class="remove" id="removeProv"><div class="removerChid"><h2>提示</h2><div class="removeMain"><p>你确定要删除该供应商吗？</p><a href="#" id="yes">确定</a><a href="#" id="no">取消</a></div></div></div></div>
</div>
</div><script>new Vue({el: '#app',data() {return {name:'',gender:'1',userList:[]}}, methods: {queryUser(){//alert(this.name+";"+this.gender)const jwt=localStorage.getItem("jwt");axios.get('http://localhost:8082/user/queryUser?name='+this.name+"&gender="+this.gender,{headers:{'jwt':jwt}}).then(res=>{console.log(res.data)if(res.data.code==200){this.userList=res.data.data}})}}, created() {this.queryUser();}});
</script>
</body>
</html>

user_add.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超市订单管理系统</title><link type="text/css" rel="stylesheet" href="../../css/style.css"/><link type="text/css" rel="stylesheet" href="../../css/public.css"/><link href="../../css/bootstrap.css" rel="stylesheet"><script src="../../js/jquery-3.4.1.js"></script><script src="../../js/bootstrap.js"></script><script type="text/javascript" src="../../js/vue.js"></script><script type="text/javascript" src="../../js/axios.min.js"></script>
</head>
<body>
<div style="width: 100%;height: 100%" id="app"><div class="location"><strong>你现在所在的位置是:</strong><span>用户管理页面 >> 用户添加页面</span></div><div class="providerAdd"><!--div的class 为error是验证错误，ok是验证成功--><div><label for="userCode">用户编码：</label><input type="text"  v-model="user.code" name="userCode" id="userCode" value=""><!-- 放置提示信息 --><font color="red"></font></div><div><label for="userName">用户名称：</label><input type="text" name="userName" v-model="user.username"  id="userName" value=""><font color="red"></font></div><div><label for="userPassword">用户密码：</label><input type="password" v-model="user.password" name="userPassword" id="userPassword" value=""><font color="red"></font></div><div><label for="ruserPassword">确认密码：</label><input type="password" v-model="user.rusepassword" name="ruserPassword" id="ruserPassword" value=""><font color="red"></font></div><div><label for="phone">用户电话：</label><input type="text" v-model="user.phone" name="phone" id="phone" value=""><font color="red"></font></div><div class="providerAddBtn"><input type="button" value="保存" @click="saveUser"><input type="button" id="back" name="back" value="返回"></div></form></div>
</div><script>new Vue({el: '#app',data() {return {user:{code:'',username:'',password:'',rusepassword:'',phone:''}}}, methods: {saveUser(){console.log(this.user);const jwt=localStorage.getItem("jwt");axios.post('http://localhost:8082/user/addUser',this.user,{headers:{'jwt':jwt}}).then(res=>{console.log(res.data)if(res.data.code==5000){alert("没有操作权限!!!")}if(res.data.code==200){window.location.href="user_list.html"}})}}, created() {}});
</script>
</body>
</html>

相关文章：

《代码实例前端Vue》Security查询用户列表，用户新增

login.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>系统登录-超市订单管理系统</title><link rel"stylesheet" href"../css/style.css"><script type&qu…...

编程日记 2023/5/12 12:41:18

CANopenNode学习笔记（一）--- README翻译

CANopenNode学习笔记 文章目录CANopenNode学习笔记特性CANopen其他CANopenNode 流程图文件结构对象字典编辑器CANopenNode 是免费开源的CANopen协议栈。 CANopen是建立在CAN基础上的用于嵌入式控制系统的国际标准化(EN 50325-4) (CiA301)高层协议。有关CANopen的更多信息&#…...

编程日记 2023/5/25 7:39:14

关于Android 11、12和13服务保活问题

物联网环境&#xff0c;为了解决不同厂商、不同设备、不同网络情况下使用顺畅&#xff0c;同时也考虑到节约成本&#xff0c;缩小应用体积的好处&#xff0c;我们需要一个服务应用一直存在系统中&#xff0c;保活它以提供服务给其他客户端调用。 开机自启动&#xff0c;通过广播…...

编程日记 2023/5/30 12:56:23

Java 泛型 使用案例

参考资料 Java 基础 - 泛型机制详解路人甲-Java泛型专题 目录一. 通用Mapper1.1 实体类1.2 Mapper基类1.3 自定义接口1.4 抽象基类Service1.5 调用二. session和bean的获取一. 通用Mapper 1.1 实体类 ⏹ Accessors(chain true): 允许链式调用 import lombok.Data; import …...

编程日记 2023/5/15 14:35:46

进程与线程

文章目录什么是线程线程与进程的关系线程与进程的区别什么是线程 上一篇文章中我们介绍了什么进程&#xff0c;我们把进程比作一个工厂&#xff0c;那么线程就是工厂中的流水线。引入进程的目的就是为了实现多个任务并发执行&#xff0c;但是如果频繁的创建销毁进程&#xff0…...

编程日记 2023/5/14 9:31:57

骑友，怎么挑选适合自己的赛事

骑友&#xff0c;怎么挑选适合自己的赛事一、从场地、路况、天气&#xff0c;各个方面了解赛事的要求。二、看完赛事&#xff0c;要知道自己适合参加什么样的比赛。三、通过比赛成绩&#xff0c;对比自己的实力。四、综合考虑自己的经济能力&#xff0c;根据自己的经济能力选择…...

编程日记 2023/5/2 12:09:26

【Java 数据结构与算法】-遍历Map和Set的方式

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【Java 数据结构与算法】 文章目录一、遍历Map法一 先获取Map集合的全部key的set集合&#xff0c;遍历map的key的Set集合法二 把map的key和value打包成Set的key后的这个Set集合法…...

编程日记 2023/5/24 3:40:18

组件、套件、 中间件、插件

组件、套件、 中间件、插件 组件 位于框架最底层&#xff0c;是由重复的代码提取出来合并而成。组件的本质&#xff0c;是一件产品&#xff0c;独立性很强&#xff0c;组件的核心&#xff0c;是复用&#xff0c;与其它功能又有强依赖关系。 模块 在中台产品和非中台产品中&…...

编程日记 2023/5/30 12:57:43

自动化工具 pytest 内核测试平台落地初体验

测试平台&#xff0c;有人说它鸡肋&#xff0c;有人说它有用&#xff0c;有人说它轮子&#xff0c;众说纷纭&#xff0c;不如从自身出发&#xff0c;考虑是否要做测试平台&#xff1a; 第 1 阶段&#xff0c;用 Pythonrequests 写接口自动化。 第 2 阶段&#xff0c;选择 unit…...

编程日记 2023/5/30 12:58:55

Python 自动化指南（繁琐工作自动化）第二版：四、列表

原文&#xff1a;https://automatetheboringstuff.com/2e/chapter4/ 在开始认真编写程序之前&#xff0c;您需要理解的另一个主题是列表数据类型及其表亲元组。列表和元组可以包含多个值&#xff0c;这使得编写处理大量数据的程序更加容易。由于列表本身可以包含其他列表&#…...

编程日记 2023/5/30 13:00:30

大数据领域的发展及其对现实世界的价值

大数据已经成为全球各行业领域不可或缺的一部分&#xff0c;并且其应用不断涌现。尽管很多人最初对“大数据”这一术语表示怀疑和不信任&#xff0c;但大数据技术已经确立了稳定的发展方向。根据调研机构的预测&#xff0c;到2027年&#xff0c;全球大数据市场规模将达到1090亿…...

编程日记 2023/5/15 14:37:02

几种常见的架构模式

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址 如果访问不了Github&#xff0c…...

编程日记 2023/5/12 12:32:17

flutter安装各种问题汇总

C:\Users\Administrator>flutter doctor -v Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source! [√] Flutter (Channel stable, 3.7.0, on Microsoft Windows [版本 10.0.19044.1826], locale zh-CN) • Flutte…...

编程日记 2023/5/13 4:41:37

网络传输层

目录传输层再谈端口号端口号范围划分认识知名端口号netstatpidofUDP协议UDP协议端格式UDP的特点面向数据报UDP的缓冲区UDP使用注意事项使用udp协议 的应用层协议其它TCP协议TCP协议段格式如何理解链接如何理解三次握手如何理解四次挥手概念TIME_WAIT/CLOSE_WAITTCP策略确认应答…...

编程日记 2023/5/24 3:44:05

linux内核启动分析（二）

文章目录1. set_task_stack_end_magic2.smp_setup_processor_id3. debug_objects_early_init4. cgroup_init_early4.1 init_cgroup_root4.1.1 init_cgroup_housekeeping4.2 cgroup_init_subsys5. local_irq_disable5.1 raw_irqs_disabled5.2 raw_local_irq_disable5.3 trace_ha…...

编程日记 2023/5/24 3:44:57

『EasyNotice』.NET开源消息通知组件——快速实现邮件/钉钉告警通知

&#x1f4e3;读完这篇文章里你能收获到 傻瓜式扩展方法直接使用如何通过EasyNotice快速实现钉钉/邮件的通知发送感谢点赞收藏&#xff0c;避免下次找不到~ 文章目录一、EasyNotice1. 功能介绍2. 源码地址二、项目接入1. 发送邮件通知Step 1 : 安装包&#xff0c;通过Nuget安装…...

编程日记 2023/5/13 4:43:17

JVM垃圾回收算法

垃圾标记阶段 对象存活判断&#xff1a;在堆里存放着几乎所有的Java对象实例&#xff0c;在GC执行垃圾回收之前&#xff0c;首先需要区分出内存中哪些是存活对象&#xff0c;哪些是已经死亡的对象。只有被标记为己经死亡的对象&#xff0c;GC才会在执行垃圾回收时&#xff0c;…...

编程日记 2023/5/15 22:38:23

怎么看待ChatGPT封号这件事呢？

最近的ChatGPT大量封号&#xff0c;刷爆了全网&#xff0c;我的两个个人账号被封禁了&#xff0c;不知道大家最近有没有遇到相关的报错信息&#xff0c;要么就是检查你当前的浏览器配置&#xff0c;最后来一个access denied&#xff0c;要么直接就给你来一个当前的国家不支持。…...

编程日记 2023/5/4 4:25:19

八、交换技术原理

&#xff08;一&#xff09;交换机 1、交换机介绍 一种用于电&#xff08;光&#xff09;信号转发的网络设备&#xff0c;可以为接入交换机的任意两个网络节点提供独享的电信号通路。 工作于第二层的叫交换机&#xff0c;工作于第三层的叫第三层交换机&#xff0c;最常见的是…...

编程日记 2023/5/24 3:47:28

什么是DHCP？DHCP有什么用？（中科三方）

在IP网络中&#xff0c;每一个连接的设备都需要分配一个唯一的IP地址&#xff0c;才能实现和Internet上其他设备的互联。在一些终端规模较大的网络中&#xff0c;需要为每一个主机手工配置IP地址&#xff0c;以避免IP地址的重复&#xff0c;如果主机发生变更&#xff0c;还要去…...

编程日记 2023/5/30 13:03:09

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/12/9 5:17:54

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/12/8 8:43:55

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/11/30 23:54:19

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/11/18 8:33:43

【Java_EE】Spring MVC

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

编程新知 2025/12/12 6:00:18

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/12/9 16:40:19

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/12/12 22:31:30

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/12/9 2:36:49

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/12/9 1:17:24