springboot入门项目-用户注册4-前端页面

最新推荐文章于 2022-07-20 15:38:19 发布
最新推荐文章于 2022-07-20 15:38:19 发布
阅读量1.1k 收藏
点赞数
分类专栏： springboot入门项目-电脑商城 文章标签： java springboot javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qxyx1213/article/details/124101814
版权

用户注册的前端页面，发送ajax的异步请求完成用户的注册功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/reg.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
	</head>
	<body>
		<script type="text/javascript">
			$("#btn-reg").click(function() {
				$.ajax({
					url: "/users/reg",
					type: "POST",
					data: $("#form-reg").serialize(),
					dataType: "json",
					success: function(json) {
						if (json.state == 200) {
							alert("注册成功！");
							// location.href = "login.html";
						} else {
							alert("注册失败！" + json.message);
						}
					}
				});
			});
		</script>
		
		<!--头部-->
		<header class="header">
			<img src="../images/index/stumalllogo.png" alt="" />
			<span class="pull-right"><small>欢迎访问</small><b>电脑商城</b></span>
		</header>
		<!--主体-->
		<div class="container mycontent text-left">
			<!--透明层 -->
			<div class="regDiv">
				<p>新用户注册</p>
				<!--表单开始-->
				<form id="form-reg" class="form-horizontal" role="form">
					<!--用户名-->
					<div class="form-group">
						<label class="col-md-3 control-label">名字：</label>
						<div class="col-md-8">
							<input name="username" type="text" class="form-control" placeholder="请输入用户名">
						</div>
					</div>
					<!--密码-->
					<div class="form-group">
						<label class="col-md-3 control-label"> 密码：</label>
						<div class="col-md-8">
							<input name="password" type="password" class="form-control" placeholder="请输入密码">
						</div>
					</div>
					<!--确认密码-->
					<div class="form-group">
						<label class="col-md-3 control-label"> 确认密码：</label>
						<div class="col-md-8">
							<input type="password" class="form-control" placeholder="请再次输入密码">
						</div>
					</div>
					<!--提交按钮-->
					<div class="form-group">
						<label class="col-md-3 control-label"></label>
						<div class="col-md-8">
							<input id="btn-reg" class="btn btn-primary" type="button" value="立即注册" />
							<span class="pull-right"><small>已经有账号？</small><a href="login.html">登录</a></span>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>
也无风雨也无qing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
spring boot简单注册登陆页面
01-06
spring boot + mybatis +thymeleaf简单的注册登陆页面,其中设置密码加盐和哈希，用的是h2数据库，html5和js，jquery等，
前端HTMl用户注册及验证示例
04-13
前端HTMl用户注册及验证示，帮助html JavaScript新手学习者了解并学习用户注册及js验证
用户注册：前端页面
weixin_63823679的博客
03-16 318
用户注册：前端页面
前端开发-用户注册页面
03-30 508
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=U.
Springboot + Vue实现完整的登录注册功能
Small_Pang的博客
10-15 2万+
Springboot + Vue实现完整的登录注册功能 简介：本次实现的是一个完整的登录注册功能，其中用到的技术为Springboot+Vue+Mybatis; 在本文不再详细讲Springboot使用Mybatis进行增删改查，只展示本功能需要用到的代码； 有需要的可以查看这篇文章：实现springboot与mybatis的增删改查 前端需要引入的框架： bootstrap是CSS框架； a...
springboot入门项目（springboot源码带sql）
10-06
在项目中，"登录注册网页"通常涉及前端页面的创建，这可能使用了Thymeleaf、JSP或其他模板引擎来实现用户界面。后端部分则处理HTTP请求，进行身份验证和授权，这部分可能使用了Spring Security。Spring Security是...
Springboot-前后端分离-秒杀流程.zip
03-26
4. **用户注册与登录**：Spring Security是Spring Boot中用于安全控制的模块，可以方便地实现用户的注册、登录功能，以及权限验证。 5. **秒杀过程**：秒杀开始时，用户点击秒杀按钮，前端发送请求至后端。后端需要...
毕设新项目-基于SpringBoot+Vue的宠物医院诊所管理系统源码+项目说明.zip
最新发布
07-02
普通用户：轮播图展示、医疗服务、宠物商品交易、养护妙招交流及管理、宠物新闻、留言反馈、关于我们、用户注册登录、我的订单、服务预约管理、反馈问题管理、评论管理、个人中心等； 管理员：账号管理、用户管理、...
springboot实践项目1
08-04
本项目是一个基于Spring Boot的Java Web项目，旨在帮助初学者快速入门Java Web开发。项目涵盖了前端和后端的多种技术，包括jQuery、Vue、Bootstrap、UEditor、HTML、CSS、JavaScript等前端技术，以及Java基础、...
Java毕业设计-基于springboot+vue集团门户网站-付源代码+论文+mysql（大作业）.zip
06-29
在功能方面，该网站实现了用户注册登录、新闻资讯展示、产品展示、在线留言以及后台管理等核心模块。通过Spring Boot的灵活配置与Vue的前端渲染，网站能够提供流畅的用户体验。同时，项目采用MySQL作为数据库，确保...
DIV的透明层实现
TOMOROW的专栏
08-28 1163
一、先看一个最简的实例：                                                     你也可以在这里插入图片                                                                                             你想注册地图名片吗                    
springboot实现简单的注册登录功能
Java721的博客
02-22 2万+
spring官网 通过spring官网初始化SpringBoot项目 使用idea工具打开Springboot项目，项目结构 添加pom依赖 <!--springboot启动类--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId>
SpringBoot学习之实现登录注册功能
li_w_ch的博客
10-06 2万+
1、系统目录结构 2、创建数据库 数据库名称:student，数据表:user，创建命令如下： //创建数据库 create database student; //选择创建好的数据库，建立user表 use student; create table user( id int primary key auto_increment, username varchar(32) unique not null, password varchar(32) not null
前端注册流程
weixin_43791884的博客
07-20 1574
前端注册
完成登录与注册页面的前端
weixin_33749131的博客
11-01 1466
完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括： 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g...
Django电商项目（四）用户注册-前端逻辑的实现
m0_55584761的博客
12-28 1208
上次我们完成了用户注册表单验证，这次我们完成注册页面前端逻辑实现 前端用户登录js let vm = new Vue({ el: '#app', delimiters: ['[[', ']]'], data: { // v-model username: '', password: '', password2: '', mobile: '', allow: '', //
SpringBoot实现简单的登录注册（超级详细）
我的青春一去不复返
05-22 5万+
第一步：建立简单的项目 第二步：建一个简单的数据表 第三步：配置文件如下： pom.xml文件配置： <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://mav
springboot整合前端实现简单的登录注册
qq:458510729的博客
04-13 1309
本demo接续上边项目整合web，实现一个简单的web端注册登录 1、首先给dao层加数据库操作： 登录需要一个select查询，查找用户名密码和用户输入的是否匹配。 注册需要一个insert into插入，把新增的数据插入到数据库表。 在UserMapper.java和UserMapper.xml添加如下 2、然后在UserService.java和UserServiceImpl添加对dao层的调用。 3、最后在control...
SpringBoot实现登录注册功能【Demo】
热门推荐
laoyog
07-07 7万+
文末有下载链接 本文使用springboot+mybatis注解方式，完成简单的注册和登录功能。且前后端分离，向前端返回json字符串。 最终效果如下： 注册： 如果用户名重复：返回json串 {"msg":"用户名已存在","success":false,"detail":null} 如果正常：{"msg":"注册成功","success"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值