共享充电宝APP前端设计和实现

shejizuopin

已于 2024-04-10 21:47:39 修改

阅读量913

点赞数 2

文章标签：共享充电宝 APP 安卓充电宝前端设计毕业论文论文毕设论文

于 2022-09-03 11:03:38 首次发布

本文链接：https://blog.csdn.net/sheziqiong/article/details/126675037

版权

目录
摘要 1
Abstract 2
1 概述 3
1.1 研究背景、目的与意义 3
1.2 共享经济体及共享电源的现状 4
1.3 研究/设计的主要内容 4
2 前端开发相关技术简介 5
2.1 HTML 5
2.2 CSS 5
2.3 JavaScript 5
2.4 Jquery框架 5
3 系统分析 7
3.1 前端开发目标 7
3.2 功能需求分析 7
3.3 可行性分析 8
3.4 性能需求分析 9
3.5 运行环境及开发环境 9
4 系统设计 11
4.1 前端结构设计 11
5 系统实现 12
5.1用户登录功能实现 12
5.2 用户注册功能实现 13
5.3 掌电APP首页功能实现 15
5.4 掌电APP扫码租借功能实现 18
5.5 掌电APP归还功能实现 19
5.6 掌电APP搜索功能实现 20
5.7 掌电APP我的页面功能实现 23
5.8 掌电APP充值储蓄功能实现 26
5.9 掌电APP修改信息功能实现 28
5.10 掌电APP咨询阅读功能实现 29
5.11 掌电APP故障报修功能实现 32
结论 34
参考文献 35
致谢 36
3 系统分析
3.1 前端开发目标
随这科技的发展，手机在人们的生活中显得越来越重要，再加上共享浪潮的趋势，共享移动电源也应运而生。掌电APP的前端开发是为了使用户更加方便快捷的查询并租借或归还共享移动电源。
本前端开发主要考虑如下问题：
（1）在掌电APP的首页，实现用户实时地点位置查询周围可供租借的共享移动电源的数量及与用户的距离功能；用户一键扫码租借功能；用户一键归还付款功能；其他子页面的跳转功能。
（2）用户可以搜索指定地点周围的共享移动电源，在掌电APP页面中显示这些共享移动电源与用户指定地点的距离、数量。
（3）用户可以通过个人页面来多掌电APP的充值储蓄以及浏览掌电APP的资讯推送，还可以修改用户的个人信息。本文转载自http://www.biyezuopin.vip/onews.asp?id=15642
3.2 功能需求分析
根据掌电APP的功能需求，我设计并实现了APP的注册及登录功能、搜索查询功能、定位查询功能、扫码租借功能、一键归还功能、充值储蓄功能、修改用户信息功能、掌电APP资讯推送功能、掌电APP的故障报修功能等。

掌电APP登录页面实现代码：
<body>
	<div class="logo">
	<img src="img/chongdian.png" style="width: 100px; height: 100px;" alt="" />
	</div>
	<div id="form">
		<div>
		<img class="icon_mine" src="img/WODE.png"/>
		<input type="text" name="zhanghao" id="zhanghao" value="账号:" />
	</div>
	<div>
		<img class="icon_mine" src="img/MIMA.png"/>
		<input type="text" name="zhanghao" id="zhanghao" value="密码:" />
	</div>
	</div>

	<div id="denglu" class="bottom_login">
		<h2>登陆</h2>
	</div>
	<div id="zhuce" class="link_zhuce">
		<h4>注册</h4>
	</div>
			<script type="text/javascript">
			var login=document.getElementById('denglu');
			login.addEventListener('tap',function(){
				mui.openWindow({
					url:"index.html",
					id:"index.html"
				});
			})
			var reg=document.getElementById('zhuce');
			reg.addEventListener('tap',function(){
				mui.openWindow({
					url:"reg.html",
					id:"reg.html"
				});
			})
		</script>
</body>

在这里插入图片描述