书城项目_第一阶段_页面准备及表单验证

最新推荐文章于 2022-05-30 19:18:05 发布
最新推荐文章于 2022-05-30 19:18:05 发布
阅读量314 收藏 2
点赞数
分类专栏： 项目练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zeroheitao/article/details/110009064
版权

一、用户模块

登录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员登录页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
</head>
<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
		</div>
		
			<div class="login_banner">
			
				<div id="l_content">
					<span class="login_word">欢迎登录</span>
				</div>
				
				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>尚硅谷会员</h1>
								<a href="regist.html">立即注册</a>
							</div>
							<div class="msg_cont">
								<b></b>
								<span class="errorMsg">请输入用户名和密码</span>
							</div>
							<div class="form">
								<form action="login_success.html">
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" />
									<br />
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" />
									<br />
									<br />
									<input type="submit" value="登录" id="sub_btn" />
								</form>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
</body>
</html>
登录成功
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
	
	h1 a {
		color:red;
	}
</style>
</head>
<body>
		<div id="header">
				<img class="logo_img" alt="" src="../../static/img/logo.gif" >
				<div>
					<span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
					<a href="../order/order.html">我的订单</a>
					<a href="../../index.html">注销</a>&nbsp;&nbsp;
					<a href="../../index.html">返回</a>
				</div>
		</div>
		
		<div id="main">
		
			<h1>欢迎回来 <a href="../../index.html">转到主页</a></h1>
	
		</div>
		
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
</body>
</html>
注册及验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
	<script src="../../static/script/jquery-1.7.2.js"></script>
	<script>
		$(function () {
			$("#sub_btn").click(function () {
				var usernameText=$("#username").val();
				var passwordText=$("#password").val();
				var repwdText=$("#repwd").val();
				var emailText=$("#email").val();
				var codeText=$("#code").val();
				var usernamePatt=/^[a-z0-9_-]{3,16}$/;
				var passwordPatt=/^[a-z0-9_-]{6,18}$/;
				var emailPatt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
				if(!usernamePatt.test(usernameText)){
					$("span.errorMsg").text("用户名不合法！");
					return false;
				}
				if(!passwordPatt.test(passwordText)){
					$("span.errorMsg").text("密码不符合要求！");
					return false;
				}
				if(repwdText!=passwordText){
					$("span.errorMsg").text("确认密码与输入密码不一致！");
					return false;
				}
				if(!emailPatt.test(emailText)){
					$("span.errorMsg").text("邮箱不合法！");
					return false;
				}
				if(codeText==""){
					$("span.errorMsg").text("验证码不能为空！");
					return false;
				}
				$("span.errorMsg").text("");
			})
		})
	</script>
<style type="text/css">
	.login_form{
		height:420px;
		margin-top: 25px;
	}
	
</style>
</head>
<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
		</div>
		
			<div class="login_banner">
			
				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>
				
				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>注册尚硅谷会员</h1>
								<span class="errorMsg"></span>
							</div>
							<div class="form">
								<form action="regist_success.html">
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名"
										   autocomplete="off" tabindex="1" name="username" id="username" />
									<br />
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码"
										   autocomplete="off" tabindex="1" name="password" id="password" />
									<br />
									<br />
									<label>确认密码：</label>
									<input class="itxt" type="password" placeholder="确认密码"
										   autocomplete="off" tabindex="1" name="repwd" id="repwd" />
									<br />
									<br />
									<label>电子邮件：</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址"
										   autocomplete="off" tabindex="1" name="email" id="email" />
									<br />
									<br />
									<label>验证码：</label>
									<input class="itxt" type="text" style="width: 150px;" id="code"/>
									<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">									
									<br />
									<br />
									<input type="submit" value="注册" id="sub_btn" />
									
								</form>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
</body>
</html>
注册成功
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
	
	h1 a {
		color:red;
	}
</style>
</head>
<body>
		<div id="header">
				<img class="logo_img" alt="" src="../../static/img/logo.gif" >
				<span class="wel_word"></span>
				<div>
					<span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
					<a href="../order/order.html">我的订单</a>
					<a href="../../index.html">注销</a>&nbsp;&nbsp;
					<a href="../../index.html">返回</a>
				</div>
		</div>
		
		<div id="main">
		
			<h1>注册成功! <a href="../../index.html">转到主页</a></h1>
	
		</div>
		
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
</body>
</html>

二、图书模块

图书管理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">图书管理系统</span>
			<div>
				<a href="book_manager.html">图书管理</a>
				<a href="order_manager.html">订单管理</a>
				<a href="../../index.html">返回商城</a>
			</div>
	</div>
	
	<div id="main">
		<table>
			<tr>
				<td>名称</td>
				<td>价格</td>
				<td>作者</td>
				<td>销量</td>
				<td>库存</td>
				<td colspan="2">操作</td>
			</tr>		
			<tr>
				<td>时间简史</td>
				<td>20.00</td>
				<td>霍金</td>
				<td>200</td>
				<td>400</td>
				<td><a href="book_edit.html">修改</a></td>
				<td><a href="#">删除</a></td>
			</tr>	
			
			<tr>
				<td>时间简史</td>
				<td>20.00</td>
				<td>霍金</td>
				<td>200</td>
				<td>400</td>
				<td><a href="book_edit.html">修改</a></td>
				<td><a href="#">删除</a></td>
			</tr>	
			
			<tr>
				<td>时间简史</td>
				<td>20.00</td>
				<td>霍金</td>
				<td>200</td>
				<td>400</td>
				<td><a href="book_edit.html">修改</a></td>
				<td><a href="#">删除</a></td>
			</tr>	
			
			<tr>
				<td>时间简史</td>
				<td>20.00</td>
				<td>霍金</td>
				<td>200</td>
				<td>400</td>
				<td><a href="book_edit.html">修改</a></td>
				<td><a href="#">删除</a></td>
			</tr>	
			
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td><a href="book_edit.html">添加图书</a></td>
			</tr>	
		</table>
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>
后台管理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
</style>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">后台管理系统</span>
			<div>
				<a href="book_manager.html">图书管理</a>
				<a href="order_manager.html">订单管理</a>
				<a href="../../index.html">返回商城</a>
			</div>
	</div>
	
	<div id="main">
		<h1>欢迎管理员进入后台管理系统</h1>
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>
订单管理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
</style>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">后台管理系统</span>
			<div>
				<a href="book_manager.html">图书管理</a>
				<a href="order_manager.html">订单管理</a>
				<a href="../../index.html">返回商城</a>
			</div>
	</div>
	
	<div id="main">
		<h1>欢迎管理员进入后台管理系统</h1>
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>
编辑图书
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑图书</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
	
	h1 a {
		color:red;
	}
	
	input {
		text-align: center;
	}
</style>
</head>
<body>
		<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">编辑图书</span>
			<div>
				<a href="book_manager.html">图书管理</a>
				<a href="order_manager.html">订单管理</a>
				<a href="../../index.html">返回商城</a>
			</div>
		</div>
		
		<div id="main">
			<form action="book_manager.html">
				<table>
					<tr>
						<td>名称</td>
						<td>价格</td>
						<td>作者</td>
						<td>销量</td>
						<td>库存</td>
						<td colspan="2">操作</td>
					</tr>		
					<tr>
						<td><input name="book_name" type="text" value="时间简史"/></td>
						<td><input name="book_price" type="text" value="30.00"/></td>
						<td><input name="book_author" type="text" value="霍金"/></td>
						<td><input name="book_sales" type="text" value="200"/></td>
						<td><input name="book_stock" type="text" value="300"/></td>
						<td><input type="submit" value="提交"/></td>
					</tr>	
				</table>
			</form>
			
	
		</div>
		
		<div id="bottom">
			<span>
				尚硅谷书城.Copyright &copy;2015
			</span>
		</div>
</body>
</html>

三、购物车模块

购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<base href="http://localhost:8080/BookStore02/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="static/img/logo.gif" >
			<span class="wel_word">购物车</span>
			<div>
				<span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
				<a href="pages/order/order.html">我的订单</a>
				<a href="index.html">注销</a>&nbsp;&nbsp;
				<a href="index.html">返回</a>
			</div>
	</div>
	
	<div id="main">
	
		<table>
			<tr>
				<td>商品名称</td>
				<td>数量</td>
				<td>单价</td>
				<td>金额</td>
				<td>操作</td>
			</tr>		
			<tr>
				<td>时间简史</td>
				<td>2</td>
				<td>30.00</td>
				<td>60.00</td>
				<td><a href="#">删除</a></td>
			</tr>	
			
			<tr>
				<td>母猪的产后护理</td>
				<td>1</td>
				<td>10.00</td>
				<td>10.00</td>
				<td><a href="#">删除</a></td>
			</tr>	
			
			<tr>
				<td>百年孤独</td>
				<td>1</td>
				<td>20.00</td>
				<td>20.00</td>
				<td><a href="#">删除</a></td>
			</tr>		
			
		</table>
		
		<div class="cart_info">
			<span class="cart_span">购物车中共有<span class="b_count">4</span>件商品</span>
			<span class="cart_span">总金额<span class="b_price">90.00</span>元</span>
			<span class="cart_span"><a href="#">清空购物车</a></span>
			<span class="cart_span"><a href="pages/cart/checkout.html">去结账</a></span>
		</div>
	
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>
结算页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结算页面</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
</style>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">结算</span>
			<div>
				<span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
				<a href="../order/order.html">我的订单</a>
				<a href="../../index.html">注销</a>&nbsp;&nbsp;
				<a href="../../index.html">返回</a>
			</div>
	</div>
	
	<div id="main">
		
		<h1>你的订单已结算，订单号为2937474382928484747</h1>
		
	
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>

四、订单模块

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的订单</title>
<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
<style type="text/css">
	h1 {
		text-align: center;
		margin-top: 200px;
	}
</style>
</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
			<span class="wel_word">我的订单</span>
			<div>
				<span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
				<a href="../order/order.html">我的订单</a>
				<a href="../../index.html">注销</a>&nbsp;&nbsp;
				<a href="../../index.html">返回</a>
			</div>
	</div>
	
	<div id="main">
		
		<table>
			<tr>
				<td>日期</td>
				<td>金额</td>
				<td>状态</td>
				<td>详情</td>
			</tr>		
			<tr>
				<td>2015.04.23</td>
				<td>90.00</td>
				<td>未发货</td>
				<td><a href="#">查看详情</a></td>
			</tr>	
			
			<tr>
				<td>2015.04.20</td>
				<td>20.00</td>
				<td>已发货</td>
				<td><a href="#">查看详情</a></td>
			</tr>	
			
			<tr>
				<td>2014.01.23</td>
				<td>190.00</td>
				<td>已完成</td>
				<td><a href="#">查看详情</a></td>
			</tr>		
		</table>
		
	
	</div>
	
	<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
	</div>
</body>
</html>
玳宸
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
尚硅谷javaWeb书城项目第一阶段 用js实现
qq_45706504的博客
05-09 337
尚硅谷javaweb书城项目第一阶段 没有使用jQuery 视频中用的是jQuery，我没有学这个，就根据给的代码改成了js，正好可以练习一下js。目前还没有写验证码功能。试了一下，可以运行成功。 这里主要的改动就是将错误提示信息加了个id属性。用getElementById来操作错误提示信息。通过var spanObj = document.getElementById(“span”)这个语句;创建一个span标签的对象，根据 spanObj.innerHTML = “用户名不合法!” ,对span标签里
书城项目第一阶段
m0_48773766的博客
06-25 232
书城项目第一阶段 登录（用户名、密码非空验证） JS代码 <script type="text/javascript" src="../../static/script/vue_v2.6.14.js"></script> <script type="text/javascript"> new Vue({ el:"#app", data:{ "username":"", "psd":"", "
2021-01-28
weixin_45808014的博客
01-28 104
一、准备工作 新建模块，并拷贝所需资料 新建目录script 二、代码编写 <script type="text/javascript"> // 页面加载完成之后 $(function () { // 给注册绑定单击事件 $("#sub_btn").click(function () { // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位 //1 获取用户名输入框里的内容 var usernameText = $("#use
JavaWeb 书城项目第一阶段--表单验证
weixin_42118981的博客
08-23 153
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>尚硅谷会员注册页面</title> <link type="text/css" rel="stylesheet" href="../../static/css/style.css" > <script type="text/javascript" src="../../static/script/j
Day116.简单书城项目---第一阶段 -JavaWeb
阿昌爱Java
11-28 400
书城项目—第一阶段(表单验证) 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位 验证确认密码：和密码相同 邮箱验证：xxxxx@xxx.com 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。 1.创建一个模块 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>尚
03_尚硅谷_书城项目-第三阶段代码优化_王振国 - 课堂笔记1
08-03
总结，这个阶段主要涉及到JSP页面的创建和优化，包括页面转换、代码复用、错误处理和表单回显等关键点，这些都是构建动态Web应用的基础步骤。通过这样的优化，可以提高代码的可维护性和项目的整体质量。
尚硅谷书城项目说明1
08-08
在尚硅谷网上书城项目的第一阶段，前端验证主要运用了jQuery技术。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在登录功能中，jQuery被用来进行非空验证，确保...
2021031701_基于JSP技术的有声书城应用设计与实现.rar
02-09
此外，可能还会使用JavaScript和jQuery进行前端交互效果的实现，如表单验证、页面动态加载等。数据库方面，可能选用MySQL或Oracle，通过JDBC进行连接，执行SQL语句进行数据操作。 有声书的播放功能通常需要借助音频...
ACCPS2JSP13章电子书城项目
09-03
《ACCPS2JSP13章电子书城项目》是一个基于Java Web技术的实战项目，主要涉及用户管理、图书展示和购物流程等核心功能。在这个项目中，开发者将运用到JSP（JavaServer Pages）、Servlet、数据库操作以及前端交互等...
基于Django书城电商项目.zip
最新发布
09-29
【基于Django书城电商项目】是一个全面的Web应用程序，旨在提供一个在线图书销售平台，利用Python的Django框架构建。Django是一个高效且强大的开源Web开发框架，它遵循MVT（模型-视图-模板）设计模式，使得开发者...
尚硅谷 佟刚 网上书城
03-31
尚硅谷 佟刚 网上书城 该资源是对java学习 web阶段的一个巩固 非框架版本 学习框架前的练手小项目
第一阶段 表单验证
CoderJay
12-20 530
第一阶段 表单验证 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位 验证确认密码：和密码相同 邮箱验证：xxxxx@xxx.com 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。 1、新建一个模块 2、把下载的书城的静态资源拷贝到05_book_static 工程下 3、验证实现 <!DOCTYPE html> <html> <head> &lt
（尚硅谷）JavaWeb新版教程10-书城项目的实现（第一部分）
qq_42148002的博客
05-30 3125
目录1、熟悉书城业务需求2、数据库设计2.1 抽取实体2.2 分析其中的属性2.3 分析实体之间的关系3、根据数据库的表新建 pojo 类（ORM编程思想）3.1 数据库表3.2 创建 pojo 类3.2.1 Book 类3.2.2 CartItem 项3.2.3 OrderBean 类3.2.4 OrderItem 类3.2.5 User 类4、前期配置5、登录验证5.1 修改 login.html 界面5.2 新建 UserController 控制器5.3 新建 UserService 层5.4 新建
JavaWeb尚硅谷书城项目
CrazyAugust的博客
01-13 2219
JavaWeb尚硅谷书城项目 创建一个java项目,配置好Tomcat服务器(见博客JavaWeb 之 IDEA21.2版本中部署 Tomcat ) 创建JavaEE三层架构对应的包 一般需要创建的包： web层： com.august.web/servlet/controller service层： com.august.service（Service接口包） com.august.service.impl（Service接口实现类） dao持久层： com.august.dao（Dao接口包
尚硅谷·网上书城项目（一）
正趣果上果
04-07 6136
网上书城·尚硅谷 一、项目概述          尚硅谷讲师佟刚的Servlet\Jsp实战项目。 二、功能分析         项目拥有上图所示功能：                 1、界面的显示（JSP+EL+JSTL）                 2、价格区间查询以及分页（原生态Ajax、MySql limit分页）                 3、结账
书城项目全部代码
小心星的博客
09-13 3619
书城项目全部代码
书城项目第三阶段及其源码
小心星的博客
08-22 1081
书城项目第三阶段 及其源码
王振国：03_书城项目-第三阶段代码优化：动态页面与功能实现
在03_尚硅谷_书城项目-第三阶段代码优化的课程中，讲师王振国针对书城项目的前端页面进行了深入的代码优化。这个阶段主要集中在以下几个关键点： 1. 页面动态化处理： - 将HTML页面转变为JSP（JavaServer Pages）...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

玳宸

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

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

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

打赏作者

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

抵扣说明：

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

余额充值