2018年5月

前言

开个新坑,最近看SegmentFault了解到Google新推出了一个UI框架————Flutter。还是算比较新的一个框架就当随便玩玩(不保证会弃坑!第一篇主要看一下这个框架语法结构之类的东西。环境搭建就不说了可以去看看官方文档或者百度也有比较多教程。


项目自带实例代码结构

由于Flutter是一个跨平台的UI框架,这里用Android studio做学习
捕获.PNG

新建项目后会自动生成一个main.dart的文件里面有一个官方的实例代码(注:需要注意的是Flutter是使用Dart语言编写的,Dart也是一门面向对象的编程语言,上手难度不算很高)

  • import 'package:flutter/material.dart';
    这是导入了google的material design库,导入之后就可以使用相关风格的图标,文本之类的内容。相当于导入了一个控件库
  • void main() => runApp(new MyApp());
    这个就相当于java里面的main方法,程序的入口方法。也可以写成以下形式
void main(){
  return runApp(Widget app);}
  • StatelessWidget和StatefulWidget
    Flutter两个最基本的控件类,一个叫无状态类,另一个叫有状态类。区别也就字面意思:有无状态。无状态就是譬如文本、图片,我们只需要改动控件本身的配置信息就可以了;有状态就是譬如滚动列表、动画之类的可以动态改变的控件

程序员通用技能 HelloWorld

先贴代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
  // TODO: implement build
  return new MaterialApp(             //代表使用Material Design风格的应用
    title: 'Hello World',             //多任务切换时显示的标题
    home: new Scaffold(               //脚手架 相当于一个页面的父布局
      appBar: new AppBar(             //相当于Android的toolbar
        title: new Text('Hello World'),
      ),
      body: new Center(               //除toolbar的页面部分
        child: new Text('Hello World'),
      ),
   ),
 );
} }
  • 首先编写一个无状态的控件里面需要重写一个build方法,这个方法需要返回一个Widget对象。这里返回一个MaterialApp的对象。代表这个应用使用的是Material Design风格。然后这一层有两个属性title和home。 title:代表的是应用在多任务切换时显示的标题(然而暂时并不知道有什么用~);home:表示整个页面布局
  • 然后在home这一层新建了一个Scaffold对象,这个对象相当是整个页面的父布局就类似Android中xml文件中最外层的那个布局。
  • Scaffold里面有一个appBar和一个body组成,类似Android中一个toolbar+其他显示页面的结构
  • AppBar对象里有一个title就是页面的标题位置,new Text就是新建一个文本对象来显示HelloWorld
  • body里面新建了一个Center对象,意思是居中显示的意思,里面有一个child的属性,这个属性也可以新建一个文本对象来显示文本

最后效果:

screenshot-1525357659528.jpg


初步感觉

初步使用这个框架的话,由于之前android写得比较多,简单的Dart代码也是很好上手的。但是这个框架运行的时间实在久得可怕,幸好热加载功能比较方便。
以下是一个介绍Flutter基础的教程,感兴趣可以看看:请输入链接描述

工具解释:

Git:版本控制、代码托管。放代码的地方。
Jenkins:持续集成工具。自动化部署,配置好后,一键部署,不需要在本地打包、上传、重启等等。
Sonarqube:代码质量管理工具。用来检测代码,能检查出写的代码存不存在Bug、有没有写重复代码、有哪些可以优化等等。

协作流程图:
15.jpg

每个项目创建两个构建任务———检查任务与部署任务。检查任务用于检查代码,部署任务用于将代码部署到服务器上。

整个流程:

检查任务:将代码提交到Git,登陆Jenkins,开始构建检查任务,这时Jenkins就会开始使用Git插件将代码克隆至Jenkins的工作目录,克隆成功后开始使用sonar-scanner(Sonarqube的工具)插件连接至Sonarqube服务器进行代码检查,检查完成后Jenkins将任务状态修改为构建成功。检查任务完成后,登陆Sonarqube Web端,查看此次检查任务的报告。

部署任务:当查看检查任务报告后,代码存在问题,则需要修改自己写的代码了。如果代码不存在问题或问题可忽略则进行构建部署任务。此处介绍Java+Maven+Tomcat部署,从git上克隆代码,使用Maven命令打包,打包完成后,使用Deploy插件连接Tomcat,将打包好的.war包发送至Tomcat,Tomcat接收到包后放入webapps目录中,Tomcat热部署会自动加载.war包。Deploay成功后Jenkins将任务状态修改为构建成功。

项目配置:
在每个项目的根目录下,新建一个sonar-project.properties文件。输入以下内容

sonar.projectKey=项目名
sonar.language=扫描的语言,如(java、php,默认的是java)
sonar.projectName=项目名
sonar.projectVersion=项目版本,可以就写个1.0
sonar.sources=./    #这个是项目扫描的资源路径,./是扫描全项目。
sonar.java.binaries=./    #这个是打包后的路径,由于我们还没检查代码还没有打包,所以就用这个./参数吧。

检查任务配置:
1、进入首页,点击新建视图
1.jpg

2、输入创建的视图名称,最好是项目名称
2.jpg

3、新建检查任务
3.jpg

4、输入任务名,最好是项目名-scanner,便于区分
4.jpg

5、输入git配置信息,在构建模块里选择Execute SonarQube Scanner

git配置

5.jpg

账号信息配置

6.jpg

Execute SonarQube Scanner,选择一个jdk即可

7.jpg

6、保存,检查任务配置完成。点击立即构建可以开始检查代码。点击后几秒后左下角会有一个进度条出现,红色为出错,蓝色为成功。成功后点击中间的SonarQube即可跳转至此次检查的检查报告下。

8.jpg

14.jpg

部署任务配置:
1、新建一个Maven任务。(记得是在当前项目的视图下创建)

9.jpg

2、Git配置(暂时没找到两个任务共享文件的方法,只能再拉一次代码)同上
3、build

package -Dmaven.test.skip=true

10.jpg

4、构建后操作,选择Deploy war/ear to a container 。其中Containers的Tomcat的账号密码的在Tomcat里设置,必须要有一个有Deploy权限的账户,详细操作可百度。Tomcat Url能用内网地址就用内网地址,内网传输快。

12.jpg

5、保存,构建即可部署。此任务可能存在版本或者环境上的问题。可在Console Output里查看日志,如有错误,可根据错误的日志进行排查。

视图上的两个任务:

13.jpg

对上述发现有错误、有疑问的可以找我。

什么是http

HTTP是一个客户端和服务器端请求和应答的标准(TCP)。用户请求网站的响应过程也就是终端请求服务器的过程。通过使用Web浏览器、网络爬虫或者其它的工具,客户端发起一个到服务器上指定端口(默认端口为80)的HTTP请求。

什么是https

网络上有关https的解析文章和视频很多可以自行百度,简而言之就是https是以安全为目标的http请求,s是指secure。可以随意打开一个网站按F12查看Security选项查看该网站是否属于安全网站及其证书信息(查看证书信息可能需要浏览器属于比较新的版本)
未加密网页的security:
TIM截图20180501131031.png

已加密网页的security:
TIM截图20180501131154.png

以下是我截取B站的安全验证截图,点击View certificate可以看到证书的详细信息。
TIM截图20180501131540.png
从证书当中你能获取一些比较通用的网站信息,但是别想着做什么奇怪的事(严肃)。
https的诞生就是因为网络中的信息传递太过于不安全(计算机网络有学过信息的接受和转发),所以截取用户请求伪造网站响应的所谓黑客就有了可乘之机。
下面是个人觉得一个能很好的讲解HTTPS机制的一篇文章:
一个故事讲解https
我认为无论是计算机行业无论从事的是前后端都最好阅读一下这个,能增加不少见识,而且下面的知识是我默认了你看了上面这个博客后写的。
证书是提供安全的物理道具,可以通过一系列的渠道获得,例如调用JDK自带的keytool命令生成,服务器平台生成,或者直接购买证书。免费的证书多数是1年有效。
最后证书的配置环节,查看了网络上的很多博客其实都有写,但是一千个服务器就有一千种奇奇怪怪的问题,这里我就讲解下有关我以前给咱工作室网站配置ssl证书所遇到的坑以供后来者避险和参考:
首先是端口问题,以下是CENTOS7下的配置和命令:
查看端口:netstat -tunpl
查看自己的443端口有没有被占用,一般不会被占用,但是XAMPP有时候会莫名的卡着这个端口变成僵尸进程,需要重启才能解决。
使用你所得到的证书文件配置在tomcat上,步骤为:
复制 证书文件到所需要配置的toncat的根目录下(我有试过不使用根目录但是都失败了,后来者如若有别的了解请留言)。
启用编辑命令 vim /tomcat的目录/conf/server.xml

       <Connector port="80" protocol="HTTP/1.1"
       connectionTimeout="20000"
       redirectPort="443" />
       <Connector port="443" protocol="HTTP/1.1"
       maxThreads="150" SSLEnabled="true" 
       scheme="https" secure="true" 
       keystoreFile="根目录下的pfx文件" 
       keystoreType="PKCS12" 
       keystorePass="解密私钥"
       clientAuth="false" sslProtocol="TLS" />

       <Connector port="8009" protocol="AJP/1.3" redirectPort="443" />

重启tomcat,访问网站(最好是域名访问,IP访问会提示危险)查看证书是否正确部署。
补充:
在新增了443connector以后,在今后的tomcat部署启动中会导致出现两个启动提示,这个是正常的,因为一个启动是连接到80的端口,一个启动是连接到443的端口,只有出现了两个启动提示才能算是完成了整个项目的启动。有时候会卡着在第一个启动提示中,要么等待,要么shutdown掉再重新strat就可以(个人推荐这个,没必要浪费时间等待),请注意观察tomcat的log。
完。