清华大学赵志磊--商品支付模块 前后端分离 前端

最新推荐文章于 2023-10-21 08:30:00 发布
最新推荐文章于 2023-10-21 08:30:00 发布
阅读量365 收藏
点赞数
分类专栏： 商品支付 PHP后端进阶 thinkPHP6 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuqingchaishao/article/details/122957791
版权
这是一个关于网页登录验证及商品列表、详情和下单流程的示例。包含手机号和验证码的验证，前端限制验证码获取频率，登录后跳转到商品列表，商品列表展示和点击进入商品详情，以及商品详情页面的下单功能。涉及到的技术包括jQuery、Ajax、本地存储以及简单的前端验证。
摘要由CSDN通过智能技术生成

登录：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style type="text/css">
			#login{
				width: 320px;
				height: 320px;
				margin-top: 200px;
				margin-left: auto;
				margin-right: auto;
			}
			.error{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="login" class="form-inline">
			<div class="form-group">
				<input type="text"  id="phone" class="form-control" placeholder="手机号"/> <span class="error"></span>
			</div>
			<div class="form-group">
				<input type="text" id="code" class="form-control" placeholder="验证码"> 
				<input type="button" value="获取验证码" id="getCode" class="btn"> <span class="error"></span>
			</div>
			<br>
			<br>
			<button class="login btn btn-info">登录</button>
		</div>
	</body>
</html>
<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script> -->
<script src="./js/jQuery-3.5.1.min.js"></script>
<script src="./js/jquery-cookie1.4.1jquery.cookie.min.js"></script>
<script type="text/javascript">
	// 获取验证码  先做手机号失焦验证
	$('#phone').blur(function(){
		var phone = $(this).val();
		var preg_phone = /^1[35789]\d{9}$/;
		if(phone == ''){
			$(this).next().empty();
			$(this).next().text('手机号非空');
			return false;
		}
		if(!preg_phone.test(phone)){
			$(this).next().empty();
			$(this).next().text('手机号格式不正确');
			return false;
		}
		$(this).next().empty();
	})
	// 获取验证码  验证手机号 并且前端限制60秒内  不能重复点击
	$('#getCode').click(function(){
		var phone = $('#phone').val();
		var preg_phone = /^1[35789]\d{9}$/;
		if(phone == ''){
			$('#phone').next().empty();
			$('#phone').next().text('手机号非空');
			return false;
		}
		if(!preg_phone.test(phone)){
			$('#phone').next().empty();
			$('#phone').next().text('手机号格式不正确');
			return false;
		}
		$('#phone').next().empty();
		// 开始写计时器  前端限制手机号验证码接口调用频次
		var _this = this;
		var number = 5;
		var timer = setInterval(function(){
			if(number>1){
				number--;
				$(_this).val(number+'s后重新获取');
				$(_this).attr('disabled',true);
			}else{
				
				$(_this).val('重新获取');
				$(_this).attr('disabled',false);
				clearInterval(timer);
			}
		},1000)
		$.ajax({
			url:"http://www.month.com/get_code?phone="+phone,
			type:"GET",
			dataType:"JSON",
			success:function(res){
				if(res.code == 200){
					$('.error').eq(1).empty();
					$('.error').eq(1).text(res.msg);
					$('.error').css('color','green');
				}
				if(res.code == 2001){
					$('.error').eq(1).empty();
					$('.error').eq(1).text(res.msg);
				}
			}
		})
		
	})
	// 登录
	$('.login').click(function(){
		// 验证手机号是否合法
		var phone = $('#phone').val();
		var preg_phone = /^1[35789]\d{9}$/;
		if(phone == ''){
			$('#phone').next().empty();
			$('#phone').next().text('手机号非空');
			return false;
		}
		if(!preg_phone.test(phone)){
			$('#phone').next().empty();
			$('#phone').next().text('手机号格式不正确');
			return false;
		}
		$('#phone').next().empty();
		// 验证短信验证码格式是否正确
			var code = $('#code').val();
			if(code == ''){
				$('#code').next().next().empty();
				$('#code').next().next().text('短信验证码非空');
				return false;
			}
			var preg_code = /^\d{4}$/;
			if(!preg_code.test(code)){
				$('#code').next().next().empty();
				$('#code').next().next().text('短信验证码格式不正确');
				return false;
			}
			$('#code').next().next().empty();
			// 开始发送请求  获取token
			$.ajax({
				url:"http://www.month.com/login",
				type:"POST",
				dataType:"JSON",
				data:{
					phone:phone,
					code:code,
				},
				success:function(res){
					console.log(res);
					if(res.code == 200){
						localStorage.setItem('token',res.data.token);
						window.location.href='user_info.html';
					}
					if(res.code == 2001){
						alert(res.msg);
					}
				}
			})
		})
</script>

商品列表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul{
			width: 1200px;
			height: 650px;
			margin-top: 80px;
			background-color: pink;
			border: 5px solid orange;
			margin-left: auto;
			margin-right: auto;
			border-radius: 5px;
		}
		ul li{
			width: 300px;
			height: 230px;
			margin: 50px;
			background-color: yellow;
			float: left;
			list-style: none;
		}
		</style>
	</head>
	<body>
		<input type="text" class="page"> <button type="button" class="getPage">输入页码</button>
		<ul>
			
		</ul>
	</body>
</html>
<script src="js/login.js"></script>
<script src="js/jQuery-3.5.1.min.js"></script>
<script src="js/md5.js"></script>
<script>
	
	// 加载数据
	function getGoods(page){
		var token = getToken();
		localStorage.setItem('page',page);
		var params = new Array();
		params['page'] = page;
		sign = create_sign(params);
		params['sign'] = sign;
		var url = '';
		for(var i in params){
			url += i+'='+params[i]+'&';
		}
		url = url.substr(0,url.length-1);
		$.ajax({
			url:"http://www.month.com/goods_list?"+url,
			type:"GET",
			dataType:"JSON",
			headers:{
				'Authorization':"Bearer"+token
			},
			success:function(res){
				console.log(res);
				if(res.code == 200){
					var str = '';
					var data = res.data.goods;
					for(var i in data){
						str += '<li>'+"<img class='goodsDetail' ids='"+data[i]['id']+"' src='"+data[i]['goods_avatar']+"'width='80px;'>"+
						"<p class='goodsName'>图片:"+data[i]['goods_name']+"</p>"+
						"<p class='goodsPrice'>价格:"+data[i]['goods_price']+"</p>"+
						"<p class='goodsStore'>库存:"+data[i]['goods_store']+"</p>"+
						"<p class='goods_id'>id:"+data[i]['id']+"</p>"+
						"</li>";
					}
					$('ul').append(str);
				}
				if(res.code == 2001){
					alert(res.msg);
				}
			}
			
		})
	}
	// 页面加载
	$(document).ready(function(){
		var page = localStorage.getItem('page');
		if(isNaN(page)){
			page = 1;
		}
		$('.page').val(page);
		getGoods(page);
	})
	// 选择页码
	$('.getPage').click(function(){
		$('ul').empty();
		var page = $('.page').val();
		if(page == '' || isNaN(page)){
			page = 1;
		}
		getGoods(page);
	});
	// 点击进入详情
	 $("body").delegate(".goodsDetail","click",function(){
		var id = $(this).attr('ids');
		window.localStorage.setItem('goods_id',id);
		window.location.href='goods_detail.html';
	}) 
	
	
</script>

商品详情：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.content{
				width: 500px;
				height: 300px;
				margin-top: 200px;
				margin-left: auto;
				margin-right: auto;
				border: 10px solid pink;
				border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			
		</div>
	</body>
</html>
<script src="js/login.js"></script>
<script src="js/jQuery-3.5.1.min.js"></script>
<script src="js/md5.js"></script>
<script>
	$("body").delegate(".getOrder","click",function(){
		var id = $(this).attr('ids');
		if(isNaN(id) || id<=0){
			alert('商品参数id不合法');
			return false;
		}
		var number = $('.number').val();
		if(isNaN(number) || number<=0){
			number = 1;
		}
		var token = localStorage.getItem('token');
		if(token == ''){
			alert('下单前请先登录');
			window.location.href='login.html';
			return false;
		}
		var params = new Array();
		params['id'] = id;
		params['number'] = number;
		var sign = create_sign(params);
		params['sign'] = sign;
		var url = '';
		for(var i in params){
			url += i+'='+params[i]+'&';
		}
		url = url.substr(0,url.length-1);
		$.ajax({
			url:"http://www.month.com/get_order?"+url,
			type:"GET",
			dataType:"JSON",
			headers:{
				'Authorization':"bearer"+token
			},
			success:function(res){
				if(res.code == 200){
					alert(res.msg);
					localStorage.setItem('order_sn',res.data.order_sn);
					localStorage.setItem('total',res.data.total);
					window.location.href='pay.html';
				}
				if(res.code == 2001){
					alert(res.msg);
					window.location.href='login.html';
				}
			}
		})
	}) 
	// 页面加载事件  获取商品详情数据
	$(document).ready(function(){
		var id = window.localStorage.getItem('goods_id');
		if(isNaN(id) || id == ''){
			alert('参数不正确');
			return false;
		}
		var token = getToken();
		var params = new Array();
		params['id'] = id;
		var sign = create_sign(params);
		params['sign'] = sign;
		var url = '';
		for(var i in params){
			url += i+'='+params[i]+'&';
		}
		url = url.substr(0,url.length-1);
		$.ajax({
			url:"http://www.month.com/goods_detail?"+url,
			type:"GET",
			dataType:"JSON",
			headers:{
				'Authorization':'bearer'+token,
			},
			success:function(res){
				if(res.code == 200){
					var str = '';
					var data = res.data.goods;
					str += "<img src='"+data['goods_avatar']+"' width='80px;'>"
					str += "<p>"+data['goods_name']+"</p>"
					str += "<p>"+data['goods_price']+"</p>"
					str += "<p>"+data['goods_store']+"</p>"
					str += "<p>"+data['id']+"</p>"
					str += "<p><input type='text' class='number' value='1'/></p>"
					str += "<button class='getOrder' ids='"+data['id']+"'>立即订购</button>"
					$('.content').append(str);
				}
				if(res.code == 2001){
					alert(res.msg);
				}
			}
		})
	})


</script>

愿每位清华学子，都能在清华大学计算机专业取得好成绩！

柔情柴少
关注
专栏目录
CPM-Bee本地部署的实战方案
herosunly的博客
06-04 8万+
文主要介绍了CPM-Bee本地部署的实战方案，希望对学习大语言模型的同学们有所帮助。 文章目录 1. 安装虚拟环境 2. 下载文件 2.1 下载源代码 2.2 下载模型依赖文件 3. 安装依赖库 4. 运行CPM-Bee
GLM-4本地部署的实战教程
最新发布
herosunly的博客
06-05 11万+
本文主要介绍了GLM-4-9B本地部署的实战教程，希望对学习和使用大模型的同学们有所帮助。 文章目录 1. 前言 2. 配置环境 2.1 安装虚拟环境 2.2 安装依赖库 2.3 下载模型文件 3. 运行glm-4-9b-chat
清华大学--赵志磊 前后端分离，之tp模板渲染，+Ajax分页
wuqingchaishao的博客
03-10 938
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .page-box{ width: 100%; height: 100px; position: absolute; .
基于前端支付功能的 面向对象的设计理解
xugh24的专栏
11-19 878
需求背景 ： 前端支付模块开发需要实现 以下功能： 1、完成多种类型的支付，包括购买商品、开通会员、充值平台币； 2、可以调用多种第三方支付（微信、支付宝）； 3、 支付的时候可以使用礼券、平台，可以叠加支付 4、 基于安全考虑所有的支付数据 重服务端获得 5、前端功能基于Android 实现 我们简单把需求分析一下， 我们需要实习商品购买、开通会员、平台币充值功能； ...
uniapp支付宝支付的前端开发经验分享
CRMEB小程序商城的博客
08-28 2221
在前段时间的开发需求中，有一项uniapp H5和APP端接入支付宝功能的需求，虽然这项功能前端的工作并不多，但还是根据这次的开发经验和踩过的坑做一个分享。 首先在对项目开启支付功能，在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块，并且勾选支付宝支付和下面列出的ios和Android 根据需要在h5跟APP端都做支付宝的唤起支付，唤起orderInfo 的格式在APP和h5上有很大的差异，在这一点上浪费了一些时间,在此贴出支付宝的文档 支付宝开发文档 H5端唤起支付宝。
前端 h5实现自带浏览器支付功能
mslmhl的博客
11-10 1525
前端 h5实现自带浏览器支付功能
vue 移动端H5微信支付和支付宝支付
web小袋鼠
05-23 2万+
业务场景介绍： H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付 官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接） 一、移动端微信支付，vue中如何玩？ 在移动端微信支付分为微信内支付和微信外...
前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）
cnls_lx的博客
11-24 6458
文章目录前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）1. 前端部分1. 1 前端vue平台搭建安装vue：安装Element-UI1. 2 创建前端子项目（vue的helloworld示例项目）用vue创建前端项目：1.3 在项目中使用ElementUI组件库1.4 修改HelloWold项目，编写单页面应用（SPA）安装router组件库：使用ElementUI中的布局设置项目中的路由器路由原理1.5 前端 使用axios 请求后端数据安装 a
GLM-130B本地部署的实战方案
herosunly的博客
07-04 7万+
本文主要介绍GLM-130B本地部署的实战方案，希望对学习大语言模型的同学们有所帮助。需要说明的是GLM-130B是未进行微调的版本，还无法达到ChatGLM-130B的效果。 文章目录 1. 介绍 2. 配置环境 2.1 安装虚拟环境 2.2 安装依赖库 3. 运行GLM-130B模型
天鹰340亿(AquilaChat2-34B-16K)本地部署的解决方案
herosunly的博客
10-21 6万+
本文主要介绍了天鹰340亿(AquilaChat2-34B-16K)本地部署的解决方案，希望对学习大语言模型的同学们有所帮助。 文章目录 1. 介绍 2. 配置环境 2.1 安装虚拟环境 2.2 安装依赖库 3. 下载权重文件 4. 运行代码
WebSocket实现聊天功能
fwdwqdwq的博客
07-31 1629
登录界面模仿QQ登录操作，支持拖动、最小化和关闭登录后的右侧显示在线用户，右下方显示在线用户的登录日志窗口支持拖动、关闭操作在线用户实现及时聊天功能，可以对指定用户发起聊天（实现点对点的消息推送功能）支持消息的本地缓存，聊天内容不会因为页面的刷新、关闭、退出登录等操作而丢失（消息只是做了简单缓存），清理浏览器缓存数据时消息数据便会丢失。点对点消息推送，实现一对一的即时通信功能。...
清华大学--赵志磊，PHP用curl发送请求，基于thinkPHP6
wuqingchaishao的博客
12-18 1853
清华--赵志磊 基于restful风格的thinkPHP6框架前后端分离，调取第三方接口数据
山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（三）
番茄炒蛋不加蛋！的博客
03-27 3087
目录 前言 一、项目目录结构 二、登录注册功能 2.1 前端 2.2 后端 三、跨域问题 前言 经过前端Vue的环境配置及学习，基本页面都已经编写好了，只是缺少美化布局的工作。 后端的环境也已经配置完成，本篇博客主要是记录后端springboot的学习以及部分配置代码的编写。 一、项目目录结构 整个项目分为Vue部分和springboot部分，Vue部分的项目目录结构在之前的博客里已经有过介绍，因此就不再赘述。 以下是springboot的目录结构：
支付前端以及核心代码
Mr.薛的博客
01-11 2865
前端： http-equiv="Content-Type" content="text/html; charset=UTF-8"> name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> 支付首页 rel="stylesheet" h
第三方支付4(前端实现支付)
碧光下纪实^_^
03-26 1万+
                                                       前端实现微信支付首先，我们贴出调用支付接口的H5页面,当然，在这个页面之前，还需要做很多其他的操作，我们一步一步的来。坑爹的官方文档给了两个不同的支付接口，在微信公众平台开发中文档的“微信JS-SDK说明文档”中，给出的支付方式是下面被屏蔽的那一部分，而在商户平台的“H5调起支付API”中...
支付模块分析
zhanjianshinian的专栏
11-27 3470
1，一笔订单支付成功，会在第一时间通知，系统收到通知处理逻辑，必然返回1个SUCCESS，第三方接到SUCCESS就不再通知，否第三方支付平台会认为未收到通知，然后再过10s 20s 180s再 通知你。客户端会上传接收通知的接口，定时调用，客户端也要定时去查询，在错过第一次接收后，通知通知，异步通知，支付状态查询。 2，认证支付：用户在绑卡时，将卡信息提供给电商，这样在支持时，就无需再
小米商场系统的购物网站的具体的功能实现(重点讲下订单的生成)
superliug的博客
10-01 4346
小米商场系统的购物网站的具体的功能实现(重点讲下订单的生成) 一.需求分析 对于一个常用的购物网站，无非就是前台和后台，前台有相对于的注册和登录功能，负责数据的展示还有其购物车的生成，订单的生成，支付的功能，后台具有对数据的分类的功能，用户的信息的管理功能，相关的增删改查，对应一般的增删改查我们就不在一一的去讲解了，现在咱们这篇文章咱们主要讲解前台的功能的实现，就是咱们原来的在网上购物的实现，可能...
电商平台搭建--支付模块开发
Steafan_
02-27 1万+
一、支付模块开发-概述    本项目使用的支付方式是支付宝支付，在后期会集成微信支付。为了方便大家集成支付宝，我把几篇必要的文章放到了一起。沙箱登录：https://openhome.alipay.com/platform/appDaily.htm 沙箱环境使用说明：https://doc.open.alipay.com/doc2/detail.htm?treeId=200&amp;article...
vue轮询接口实现
江城的博客
12-19 3248
mounted() { //轮询接口 // let that = this // const timers = window.setInterval(() => { // setTimeout(res =>{ // that.saveData(‘1’) // },0)//利用定时器清除setInterval的每次叠加 // }, 600000);//10分钟执行一次 /...
清华大学IBM-PC汇编语言课后习题答案解析
"这篇资源是清华大学出版的IBM-PC汇编语言程序设计的课后习题答案，由沈美明和温冬婵编著。教材包括了从基础知识到高级编程技术的全面内容，旨在帮助学生理解和掌握汇编语言程序设计。" 在《IBM-PC汇编语言程序设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柔情柴少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值