【基于微信小程序的数据采集可视化平台设计14000字】

1基于微信小程序的数据采集可视化平台设计目录第1章绪论 2 2 第2章数据采集端的基本结构和组件 4 42.1.1SpringBoot框架介绍 4 5 2.2.2微信小程序架构介绍 3.1.2数据可视化部分后台架构 3.2.1Vue框架介绍 3.2.2基于Vue的可视化界面架构介绍 28 第5章总结与展望 2随着计算机算力的大幅度提升，人工智能行业正在逐步的走进人们的视线，深度学习，机器学习各种算法概念层出不穷。但是，正如一切事物的发展过程一样，由数据支撑的人工智能行业逐渐显示出了他的瓶颈一一数据不足，数据预处理复杂，大量数据获取对个人与中小企业开发者十分具有难度，由于这种局限，由数据支撑的人工智能行业更多的由大型企业和实验室把控，因此需要一个由更多人参与的数据采集平台来方便更多的小微企业与开发者们。数据采集平台是一种统一的的数据采集和处理分发的集成服务提供者，它通过其本身提供数据采集服务和数据处理服务，同时整合互联网环境下的参与用户，向客户提供一套完整的数据采集以及处理的方案。平台数据可视化同时为数据采集平台提供了更多元化的用户群体，通过将运营的数据可视化可以更加方便对平台的采集群体倾向进行分析，是的任务发布方的运营者可以更好地针对相应的用户群体发布更加合适的任务，同时可以使得运营数据更加的具象，方便提取数据重点。论文引入数据采集平台相关构建方法和使用组件，利用Java语言的SpringBoot框架作为后台服务的主要模块框架，同时使用Mysql和Redis作为存储和缓存数据库，加强后台服务模块的健壮性。使用微信小程序作为数据采集的前台模块，是的用户更好上手使用，提高前台模块的易用性。引入可视化平台的相关构建方法和使用组件，利用Python语言的Django框架作为后台服务的主要模块框架，同时使用Mysql作为存储数据库，使用Python的第三方库可以极大提高处理数据的能力。使用Vue框架作为可视化平台的前端展示框架，JavaScript的第三方库对数据可视化做了很好的支持。针对后台服务中可能出现的并发问题，本文结合Java中的线程池和锁以及Redis数据库的缓存机制进行优化，在并发数量支持得到了极大提升。关键词：数据采集可视化平台；微信小程序；Springboot;Mysql;Redis;Dajngo;Vue所谓的数据就是常说的数值，也就是某种可以通过我们实验，观察或计算得出的结果。数据有很多种类，数字是其中最简单的。文字、图像、声音等也都是数据的一种。科学研究、设计、查证、数学等都有数据的身影。技术及应用系统以用于模拟、延伸和扩展人的智能，是一门新的技术科学。它了解智能的实质，企图生产出一种以人类智能相似的方式做出反应的新的能智能机器，包括机器人、语言识别、图像识别、自然语言处理和专家系统等都属于该领域的研究。理论和技Redis缓存首页的任务数据审核改变态，回复用户审核任务发布频，文字的采集任务。任务管理用户可以查看任务的进行状的数据。图2-2数据采集端后台架构主要如上图2-2所示，从微信小程序端发送过来的Http请求被Controller层(MVC中的C)中去查询业务逻辑，首先匹配到Redis中读取缓存，若是找不到相关的缓存，则通过Mybatis去Mysql中查询数据，写入Redis,之后再返回给微信小程序段，完成一次Http请求。下面会详细说明每一步所用到的结构设计或组件的功能路径去SpringBoot容器中寻找所有已经注册在容器中的ControllerBean,根据路由信息匹配到相应的Bean,并将解析好的http上下文根据Bean的属性配置解析为相应的参数以供Controller使用。@Controller绑定到Spring的容器中，由Spring的容器通过DispathcherServlet对这些bean进行绑定的分发吗，并且传入上下文。通过这样的方式，用户就可以通过如果一个架构符合REST原则，就称它为RESTful架构。即：6(1)每一个URI代表一种资源；(2)客户端和服务器之间，传递这种资源的某种表现层；(3)客户端通过四个HTTP动词，对服务器端资源进行操作，实现"表现层状态转通过RestFul的设计模式，我们可以使得Url表达出更多含义更容易让人理解并进行使用和解析。例如如下所示代码根据用户名获取微信的Openid,仅通过Url就可以明@GetMapping("/users/{username@PathVariable("username")S}与上文Restful相关，通过用户的请求我们可以判断出用户的行为，而对于Get请求 (即获取信息)来说，用户行为是幂等的，即在底层数据没有被改写的情况下，不论多少次的数据查询查询到的数据应当是完全一致的1PageHelper.startPage(pageNumb,page("从缓存获取的数据"+list);//从数据库中获取信息15.("从数据库中获取数据");19.("数据插入缓存"+str);通过代码我们不难看出主要逻辑分为三个部分，查找是否存在key->存在取出返回，不存在去数据库查找再存入，这样就避免了每次查找都要去mysql中读取数据，使得数据使用Redis同样也会存在一些问题，在本项目中主要遇到的问题有两个。1、缓存和主存信息不同步。在最开始开发时，我只是单纯数据时刷新，但是这时会遇到一个一个问题就是用户更新数据后，redis中的key还存在，所以直接数据并未被更新。这时就会导致主存不同步的问题，在写入时我们可以使用spring框架中的AOP开始事务功能保证每一次写入redis和mysql的原子性，在出现问题时，同时回退，保证两者之间的数据统一。2、在极端情况下主要保证主存的可用性，所以每一次写入redis时，我们要删键，这样就可以保证即使再删除时出现问题，下一次查询也会直接去mysql中查询最新用户对于打开时间比较敏感，过长的时间会导致用淘汰机制，我这边使用的是给key添加过期时间，在时间过期后自动删除相应的key和value,同时也开启了redis的策略，每过一段时间淘汰最久没有被访问到的key。双管齐MyBatis和Mysql:在这一部分我将mybatis和mysql放到一起进行说明。Mysql:mysql是当前市面上最流行的关系型数据库之一，是Oracle旗下的一款产品，最为主要的是mysql提供了社区的开源版本，是的中小型开发者可以免费使用，所以本项目也使用了mysql作为主要数据库。关系型数据库主要通过一张张表结构来存储大量的数据，并对其进行分类。而在本项目中主要用到mysql的两个特性为事务和索引，将在下面详8MyBatis,是github上的一款开源的由java编写的持久层框架，主要负责将java代码映射为jdbc同时转换为相应的sql语句进行查询，并将查询后的结果再次转换为java对象供代码使用。Mybatis使用xml进行配置，使得其与java的业务逻辑代码解耦，同时防止了sql诸如等sql安全问题。图2-3上图2-3主要展示了上图2-3主要展示了mybatis的工作原理，通过图片我们可以清晰的看出，mybatis主要通过项目中配置的mybatis-config.xml来生成设计模式中工厂模式的SqlSessionFactory,生成出这个大工厂后，就监听每一次的代码中的sql调用，生成出sqlsession,同时去查找当前查找所映射的mapper.xml来生成相应的sql语句，从而进行<!--任务类型排查找--><selectid="job_img_find"resultType介绍了mybatis的使用后，我们来看mysql。jobjobjob_typevarchar(255)job_contentvarchar(255)job_publisher_openidvarchar(255)job_startvarchar(255)job_audit_typevarchar(255)job_rulesjob_post如上图2-4所示，项目的主要表结构，主要分为任务，任务用户关系表，任务提交关系表，任务规则关系表，用户表。其中因为任务和用户了任务提交表，任务用户表，任务接取表做了中间表存储双方的主键和中间状态关Mysql在本项目中除了使用关系型结构做表关系映射外主要有两个方面的一个是mysql的索引。Mysql的底层主要是使用B+树来做存储，B+树的主要结构如下图图2-5555589QQQQQQQQQB+树作为mysql的底层的数据结构的特点主要有：这样的一些特点和可以保证B+树的磁盘读写代价低，查询效率更加稳数据库的扫描。同样，因为有了B+树作为索引，mysql的Innodb引擎则针对B+树的特色对索引进行了升级。Innodb是用了以主键索引为主的聚集索引，主要如下图2-5所示。使用了聚集索引的mysql将当前字段的所有数据保存在以主键为主的树的叶子节点上，与传统的非聚集索引相比，通过主键检索的速度将会更加的快速，同时可以利用其B+树的底层为链主键索引辅助键索引757577575MicrosoftMicrosoftMicrosoft第二个主要用到的特性为mysql的事务隔离机制，mysql的事务隔离机制主要由于事图2-7隔离级别√√√×√√××√×××而这四种个隔离级别主要由以下几种并发问题导致和解决：1、更新丢失：□脏读：一个事务读取其他事务未提交的数据2、不可重复读：事务A多次读取某数据，事务B对数据修改，导致事务A多次致·InnoDB采用MVCC解决每条数据后面加了隐藏的两列(创建版本号和删除版本号),每个事务在开始的时候都会有一个递增的版本号·2、查询时当前事务的版本号需要小于删除的版本号3、幻读：事务(T1)读取了几行数据，接着在随后的查询中，第一个事务(T1)就会发现多了一些原本不存在的记录，就好像发生了o若走主键外的索引，对当前索引以及主键索引上对应的记录都上锁o根据检索条件向左寻找最靠近检索条件的记录值A,作为左区间，向右寻找防止间隙内有新数据被插入。(2)防止已存在的数据，更新成间隙内的数通过mysql的innodb的隔离级别，我们可以很轻松的解决由于数据并发问题所导致的数微信小程序是微信开发的一个用于在微信中嵌入web应用供用户使用的一款开发这框架，微信小程序的开发流程和前端的开发流程十分相似，并且使去用户登录，鉴权，等各类web网站本来就有的问题，是的开发者更加的专注于业务逻辑的表达。同时微信小程序自带天生的微信流量，更加方便我们项目这种需要大量互联两个大的架构模块：视图View模块和服务Service模块，他们独立运行在不同的个WebView组件中(网页的一个页面),由开发者编写wxml和wxss代码来展示页面的UI,小程序支持同时展示多个View,View模块和Service的数据交互主要通过微信小程设计与View中的Js设计相似，每个应用只有一个Service进程，主管整个微信小程序的生命周期，每个View发送过来的通讯消息都在Service的整个主进下面我们通过代码展示一次完整的通向java后台的http请求。型为submit,Service层会通过submit找到这条消息并进行解析图2-8音频采集○图片采集○文字采集字数限制在200字以内样例添加：是联系方式：请输入您的主要联系方式发布任务否无style="margin-bottom:2px;margin-rialign:middle;width:30px;height:30px;<textclass="weui-label"style='font-size:800'>标题：</text><viewclass="weui-cellweui-cell_input<inputplaceholder="请输入任务标题"name="title"value='{{forminfo}}'/>…<buttonclass="weui-btn"type="primary"formType='submit'>发布任务</button>后台代码如下，通过formSubmit函数接受View层发送过来的消息，之后将View的数据获取并构成一个js对象，之后调用微信底层模块request方法，发送http请求，请求的对象由app.globalData(微信小程序的全局配置)决定，发送的请求因为有图片文件的存在，所以还用到了wx.upLoadFile进行图片的异步上传到后台，在最后通过解析后台返回的http状态码，如果是200则进入Success函数，通过showPop函数在View界面展示提交成功的弹窗，若是后台返回鹅状态码不是200,则进入Fail函数，跳转到设置好的错误界面引导用户根据提示进行下一步操作。varformData=e.detavaropenid=app.globalDat…url:app.globalData.URL+/user/inter'content-type':'application/x-www-fapp.globalData.account=res.data.user_varaccount=(res.data.user_accou29.url:app.globalData.URL+/user/35.'content-type':'application48.url:app.globalData.URL+'/job/exurl:.../pages/error/}url:.../pages/error/url:../pages/error/通过上文中的方法，类似的我们很快可以构建出很多的View界面与Service进行消息交互来改变View界面的数据状态进行不同效果的展示，同时利用微信的底层模块与后台进行通讯，完成数据的更新和展示。第3章数据可视化部分的基本结构和组件Django,一款使用Python编写的开源框架。与上文中介绍的Spring不同的是，Spring是一款软件开发框架，主要用来作用与软件开发的各个领域和方向。而Django不模式类似为Model(模型),View(视图),Template(模板),模型层又可以被称作数据层，主要用来将数据进行处理和转换，将其输入至视图层中，而视图层类似以MVC中的将其利用模型层获取并整理数据，最后将其输出至请求的相应中返回给模板层进行数据Django相对于上文中的Spring相比，更加的专注于WEB应用的开发，首先，因为是WEB应用的开发框架，所以与WEB框架无关的一些配置，在Django中是不会提供原生库依赖进行支持，这样就使得Dajngo的配置参数相对于Spring这种大型软件的开发框架来说更加的少，轻便，是的开发更加的快速，开箱即用。同时Dj专门开发出了ORM对象关系映射系统，方便更加优雅的进行数据库查询，并对底层进行了很好的优化，更有缓存，国际化，管理页面等每个WEB项目都会遇到的功能的开箱即用的组件，加上Python原生的对数据处理的支持，使用Django来做数据可视化部DjangoRestFrameWork是一款基于Django的rest设计模式的框架，在Django框架的基础上，DjangoRestFrameWork原生的提供了对rest设计模式的支持，对于Rest设计模式中的“动作”这个概念做了很好的处理，使得开发据可视部分的前端较为复杂，所以对前端的开发使用了前后可以使得数据更加灵活的进行展示，但是同时也会因以需要使用JSON数据格式进行数据交互，而使用DjangoRestFrameWork可以原生的支后台架构类似，主要由前端发送过来请求，之后由服务器端的逻文中数据采集的后台架构，数据可视化的数据架构则更加的简单，去掉了使用redis的缓更多的部署数据库访问，而是后台的数据计算，所以使用缓存的意义不大，直接请求即可。同时去掉了Mybatis而是使用了Django支持的更加优雅的ORM系统进行数据库访VUEVUE-数据可视化前端时间博度jegn-00M任务审核时用户发布的任对用广的展乐以画为殖理的图3-1对于上文中出现的技术架构不再进行赘述，本部分更多的介绍Django中独有的后台架构，首先，DajngoRestFrameWork的架构设计。router=CustomRouter(trailing_slrouter.register(r'job_audit',job_audit.JobAuditViewSet,basename="job_filter_backends=[DjangoFilterBackend,filters.SearchFilter,filtefilterset_fields=['audit_state','job_permission_classes=[IsAuthenticated,Admauthentication_classes=[JWTAuthejob_id=models.AutoFijob_type=models.Chajob_content=models.Charjob_example=models.CharFieldjob_publisher_openid=models.CharFieldjob_start=models.CharFieldjob_end=models.CharFieldjob_receive_numb=modeljob_complete_numb=modeljob_join_numb=modelaudit_state=models.CharField(job_tag_type=models.CharFieldjob_tag_content=models.CharFieldjob_audit_type=models.CharFieldjob_audit_content=models.Charemail=models.CharField(ma上文代码为最标准的DjangoRestFrameWork代码架构的一个实现，首先通过集成由系统，并将我们需要的路由通过写定的Url关键字绑定在域名之后。之后再将当前的视图类继承DjangoRestFrameWork自己的视图类ModelViewSet,这个视图类原生的提供种HTTP请求时，DjangoRestFrameWork将自动的对模型层中的数据进行这四种类型的操作，代码中的QuerySet绑定的便是相关的数据模型，在下面的类定义继承自Django自带的Model类，其中的每个字段根据数据库一—对应，DjanoRestFrameWork将自己取数据库通过ORM进行对应的查询操作，filterset_fields,绑定的则为分界词，通过分界使用的权限认证手段和对权限认证的工具，本项目使用的JWT认证。接口的实现效果如下图3-2所示。图3-2JWT:JSONWebToken是一个继续json对象的交换的场所，最出名的是各个网站间的单点Bearer,服务器收到后会器使用公式进行解密，息进行用户的权限校验，判断用户是否具有使用当前接口的权限，通过这样就组成了"deta1":"Authenticationcredentialswerenotpr3.2基于VUE框架的架构设计Vue是一款现在的Web应用前端开发框架，Vue将开发聚焦在视图层的层面上，通过自底像上进行渲染。Vue会在核心的main.js文件中，先是通过创建一个总的贯穿上下文的JS-DOM对象渲染出根节点<div>之后将各种需要依赖javaScript库文件导入根节点中供项目使用。之后用户只用将每个视同编写完成绑定到根节点上即可。通过这样计，就可以使得每个视图的数据可以直接绑定到HTML上，直接进行渲染和映射。同时Vue提供了极其强大的功能复用，组件。组件相当于一个预输入的Vue视图，可以在Vue的视图中对其进行引用，并且向其中传入数据以及监听其中的函数回调，从而实现与上文中微信小程序不同的是，Vue采用的是基于视图的设计模式，所以Vue项目基于每个页面的视图进行编写，同时通过Router组件来对每个路由进行匹配，同时通过<h3class="title">用户登录</h3>…}}this.otherQuery=this.}}…this.$refs.loginForm.valthis.$store.dispatch('user/login',tthis.$router.push({path:}}}l如上文代码所示，每一个Vue视图可以分为三个部分，1、展示部分：这一部分主要由HTML编写，在这里编写的Html将被渲染到最后的主DOM上，进行页面展示2、样式模块：这一部分主要由CSS以及各种CSS的加强库如SCSS等，这里编写的样式模块主要对上面展示模块的HTML进行样式渲染3、逻辑部分：Vue视图中最主要的模Vue主进程中，所以在这里定义的数据可以直接被渲染到Vue的DOM上，并且可以通过函数可以控制部分暴露出的Vue操作主Dom逻辑，例如上文代码中的watch函数，用来监听Router的路由跳转，将跳转过来的路由绑定到需要重点向的路由上，在登录结束后进程中，但可以在预处理函数逻辑里引用以及视图层上直接进行绑定，例如上文中的handeLogin函数被watch函数绑定，对页面进行重定向跳转。最后渲染出的视图如下图3-4所示通过如上部分的代码编写，我们可以很快地编写出每使用ajax进行Http异步请求，本项目主要使用axios库，对每个类型的http请求进行封理，都确认无误后将其返回给逻辑层用来监听的回调函数进行相应对视图层进行数据渲8.*获取http不同请求方式对应的函数15.return(url,data,config)=>getP23.*@param{Object}需28.asyncfunctiongetPromise(method,url,data,userConfig={}){36.http.cache.delet45.promise=newPromise(async(resolve,reject)=>{46.constaxiosRequest=ht51.handleResponse({config55.//避免cancelrequest时出现errormessage56.handleReject(error,config)59.returnhandleReject(error,conf61.//console.log(finally',config)64.//添加请求队列65.http.queue.set(config)67.http.cache.set(config.requestId,promise)73.*处理http请求成功结果77.*@param{Function}promise完成函数78.*@param{Function}promise拒绝函数80.functionhandleResponse({config,response,resolve,r82.if(code!==0&&code!=='83.reject({message:response.message,code:code,data:response.datal{}})85.resolve(config.originalResponse?response:response.data,config)87.http.queue.delete(co91.*处理http请求失败结果96.*@return{Promiseor.message,response:erroor.message,response:erro){)99.if(axios.isCance117.nextError上文中展示了，在请求前检查请求中是否包含token,没有则加入token,在请求结束后通过状态码判断，若是没有权限则跳转登录界面。之后封装后相关的get调用函数，配置后台的URL地址后就可以在逻辑层中调用并进行使用对视图层进行数据渲染。渲染后界面如下图所示：图3-50◎第4章高并发问题的处理和思考4.1可能出现的高并发问题同一时间之内有大量的请求来访问同一个服务或者同一个接口，导致程序无法处理出现阻塞现象，体现在WEB上面就是网页的响应十分缓慢或者干脆挂掉不显示，给用户带来问题一般是访问的次数超过了服务可以处理的上限，无法分配多余的线程去监听过来的4.2问题的思考和处理2、减少并发量ngnix做方向代理进行负载均衡将请求分配到不同的服务器或者服务器集群，将数据库中的字段根据标签，比如不同数字开头的ID存放在不同的库中来对库的访问进行分流，将这样可以在线程结束处理后立刻读取下一个请