基于SpringBoot+Netty的聊天app开发记录日志(三)

MUI H5 + Hbuilder

MUI http://www.dcloud.io

MUI 文档 http://dev.dcloud.net.cn/mui/ui/

H5 PLUS(H5+) http://www.html5plus.org/doc
Hbuilder 开发工具

image.png

折腾了一下午,也没做太多东西,想个名字就想了半天,什么"友信","轻聊","思聊",最后就想到了一件事,嗯,"思信"吧,感觉还行..还有1个小时在找iconfont图标---大概就是强迫症的原因吧..
(也是我不想写前端的原因之一!!如果有时间我还能再继续选图标!)
最后还是选择这种小清新的简约图标吧,另外蕾姆蓝(#66ccff),真好看,我永远爱蕾姆蓝~

小结:
虽然以前听说过MUI和H5Plus 不过今天自己亲自动手用了下感觉真的挺有意思的.
官方的文档简单的雅痞,感觉跟写jQuery一样- -,不过挺久没写前端了,报错一时半会儿都找不到问题,蛋碎.

关于界面布局和逻辑:
通过Hbuilder生成的App项目有一个index主页,通过这个主页,主要设置其他4个页面,的显示和隐藏既可实现跳转,so easy.
主要逻辑在这里

    mui.plusReady(function() {
                //获取当前的webview对象
                var indexWebview = plus.webview.currentWebview();

                //向当前的主页webview追加子页的4张webview对象
                for(var i = 0; i < sixinArray.length; i++) {

                    var sixinPage = plus.webview.create(sixinArray[i].pageUrl,
                        sixinArray[i].pageId, sixinStyle);
                    //创建完后不需要马上显示,只有点击的时候才显示,所以隐藏webview窗口
                    sixinPage.hide();

                    //追加每一个子页面到当前主页面
                    indexWebview.append(sixinPage);
                }
                //设置默认显示页面
                plus.webview.show(sixinArray[0].pageId);

                //批量绑定tap(点击)事件,展示不同的页面
                //通过mui选择器选择唯一的class ,on是表示触发的事件,tap表示手指触摸点击事件类型
                //第二个参数表示link的对象,也可以用共同的a标签代替
                mui(".mui-bar-tab").on("tap", ".mui-tab-item", function() {
                //或者使用a标签选择器  mui(".mui-bar-tab").on("tap", "a", function() { 
                    //在要点击的标签处添加事件名 并且获取到相应的对象
                    var tabindex = this.getAttribute("tabindex");
                    
                    //显示tap点击的页面,第一个id,第二个动画效果,第三个延迟时间
                    plus.webview.show(sixinArray[tabindex].pageId, "fade-in", 150);
                    
                    //隐藏不需要的页面
                    for(var i = 0; i < sixinArray.length; i++) {
                        if(i != tabindex) {
                            plus.webview.hide(sixinArray[i].pageId,"fade-out",150);
                        }
                    }
                });

            });

比较坑人的几个点:
1.下的最新HBuilderX 就是这个草原绿的玩意儿

image.png

动不动就会自己卡...去官方社区看了下原来是普遍问题..遂退回老版本姨妈红的这个

image.png

2.原来在标签上直接加额外属性是官方预设的才可以我还以为自己自定义的...所以弄半天没拿到id
正确代码:

image.png

错误代码:

image.png

3.iPhoneXR无法真机调试.折腾了半天,下东下西的,把iTunes更新到最新版本也没用.
无奈再去官方查找.哦豁,

image.png

所以说,姨妈红的HBuilder不能在xr上真机调试,只有最新版的草原绿HBuilderX才可以,然鹅,这个卡成PPT...弃了弃了. 安心用炸弹7调试吧.

吃完饭,晚上继续...

使用Mybatis逆向生成工具

坑点:

1.数据库版本错误
2.时区错误
3.SSL警告
4.工程的模块不同,逆向工具的配置文件存放的位置不同,而且生成包的位置也要修改
5.使用逆向生成工具,重新打包后
6.properties转yml

错误:mybatis.mapper-locations=classpath:mapper/.xml ----->正确:

image.png

上一个也不对,后面用yml处理这个才正确:

image.png

mapper-locations: classpath:mapper/.xml

坑太多,自闭了好久,累了,歇会儿

感谢这位大哥救我狗命

https://blog.csdn.net/mjlfto/article/details/55213560

转yml

https://www.toyaml.com/index.html

终于把后端搭好了,累成狗.
然后去搭前端app,又是一个大坑!!!

我把请求服务器的url地址写成localhost形式,似乎无法识别,更恶心的是,好像在Hbuilder里还不支持Debug..然后就头铁瞎鸡儿按了半天,前后端一直联调失败,最终无奈翻阅官方文档也没找着..

image.png

可能是看我快累瘫了,查到这个,成功解决
非常感谢这个老哥-->https://blog.csdn.net/kevin_cyj/article/details/50620453
"需要注意的是请求的url地址，一定是服务器的本机的ip地址，我就是输错成127.0.0.1地址，在真机调试上不能请求"
折腾了好久要不是这句话我还能折腾到天荒地老

看到成功注册的结果也算欣慰了

image.png

在变秃的路上又近了一步

使用文件服务器上传图片

fastDFS:

image.png

1、简介

FastDFS 是一个开源的高性能分布式文件系统（DFS）。它的主要功能包括：文件存储，文件同步和文件访问，以及高容量和负载平衡。主要解决了海量数据存储问题，特别适合以中小文件（建议范围：4KB < file_size <500MB）为载体的在线服务。

FastDFS 系统有三个角色：跟踪服务器(Tracker Server)、存储服务器(Storage Server)和客户端(Client)。

　　Tracker Server：跟踪服务器，主要做调度工作，起到均衡的作用；负责管理所有的 storage server和 group，每个 storage 在启动后会连接 Tracker，告知自己所属 group 等信息，并保持周期性心跳。

　　Storage Server：存储服务器，主要提供容量和备份服务；以 group 为单位，每个 group 内可以有多台 storage server，数据互为备份。

　　Client：客户端，上传下载数据的服务器，也就是我们自己的项目所部署在的服务器。

image

2、FastDFS的存储策略

为了支持大容量，存储节点（服务器）采用了分卷（或分组）的组织方式。存储系统由一个或多个卷组成，卷与卷之间的文件是相互独立的，所有卷的文件容量累加就是整个存储系统中的文件容量。一个卷可以由一台或多台存储服务器组成，一个卷下的存储服务器中的文件都是相同的，卷中的多台存储服务器起到了冗余备份和负载均衡的作用。

在卷中增加服务器时，同步已有的文件由系统自动完成，同步完成后，系统自动将新增服务器切换到线上提供服务。当存储空间不足或即将耗尽时，可以动态添加卷。只需要增加一台或多台服务器，并将它们配置为一个新的卷，这样就扩大了存储系统的容量。

3、FastDFS的上传过程

FastDFS向使用者提供基本文件访问接口，比如upload、download、append、delete等，以客户端库的方式提供给用户使用。

Storage Server会定期的向Tracker Server发送自己的存储信息。当Tracker Server Cluster中的Tracker Server不止一个时，各个Tracker之间的关系是对等的，所以客户端上传时可以选择任意一个Tracker。

当Tracker收到客户端上传文件的请求时，会为该文件分配一个可以存储文件的group，当选定了group后就要决定给客户端分配group中的哪一个storage server。当分配好storage server后，客户端向storage发送写文件请求，storage将会为文件分配一个数据存储目录。然后为文件分配一个fileid，最后根据以上的信息生成文件名存储文件。

image

4、FastDFS的文件同步

写文件时，客户端将文件写至group内一个storage server即认为写文件成功，storage server写完文件后，会由后台线程将文件同步至同group内其他的storage server。

每个storage写文件后，同时会写一份binlog，binlog里不包含文件数据，只包含文件名等元信息，这份binlog用于后台同步，storage会记录向group内其他storage同步的进度，以便重启后能接上次的进度继续同步；进度以时间戳的方式进行记录，所以最好能保证集群内所有server的时钟保持同步。

storage的同步进度会作为元数据的一部分汇报到tracker上，tracke在选择读storage的时候会以同步进度作为参考。

5、FastDFS的文件下载

客户端uploadfile成功后，会拿到一个storage生成的文件名，接下来客户端根据这个文件名即可访问到该文件。

image

跟upload file一样，在downloadfile时客户端可以选择任意tracker server。tracker发送download请求给某个tracker，必须带上文件名信息，tracke从文件名中解析出文件的group、大小、创建时间等信息，然后为该请求选择一个storage用来服务读请求。

参考来源:https://www.cnblogs.com/chiangchou/p/fastdfs.html

评论加载中...