前端工程师使用node.js打造日记社区教程之三

最新推荐文章于 2024-09-20 11:30:38 发布
置顶 最新推荐文章于 2024-09-20 11:30:38 发布
阅读量688 收藏
点赞数
分类专栏： Node.js 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kvkens/article/details/50608088
版权

这章我们来构建一下页面，画了个草图，见笑了偷笑


大概是这个样子吧，后面bootstrap的时候还是可以修改的。

打开我们的layout.html如下修改：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
   		<meta name="description" content="喵喵日记,多人分享日记社区,公开的,快乐的">
    	<meta name="author" content="Kvkens(kvkens@qq.com)">
    	<link rel="icon" href="./libs/favicon.ico">
		<title>喵喵日记 - 多人分享日记社区 公开的 快乐的</title>
		<!-- Bootstrap core CSS -->
    	<link href="./libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    	<link href="./libs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
		<style>
			.body-main{
				margin-top:65px;
				/*background: #1B6D85;*/
			}
			.body-news{
				border-bottom: 1px solid #ececec;
			}
		</style>
	</head>
	<body>
		 <nav class="navbar navbar-inverse navbar-fixed-top">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="/">喵喵日记社区</a>
	        </div>
	        <ul class="nav navbar-nav">
              <li><a href="/">首页</a></li>
              <li><a href="/">发现</a></li>
              <li><a href="/">关于本站</a></li>
            </ul>
	        <div id="navbar" class="navbar-collapse collapse">
	          <form class="navbar-form navbar-right">
	            <div class="form-group">
	              	<a href="./Login" class="btn btn-success">登录</a>
	            </div>
	            <div class="form-group">
	              	<a href="./Join" class="btn btn-default">加入</a>
	            </div>
	          </form>
	        </div><!--/.navbar-collapse -->
	      </div>
	    </nav>
	    <div class="container body-main">
	    	<%-body -%>
	    </div>
		
		<footer class="footer">
	      <div class="container">
	        <p class="text-muted">本站基于Node.js v0.12.9 技术构建 主要用于技术讲解</p>
	        <p class="text-muted">Copyright &copy; 2016 喵喵日记 Power by Kvkens</p>
	      </div>
	    </footer>
	<!-- Bootstrap core JavaScript================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./libs/jquery/dist/jquery.min.js"></script>
    <script src="./libs/bootstrap/dist/js/bootstrap.min.js"></script>
	</body>
</html>

添加了一些样式和footer，留出我们的内容区域。布局文件会在我们后面做的过程中也会相应的修改的。

当前的文件夹是这样的：


打开index.html文件，开始我们的首页布局：

<div class="row">
	<div class="col-md-8">
		<div class="row">
			<!--<div class="alert alert-danger" role="alert">喵喵日记当前开发中……</div>-->
			<div class="well alert-info">
				<h4>喵喵日记 - 多人分享日记社区 公开的 快乐的</h4>
				<h5>此时已有0位朋友创建了0本日记, 写下了0件小事，0个秘密，0条心愿</h5>
			</div>
		</div>
		<div class="row body-news">
			<h4>最新日记</h4>
		</div>
		<% for(var i = 0;i < 10;i++){ %>
			<div class="row">
				<div class="alert alert-success" role="alert">
					<div class="row">
						<div class="col-sm-2">
							<a href="#" class="thumbnail">
								<img src="./avatar/null.gif" />
							</a>
						</div>
						<div class="col-sm-10">
							<div class="caption">
								<a href="#" class="alert-link"><h5>美羊羊的日记</h5></a>
								<h5>
							<span class="label label-primary">发表：2016-01-29 13:13:33</span>
							<span class="label label-primary">心情：美丽</span>
							<span class="label label-primary">类别：成长</span>
							<span class="label label-primary">坐标：北京</span>
						</h5>
								<div class="well alert-info">
									<p class="text-success">
										哎~最近皮肤越来越不好了，求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了，求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了，求各位说说好友~推荐一款护肤品~求助

									</p>
								</div>
								<div class="row">
									<div class="col-sm-12 text-right">
										<button type="button" class="btn btn-default btn-xs">0 回复</button>
										<button type="button" class="btn btn-default btn-xs">0 阅读</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<%}%>
				<div class="row">
					<ul class="pagination">
						<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
						<li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="#">6</a></li>
						<li><a href="#">7</a></li>
						<li><a href="#">8</a></li>
						<li><a href="#">9</a></li>
						<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
					</ul>
				</div>
	</div>
	<div class="col-md-4">
		<div class="panel panel-default">
			<div class="panel-heading">开始你的喵喵之旅</div>
			<div class="panel-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="inputAccount" class="col-sm-3 control-label">帐号：</label>
						<div class="col-sm-9">
							<input type="input" maxlength="20" class="form-control" name="account" id="inputAccount" placeholder="输入你的帐号">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-3 control-label">密码：</label>
						<div class="col-sm-9">
							<input type="password" class="form-control" name="password" id="inputPassword" placeholder="输入你的密码">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-9">
							<div class="checkbox">
								<label>
									<input name="memberme" type="checkbox" value="1"> 记住我
								</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-9">
							<button type="submit" class="btn btn-default">登录</button>
							<a href="./Join" class="btn btn-info">加入</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		
	</div>
</div>

大致上按照草图来设计的，需求大致就是这样的首页，没有错误的话运行的时候首页是这样的：


拽到最下面看：



我们的首页原型目前设计成这样，右侧后面是需要补充的，临近年底了，下周要回东北老家，暂且这样先……


==================================================2016.2.1新加====================================================

把右侧的一些栏目模板写好了，看下最终代码吧！

<div class="row">
	<div class="col-md-8">
		<div class="row">
			<!--<div class="alert alert-danger" role="alert">喵喵日记当前开发中……</div>-->
			<div class="well alert-info">
				<h4>喵喵日记 - 多人分享日记社区 公开的 快乐的</h4>
				<h5>此时已有0位朋友创建了0本日记, 写下了0件小事，0个秘密，0条心愿</h5>
			</div>
		</div>
		<div class="row body-news">
			<h4>最新日记</h4>
		</div>
		<% for(var i = 0;i < 10;i++){ %>
			<div class="row">
				<div class="alert alert-success" role="alert">
					<div class="row">
						<div class="col-sm-2">
							<a href="#" class="thumbnail">
								<img src="./avatar/null.gif" />
							</a>
						</div>
						<div class="col-sm-10">
							<div class="caption">
								<a href="#" class="alert-link"><h5>美羊羊的日记</h5></a>
								<h5>
							<span class="label label-primary">发表：2016-01-29 13:13:33</span>
							<span class="label label-primary">心情：美丽</span>
							<span class="label label-primary">类别：成长</span>
							<span class="label label-primary">坐标：北京</span>
						</h5>
								<div class="well alert-info">
									<p class="text-success">
										哎~最近皮肤越来越不好了，求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了，求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了，求各位说说好友~推荐一款护肤品~求助

									</p>
								</div>
								<div class="row">
									<div class="col-sm-12 text-right">
										<button type="button" class="btn btn-default btn-xs">0 回复</button>
										<button type="button" class="btn btn-default btn-xs">0 阅读</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<%}%>
				<div class="row">
					<ul class="pagination">
						<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
						<li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="#">6</a></li>
						<li><a href="#">7</a></li>
						<li><a href="#">8</a></li>
						<li><a href="#">9</a></li>
						<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
					</ul>
				</div>
	</div>
	<div class="col-md-4">
		<div class="panel panel-info">
			<div class="panel-heading"><span class="glyphicon glyphicon glyphicon-heart" aria-hidden="true"></span> 开始你的喵喵之旅</div>
			<div class="panel-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="inputAccount" class="col-sm-3 control-label">帐号：</label>
						<div class="col-sm-9">
							<input type="input" maxlength="20" class="form-control" name="account" id="inputAccount" placeholder="输入你的帐号">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-3 control-label">密码：</label>
						<div class="col-sm-9">
							<input type="password" class="form-control" name="password" id="inputPassword" placeholder="输入你的密码">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-9">
							<div class="checkbox">
								<label>
									<input name="memberme" type="checkbox" value="1"> 记住我
								</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-9">
							<button type="submit" class="btn btn-success">登录</button>
							<a href="./Join" class="btn btn-default">加入</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="panel panel-info">
			<div class="panel-heading"><span class="glyphicon glyphicon glyphicon-volume-up" aria-hidden="true"></span> 公告</div>
			<div class="list-group">
			  <a href="#" class="list-group-item list-group-item-danger">开发进度记录</a>
			  <a href="#" class="list-group-item">举报非法的日记</a>
			  <a href="#" class="list-group-item">关于本站禁止发布广告的说明</a>
			  <a href="#" class="list-group-item">关于本站禁止发布广告的说明</a>
			  <a href="#" class="list-group-item">关于本站禁止发布广告的说明</a>
			</div>
		</div>
		<div class="panel panel-info">
			<div class="panel-heading"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 最新动态</div>
			<div class="panel-body">
				<h6><a href="#">Kvkens</a> 在 <a href="#">你好</a> 的日记本里面写了<a href="#">你好2016</a> 日记</h6>
				<h6><a href="#">Kvkens</a> 创建了一本名叫 <a href="#">你好</a> 的日记本</h6>
			</div>
		</div>
		<div class="panel panel-info">
			<div class="panel-heading"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 活跃用户</div>
			<div class="panel-body">
				<div class="row">
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				</div>
				<div class="row">
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				</div>
				<div class="row">
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				  <div class="col-xs-6 col-md-3">
				    <a href="#" class="thumbnail">
				      <img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
				    </a>
				  </div>
				</div>
				
			</div>
		</div>
	</div>
</div>

效果图如下：




我会用后面几章来设计一下各种页面，快过年回家了，就先这样了。后面会先做注册和登录的。敬请期待，春节快乐！

Kvkens
关注
专栏目录
前端工程师使用node.js打造日记社区教程之一
Kvkens`s 技术博客
01-27 1448
书接上文，我们说到了node.js使用的几个中间件，何为中间件，我个人的理解就是，一些牛X的高手所写的程序，为了完成超强的后端功能用JS所写的一些类库，比如TJ大神写的Express、Jade、Mocha、Component、Connect等Node.js多个重量级项目（关注数均是3000以上），可以说是node.js界的神级别人物，可惜他转向了GO…… 书归正传我们来说下面的内容，讲解一下目前
一个前端工程师眼里的NodeJS
王继超的专栏
09-25 7834
JavaScript单线程的误解 　　在我接触JavaScript（无论浏览器还是NodeJS）的时间里，总是遇到有朋友有多线程的需求。而在NodeJS方面，有朋友甚至直接说到，NodeJS是单线程的，无法很好的利用多核CPU。 　　诚然，在前端的浏览器中，由于前端的JavaScript与UI占据同一线程，执行JavaScript确实为UI响应造成了一定程度上的麻烦。但是，除非用到超大的循环语
前端工程师使用node.js打造日记社区教程之二
Kvkens`s 技术博客
01-28 1285
今天开始我们的第二讲，先从建立“app.js”开始讲起。一个node.js的程序，入口文件就是这个app.js了，一般运行node程序都是“node xxx”开始的，也有一些是配置在package.json里面的，通过“npm start”来跑服务、测试啊什么的，这里我就用最简单的来做。 我们首先来建立“app.js” 文件，先把前端静态文件做一下，看下面的代码：/** * title : 喵
前端工程师使用node.js打造日记社区教程之序章
Kvkens`s 技术博客
01-26 1304
hello 大家好，我是Kvkens，一年多没有碰node.js了，几天前上网的时候看到了一个高手自己用node.js开发的日记记录分享的社区（http://www.tuer.me/）觉得真心挺不错的，比我去年写的音乐网站好的多，内容也丰富，业务也非常有意思，决定捡起nodejs的技能，自己写博客来记录一下开发时候的事情，决心仿照此网站来记录一些开发过程中遇到的事情，也算是教程让大家都看得懂的。
前端工程师使用node.js打造日记社区教程之四
Kvkens`s 技术博客
02-15 683
hello 大家过年好，迎来了2016的工作日，我们继续来完善日记社区吧~ 从本章开始，我将带领大家把我们所有的views视图模板设计完，这样后面我们可以安心的去写node后台了。 目前我能想到的页面，有首页、加入、登录、发现、关于、查看信息、查看日记、写日记……暂且这些，后面发现缺的话在补上。 1、加入 按照业务区分的话，加入和登录都是对用户进行操作的，所以我要建立几个文
【粉丝福利社】 Node.js从入门到精通（软件开发视频大讲堂）（文末送书-完结）
热门推荐
时光隧道
04-18 4万+
Node.js 是一个开源和跨平台的运行时环境，它允许开发者使用 JavaScript 来编写服务器端的脚本。它基于 Google Chrome 的 V8 JavaScript 引擎，能够在没有浏览器的情况下运行 JavaScript 代码。Node.js 的设计目标是提供一种高效且可扩展的网络应用程序解决方案。它使用事件驱动、非阻塞I/O模型，使其轻量且高效，特别适合处理大量并发连接的数据密集型实时应用。异步和事件驱动：所有API都是异步的，即非阻塞的。
都2023年了还不会Node.js爬虫？快学起来！
萌萌哒的瑞萌萌的博客
07-28 2936
爬虫（Web Crawler）是一种自动化程序，可以在互联网上自动抓取网页，并从中提取有用的信息。爬虫可以模拟人类浏览器的行为，自动访问网站、解析网页、提取数据等。通俗来说，爬虫就像是一只蜘蛛，它会沿着网页上的链接不断爬行，把整个网站的内容都爬取下来。这样，我们就可以从大量的网页中获取到我们需要的数据。动态页面：动态页面是指页面内容是通过 JavaScript 或者其他脚本语言动态生成的页面，这种页面往往需要使用浏览器来执行脚本才能获取到完整的页面内容，因此比较难以爬取。
Node.js 中解析 HTML：详细介绍方法和技巧
2301_79125431的博客
11-03 158
双9混子，秋招只拿到这几个，请大佬们帮我康康1.迪子，13*12*1.36，深圳规划院双模中心，仿真岗2.格力，20(一半都是绩效)*12，珠海制冷工程师3.陕。一共是两个面试官，一个技术面试，一个hr。中原银行ai面 前面都是ai面的问题，无技术，包括职业规划之类的，后面选择，一道题给一分钟时间，然后编程题，十分钟之内要写完，第一个没写完，时间不够，第二个通过。9月中旬到现在，算下来面了15家公司，4家进二面，只有一家给了offer，还是一个要实习转正的，转正8~13k，风评也不好，给拒了。
手把手教你使用 Tabris.js 搭建的日记客户端 TuerApp
ZicoChan的博客
10-10 936
本文涉及内容分为四个部分，tabris的介绍和一些使用心得，使用nodejs开发简单的API范例，以及代码迁移到码云后，管理代码和项目的一些体验感受。本文非常适合个人开发者，或者认同js天下无敌的人阅读。
学习两三年前端的心得.docx
04-01
在实际工作中，前端工程师可能还需要了解服务器运维、Linux操作系统、分布式数据库、HTTP与HTTPS协议、TCP/IP网络原理等知识，这些都构成了一个全面的前端开发者应具备的技能。 总的来说，前端开发是一个不断学习和...
Front-End-Journey:前端工程师的方式。 :thinking_face:
05-13
:fire:新加学习日记专栏和面试专栏 目录结构 JavaScript相关 array相关 call-apply-bind使用及源码 深拷贝/浅拷贝 函数柯里化 ES6相关 箭头函数 async函数 class generator函数 iterator接口 proxy 数组扁平化（待...
前端开发实习生（女生）入职第一天：安装环境：Node.js、AngularJS、ionic框架、iMac学习操作、阿里巴巴图标库、每日汇报日报
Zhu4010的博客
04-01 1369
自我坦白： 小白：环境是别人一步一步帮我安装好！ 进入这个公司是托人，内推 这个公司刚成立半年多吧（2019年9月） 我不熟悉AngularJS 公司发的iMac，操作流程不熟悉，怎么回到桌面，怎末关机都不会 1.今日在公司行为简记 工作内容：搭建开发环境并熟悉项目 工作详情：1.下载并安装node.js，并学习。 2.下载并安装vs code开发环境； 3. 学习熟悉angular; 4.学...
前端实习日记(6月前两周)
J_Boogie的博客
06-20 2万+
前端实习日记 2020/6/8 熟悉了公司环境，了解大概流程，进行了简单的自我介绍之后就开始了实习工作，如阅读项目源码，熟悉系统数据流，操作后台管理中的增删改查，为的是了解项目逻辑，了解客户需求在实际开发中的影响；巩固了一下vue和ajax ...
node.js 版本管理
读心悦
09-20 534
在Node.js开发中，版本管理是一个非常重要的环节，特别是当你需要同时维护多个项目，而这些项目又依赖于不同版本的Node.js时。
Node.js 版本管理工具对比总结
知秋
09-18 1007
工具支持平台切换版本配置文件默认版本设置性能nvm.nvmrc性能一般n否无默认版本设置命令切换速度较快nvs默认手动(可配置自动切换).nvmrc性能一般fnm.nvmrc性能优异，极快Volta自动否极快。
node.js 中的进程和线程工作原理
flytam的博客
09-16 1601
文章介绍了 Node.js 的单线程机制、子进程及多线程实现，包括事件循环、子进程创建与通信、多线程共享内存等
OBS-Studio-30.2.3-Windows.zip
最新发布
09-23
OBS-Studio-30.2.3-Windows.zip
ChanjeeDlnaTool-v1.0 推送电脑上的文件到安卓电视大屏，实现音视频播放和apk安装
09-23
详情参考：https://blog.csdn.net/title71/article/details/142462255?spm=1001.2014.3001.5501 文件里面含有视频使用教程 一.windows+Android大屏 使用投送教程： 准备 0.电视机和电脑要在同一网络下面 1.使用u盘安装chanjeeDlnaTool.apk到电视机 2.将Windows软件拷贝到合适目录，将.mp4 /.flac /.jpg ...文件拷贝到软件目录的www/files文件夹下面 投送 1.打开Android电视机大屏的刚安装的软件，找到左上角显示的电视机的ip地址 2.双击打开Windows软件的ChanjeeDlnaTool.exe文件，有弹窗提示防火墙网络，请点击允许 3.在Windows软件的ip地址栏输入Android电视机大屏上面的ip地址，并在Windows软件点击认证 4.认证完成后Windows软件下方蓝字会提示Binging successful 就说明绑定成功，此时就可以在Windows软件选择本地文件向Android大屏投送文件了
前端工程师推荐Node.js给后端：解决服务端阻塞问题
2. **统一的技术栈**：Node.js允许前端工程师使用熟悉的JavaScript语言进行后端开发，降低了团队的学习成本，提高了开发效率。 3. **模块化**：Node.js拥有丰富的npm（Node Package Manager）生态系统，提供了大量的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值