中南大学课设

1、中南大学程序设计基础实践报告题目智能充电桩管理平台学生姓名学院信息科学与工程学院专业班级学 号完成时间 TOC o 1-5 h z HYPERLINK l bookmark16 o Current Document 课程设计内容3 HYPERLINK l bookmark21 o Current Document 课程设计目的3 HYPERLINK l bookmark25 o Current Document 背景知识4 HYPERLINK l bookmark28 o Current Document 工具/准备工作4设计步骤、方法等4步骤1：用户界面设计4 HYPERLINK l boo

2、kmark38 o Current Document 5.1.1, 步骤1：UI设计赘述4 HYPERLINK l bookmark45 o Current Document 5.1.2步骤2：专业设计界面流程4 HYPERLINK l bookmark58 o Current Document 5.1.3步骤3：界面设计整体介绍55.1.4步骤4：设计思想总结55.1.5步骤5：界面展示5步骤2：微信小程序55.2.1步骤1：前端开发6 HYPERLINK l bookmark69 o Current Document 5.2.2步骤2：后端开发6步骤3：模拟器搭建7 HYPERLINK l

3、 bookmark72 o Current Document 设计结果及分析7 HYPERLINK l bookmark78 o Current Document 感想4参考文献错误!未定义书签。程序设计基础实践报告课程设计内容系统包括如下几个部分：智能化云平台、用户手机端程序、现场充电桩模拟 器。智能化云平台具备如下功能：1、以地图方式对系统内注册的所有充电桩进 行实时展示，可显示每个充电桩的实时状态；2、对充电桩的运行数据进行记录；3、对运行数据进行可视化展示；4、对充电桩信息和用户信息进行数据维护；5、 与现场充电桩模拟器进行实时数据通信以完成充电任务；6、对充电支付进行管 理。用户手机

4、端程序实现用户注册，钱包管理，扫码充电功能，还可以查找最近 的充电桩。现场充电桩模拟器实现对充电桩各功能的模拟，包括跟云平台的数据通信以 及与手机端程序的接口等。课程设计目的建立一套智能化的共享充电桩管理平台，以实现充电桩的智能化运营。实验目的了解小程序的构架和掌握程序代码的编写了解学习CSS,HTML,PHP,数据库等代码的运行方式掌握后台管理的代码运行和与前端的数据交互掌握用户交互的界面设计，把握微信小程序的整体功能前端与机器之间的数据收发和统计学会简单的微信小程序的开发和运营前台采用微信统一的框架，后台可以任意挑选，PHP，node.js，Java都是主流，MVC也是一种不错的选择。个人

5、选择的net MVC框架，在并发处理，模块化方面都有很 好表现。服务器可以自己搭建，也可以直接用腾讯云3-背景知识随着新能源汽车的普及，充电桩成为一项非常重要的基础设施，本题目的目 的是建立一套智能化的充电桩管理平台，以实现充电桩的智能化运营。工具/准备工作微信小程序开发平台、云服务器购买；设计步骤、方法等步骤1：用户界面设计本系统坚持图形用户界面设计原则，界面直观、对用户透明：用户接触软件 后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处 理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，

6、而不是由开 发者按自己的意愿把操作流程强加给用户。界面设计必须经过确认才能完成。在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使 用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方 面确保一致。步骤1： UI设计赘述UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、 操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味， 还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。UI设计的职能，大体分为3个方面。图形设计.对软件产品的外形进行“视觉设计”。交互设计，设计软件的操作流程、树状结构、

7、操作规范等。用户测试/研究，测验交互设计的合理性，以及图形设计的美观性。好的UI设计基础界面要做到能够吸引人，给人耳目一新的感觉这就要求工作 者不仅要具备广告创意和美工艺术，还要了解心理学，抓住用户的心理。UI设 计里面最重要的就是交互设计，负责人类与机器之间的交流，这一操作要简单， 便捷，直接有效。通过这一操作从而达到用户的使用目的，这也是交互设计的目 的步骤2：专业页面设计流程认识产品所要解决的问题收集能解决这一问题的用户相关的信息提供这一问题的解决方案验证所提出的解决方案4.1 .用户测试AB测试五秒测试远程测试4.5热图测试改善解决方案5.1.3.步骤3：界面设计整体介绍用户界面分为三

8、个板块，分别是扫码充电部分，在地图上查找部分以及用户 个人中心部分。扫码充电核心就是通过扫描二维码，识别出用户将要使用的充电桩，并将充 电桩情况回馈用户，如果可以使用则跳转到支付页面。在地图上查找部分核心就是通过定位用户所在的位置，向用户反馈周边充电 桩所在的位置以及这些充电桩的使用情况。用户个人中心部分就是实现用户登陆、查看钱包、充值等功能。5.2.步骤2：小程序开发部分小程序开发部分是本次设计的核心部分，包括前端搭建和后台控制。5.2.1.步骤2.1：前端搭建在本次前台搭建中，由于微信小程序官方推出的大量专用代码以及相应的使 用说明，所以完成的相对顺利。首先是登陆，我们直接采用了微信账号登

9、陆的方法，微信的官方文档详细的 介绍了登录的流程，从流程中我们可以提炼出关键的流程点：小程序端调用wx.login()接口，获取登录需要用到的code小程序端通过wx.request()，与开发者的服务器进行通信开发者获取到code后，与微信的服务器进行通信，获取openid和session_key利用随机值来作为键、利用openid和session_key作为值，保存用户的登录状 态信息服务器返回随机值到小程序的客户端，以后小程序的请求附带返回的随机值来 确保用户的合法性其次是在小程序中引入地图定位，微信小程序提供了几个方式，引入地图， 如果想解析地址的话，微信小程序没有提供地址解析，所以必

10、须引入地图插件， 看了高德、百度和腾讯的地图，发现腾讯地图对小程序，支持的功能多，最方便。再次是扫码充电，首先是在小程序中插入扫描二维码功能，这一步在微信小 程序的官方文档中有详细教程，然后跳转页面到支付界面。5.2.2.步骤2.2：后端搭建由于充电桩发布在不同的地点，我们对每个充电桩的位置和状态进行了展 示。进入小程序页面后，点击查找附近就会出现的地图并显示当前用户所在的位 置，以及附近充电桩的位置和使用情况。扫码使用：用户可直接在首页点击扫码，然后扫描充电桩上显示的二维码进 行使用，如当前干衣机不是可用状态，则显示干衣机不可使用的信息；若可用， 则直接进入选择时长并支付的界面。充电桩状态显

11、示：充电桩有三种状态：空闲、运行中、故障，分别用绿色、 红色、橙色的图标进行展示。支付：由于微信对支付的限制，作为个人小程序，我们并不能真正的完成支 付功能，只能对支付进行一个简单的模拟。每个用户第一次注册该小程序时，我 们为其在数据库中写入一条数据以保存该用户的信息及钱包余额，当然，这里的 余额只是一个虚拟的数字，通过用户的充值和支付操作进行增减。用户必须在小 程序的钱包中有足够余额时才能使用干衣机，否则系统将显示余额不足。后台管理云平台系统：进入管理系统后，可在相应页面查看充电桩运行相关数据，如状态、运行总 时长、运行的时间段等。还可查看并管理相应状态的订单数据，已完成的订单、进行中的订单

12、、以及 故障订单。同时可实时监测系统的当前收入。由于本次程序设计由团队完成，这部分内容由另一位程序员设计完成。5.3.步骤3：模拟器搭建模拟器的搭建主要就是测试程序的可靠性。我们用模拟器来代表充电桩，每 台模拟器上都有一个二维码，用于用户通过扫二维码进入程序。模拟器充电桩运行与状态，从小程序获取用户信息、时间以及余额，将其写 入数据库6.设计结果及分析弟子山醪aao金色梯田武封北京御同宕1 &33：0 KUi广站*neCiia14612:?IW * 1 2.12图标展示g o o ooon ?n e & ?感想这次程序设计我选择了微信小程序，一方面的原因是微信小程序作为腾讯推 出的一种程序类型

13、，它的开发与设计有一点的定式，开发简单便捷，后期的维护 也方便一点，而且在安卓与i os平台都可以使用；另一方面，我认为智能充电桩 这样的程序更适合用微信小程序来开发与设计。微信小程序作为轻型应用很有可能会是未来移动互联网应用的主要形式，它 的特点是小而快，但我认为它不会替代所有的App，因为微信小程序目的主要还 是解决小应用的问题，重点在于灵活、快捷、用完即走。微信小程序不能完全取 代APP，我认为可能的原因有两个：一是入口不容易找到，浪费用户时间；二是 一部分用户在尝鲜之后就回归到了原生App，因为原生App的体验可能更加丰富。 但是当小程序解决了这些问题，各种APP很有可能会被淘汰。微信小程序未来的 应用空间还是很大的，它的价值也还需要时间的检验。就像是这次我完成的充电桩小程序，属于一个刚需但是低频的程序，人们一 天中总会有使用的时候，但是很明显不会有很多的使用次数，有些用户可能不会 去选择下载APP。像是这种程序，选择微信小程序是一条很好的出路，需要使用 时打开小程序，用完了就可以关掉，不会一直占手机内存，不想用了还可以删掉。 这用完即走的特点正好满足用户使用低频服务类APP时的需求，比如要买车票时 打开小程序，买完票就关闭它，等要用时再打开，避免APP 一直在手机里占内存 却又很少用。另一方面用户在线下消费的需求正是“快捷”、“