Flutter_web加Java Spring 整站前后台开发经验梳理

Flutter_web加Java Spring 整站前后台开发经验梳理

这段时间开发了一个公司内部使用的网站,本着提前探索熟悉(踩坑)未来的全栈UI框架-Flutter的愿望,使用了Flutter for Web作为前端框架,后台部分则循规蹈矩的用了java Spring。目前已经开发完成,在此简要记录一下开发过程中积累的一些经验。

突然发现,我现在不仅会android,又会java后端,又能用flutter写web+android+ios代码,一下子变成了全栈工程师喽!

前端部分——Flutter

官网链接

Flutter的官方入门文档是 https://flutter.dev/docs/get-started/install
现在有中文版可以看,中文链接是: https://flutterchina.club/setup-macos/
Flutter的Github地址是: https://github.com/flutter/flutter
Stack OverFlow上flutter分类地址: https://stackoverflow.com/questions/tagged/flutter
为 Java 开发人员准备的 Dart 教程: https://codelabs.flutter-io.cn/codelabs/from-java-to-dart-cn/index.html#0

问题排查方式

很多时候遇到问题,去github的issue里搜一下,都能找到解决方案。在我的开发过程中,大多数问题都是通过翻issue来找到解决方案的,少部分能在Stack Overflow上找到。这两个地方都找不到的时候,一般就代表着该问题没有现成的解决方案,需要自己翻源码排查了。

安装Flutter

官网上Flutter的安装方式写了很长一页,但是实际上完全不需要这么麻烦。现在Flutter的安装已经非常简单了。
只需要打开Android Studio,在Preferences-plugins里找到flutter安装即可。
Flutter_web加Java Spring 整站前后台开发经验梳理_第1张图片
安装好后重启ide,选择创建一个Flutter工程,然后在创建过程中就会提示你下载Flutter Sdk,按照提示一步步下载安装即可。

Flutter_web加Java Spring 整站前后台开发经验梳理_第2张图片
安装Flutter开发环境,就随着创建第一个Flutter工程的同时自动完成了。

创建Flutter_web工程

Flutter for Web 和 移动端的Flutter 现在没有在一个仓库里。而是从移动端Flutter仓库分裂出来,并且做了部分修改。
Flutter_web地址: https://github.com/flutter/flutter_web

Flutter web工程的创建同样非常简单,首先要建议下载Intellij idea,然后与Android studio一样,安装flutter插件。
新建一个project,类型选择Dart->Flutter Web App,上面的Dart SDK path路径选择flutter sdk目录下flutter/bin/cache/dart-sdk目录,然后按提示输入工程名即可。
Flutter_web加Java Spring 整站前后台开发经验梳理_第3张图片
如果不是新建项目,而是引入已经创建好的项目,则连intelij idea都不用下载,直接使用android studio打开已经创建好的项目就会自动识别为flutter_web工程,全自动!

到目前为止,flutter_web项目就已经能正常运行了。直接点这个按钮就能跑起来了。
运行

另外建议安装flutter_web github上的readme所说,安装webdev
只需要一行命令flutter pub global activate webdev即可安装。
运行这条命令,需要先把flutter命令放到环境变量path里,到安装的flutter sdk目录下,把相应的地址写到path内即可。
然后再把$HOME/.pub-cache/bin目录也放到环境变量path里,就能在任意目录的命令行下使用webdev了。

编译release包

默认情况下,开发中使用的都是用于开发模式下的编译器Dart Dev Compiler,它专为快速,增量编译和简单调试而设计。
而release包是应该使用Flutter_web的发布编译器 dart2js的。release模式下打出来的包,性能更快、兼容性更好、包大小也小。

编译release包需要先按上一步安装好webdev命令。
然后运行webdev build命令即可。
这时会在build目录下,生成对应的html,js等文件。

如果只是想本地测试下release模式下的代码运行情况,直接运行webdev serve -r即可。

偶尔编译报错的解决办法

  1. 一般编译报错,可以先看一下pubspec.yaml文件写的对不对,是不是有语法错误或者依赖冲突。修改完pubspec.yamlIDE一般会自动提示要packages get的,这一步相当于gradle的sync,点一下就好了。如果没有提示的话,可以手动在工程目录下执行flutter packages get命令。
  2. 另一种情况,可能是编译的缓存出错了,新的编译生成文件没有自动覆盖。android里用gradle编译也经常这样,gradle报错一般clean一下就好了,dart也一样,dart里的clean在IDE里没有按钮,要在工程目录下执行命令pub run build_runner clean

Flutter for web项目与Flutter for Android、IOS项目的迁移

虽说Flutter for web与Flutter for Android、IOS并不在一个git仓库里,略有不同。但是基本语法都是相通的。

最大的不同有两部分:

  1. import sdk中包的路径不同,Flutter for Android、IOS 中路径是 flutter/xxx ,而Flutter for web中是flutter_web/xxx.
    比如常用的material.dart包。
    在Flutter for Android、IOS 中 这么写:import 'package:flutter/material.dart';
    在Flutter for web中这么写:import 'package:flutter_web/material.dart';

  2. 部分第三方库,只支持Flutter for Android、IOS,而不支持Flutter for web。

基于以上两点,在没有使用多少第三方库的情况下,Flutter for web项目与Flutter for Android、IOS项目只要批量替换import包中的flutter和flutter_web字符串即可相互迁移。
我测试了写的flutter_web中的部分界面,修改import包中的字符串后,放到手机上,可以完美运行,并且UI上几乎没有区别。

Flutter这种基于Skia重写渲染引擎的模式,确实能实现高度的三端一致性。

具体差异详情可参阅官方文档:
https://github.com/flutter/flutter_web/blob/master/docs/faq.md
https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md

快速理解UI规则

Flutter的布局思想,是借鉴Flex的。

建议先看一下这篇文章,来熟悉一下Flex布局,这对学习Flutter的布局是很有帮助的。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

学习完Flex之后,就能大概理解常用的几个熟悉的参数:

  • mainAxisAlignment:主轴方向上的布局方式(
    • start:居头,
    • end:居末,
    • center:居中,
    • spaceBetween:两侧无留白的平均分布,
    • spaceAround:两测小留白的平均分布,
    • spaceEvenly:两测大留白的平均分布
  • mainAxisSize:主轴方向上的大小(
    • min:对应warp_content,
    • max:对应match_parent
  • crossAxisAlignment:副轴上的布局方式(
    • start:居头,
    • end:居末,
    • center:居中,
    • stretch:拉伸,
    • baseline:基准线对齐
      )

另外,所有的alignment都是指子控件的摆放方式,对应于android中,就是只有gravity属性,而没有layout_gravity属性。

对于android开发来说,将Flutter中的布局组件,建立与对应的Android组件的对应关系,更容易理解。

常用的布局:
  • Row、 Column、 Flex 都对应于Android的LinearLayout,分别是横向,纵向,可按比例摆放的LinearLayout。
  • Container 、 Stack都对应的Android的FrameLayout,分别是一个子view和多个子view重叠的FrameLayout。
  • ListView、GridView对应于Android的ListView、GridView。
常用的控件:
  • Text:文本控件
  • Image:图片控件
  • RaisedButton、OutlineButton、FlatButton:按钮控件
  • TextField:输入框
  • RadioListTile:单选框
  • Checkbox:复选框
  • DropdownButtonHideUnderline:下拉框
  • Scaffold.of(context).showSnackBar(SnackBar(content: const Text("弹出SnackBar"))):SnackBar控件
  • showDialog( context: context, builder: (context) { return SimpleDialog( children: [ Text("Dialog"), ], ); });:Dialog弹框
    通过使用以上组件,基本上常用的布局就能完成了,

需要注意的是,Flutter中没有相对布局,在Android中用相对布局实现的场景,Flutter中可能要找其他方式实现。

对于写UI代码很困难的朋友,也可以尝试下这个拖控件生成flutter代码的在线工具,作为辅助。
https://flutterstudio.app/
Flutter_web加Java Spring 整站前后台开发经验梳理_第4张图片

网络请求

Flutter中网络请求库主要有三个:

  1. dart:io
  2. package:http/http.dart
  3. package:dio/dio.dart
    Flutter_web中只能使用package:http/http.dart。

使用起来非常方便发请求只需要一行代码即可:http.get(url)

Response response = await http.get(testUrl);
print(response.body);

await async关键字

对于android和java开发来说,await async关键字比较陌生。但是对于熟悉js和C#的开发者来说,对await async用法可能已经很熟悉了。

await async关键字是一种异步操作的简洁写法,这实际上是一种语法糖。

要明白await async关键字,首先要先看一个Future数据结构,它有一个泛型声明,这个数据结构的对象表示未来某时刻会返回T类型的数据。大家可以把它和RxJava的Observable类比,两者是非常类似的。
比如 这个声明 Future getUserName(),就表示这个方法会立即返回一个Future对象,而这个对象未来会返回String类型的一个结果。
这个getUserName方法的调用是可以这么写的:

   NetApi.getUserName().then((response) {
      print(response);
    });

在这种使用方式上,是和RxJava极度类似的。

而await async关键字,在这个基础上,又进一步简化了写法。
使用await关键字,可以这么写。

    var response = await NetApi.getUserName();
    print(response);

这种写法与上面的实现效果是完全一样的,编译器在编译时对这个语法糖进行降糖解析。

await关键字,可以理解为把当前函数体内,await关键字之后所有的函数调用,都放到了一个隐含的.then(response){ ... }代码块中。

而当该函数内使用了await关键字后,该函数的返回值,肯定也变成了“未来某时刻才会返回”。这样其他函数调用该函数时也要使用await关键字,或then来使用。dart里规定了,这种使用了await关键字的函数,要在自身声明上标记async关键字,这样其他函数才能明确知道,是否该使用await关键字,或then了。

Json解析

Flutter中不支持反射,所以java中常用的通过反射来生成json,解析json的方式,全都不能用了。
要在Flutter中使用Json,只能硬编码。
听起来硬编码Json生成、解析,似乎非常恐怖。但是实际上,这种硬编码的代码,都是非常有规律性的,所以完全可以通过工具自动生成。

  1. 已有Json,生成Dart代码
    常见的通过Json生成Dart代码的工具非常多,我在这里举两个我用的。
    https://javiercbk.github.io/json_to_dart/
    https://app.quicktype.io/
  2. 已有dart model代码,生成toJson和fromJson方法。
    通过Dart Json Serialization Generator插件即可实现该功能。
    Flutter_web加Java Spring 整站前后台开发经验梳理_第5张图片
  3. 有的时候,还想把已有的java代码直接转换成dart代码。 鉴于dart和java的语法规则实际上是非常相似的,这个工具也有人已经实现了。
    http://sma.github.io/stuff/java2dartweb/java2dartweb.html
    我测试过,普通的java bean是能完美转换成dart的,这对于从android上迁移逻辑到flutter上,是非常方便的。

样例代码

对于初学一个语言、框架来说,样例代码是重要的学习资料。
Flutter_web给出了几个sample,可做学习之用。
https://flutter.github.io/samples/
对应的源码在这里,https://github.com/flutter/samples/tree/master/web,可以clone下来查看。
其中对各种组件整理的最全的是flutter web gallery
https://flutter.github.io/samples/gallery/
在我的开发过程中,经常会到gallery上找到类似的界面,然后再相应的看其源码学习。

在Flutter中找不到相应的控件怎么办

现在Flutter还是一个新生框架,相应的库肯定是没有Java、Android这么全面的,经常有找不到某些控件或者功能的情况。
这个时候一般有这样几种选择:

  1. 到https://pub.dev/网站搜索三方库,这个网站区分了Flutter for web项目与Flutter for Android、IOS两种筛选条件,还有每个库的评分。并且找到的库直接修改项目的pubspec.yaml文件即可引入,非常方便。
  2. 看看当前的需求能不能灵活一点,使用其他方式实现,尽量用已有的基础组件组装出想要实现的功能。
  3. 当前控件仅有少数参数没有满足需求,可以把sdk中整个类拷贝出来,改个名字即可对源码进行二次加工,dart对代码的访问性限制没有java那么大,拷贝出来到自己工程目录一般也是能正常运行的。实在不行还可以直接改sdk内代码,只是几个人协同开发的话,所有人的sdk都要相应的改动,这点和python是很像的。
  4. 使用platformView来引入平台组件,对于web来说,平台组件就是html。
    这是官方一个引入YouTube播放控件的项目。
    https://github.com/flutter/flutter_web/tree/master/examples/html_platform_view
    代码很简单,只有十几行:
void main() {
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlView(viewType: 'hello-world-html'),
    ),
  ));
}

这种情况下html和dart的交互要使用EventMessage了,
js方代码

        window.parent.postMessage({//发消息
            "content": "test"
        }, "*");
        window.addEventListener("message", function (ev) {//注册消息监听
        });

dart方代码

    IFrameElement createdView = ui.platformViewRegistry.getCreatedView(viewId);
    createdView.contentWindow.postMessage("test", "*");//发消息
    window.addEventListener("message", (Event event) {});//注册消息监听

后端部分——Java Spring

后端部分使用Java Spring开发。Java对于我这样一个Android开发来说,使用起来自然是非常轻松。Spring被使用了这么多年,相关技术早就非常成熟了,几乎可以说是开箱即用。我们并没有遇到多少困难。

工程创建

使用Spring Initializr配置一下,就可以生成一个基本Spring工程框架,然后在此基础上实现自己要的业务逻辑即可。

在这里,只需要额外选择基本的MyBatis、Spring Web Starter、MySQL Driver即可,其他有需要的框架可以需要的时候再加。

http接口开发

Spring中可以使用注解非常方便的配置各种功能。
写http接口时,也用到了很多注解。
如下面的代码,用很简单的方式,就生成了一个接口。
其中@RestController表示当前类作为一个rest接口的Controller,@RequestMapping表示接口的路径,@RequestParam表示get请求的参数。

@RestController
@RequestMapping("/test/demo")
public class TestController {
    @RequestMapping(value = "greet", method = RequestMethod.GET)
    Map<String, Object> greet(@RequestParam String name) {
        HashMap<String, Object> response = new HashMap<>();
        response.put("code", "0");
        response.put("msg", "ok");
        response.put("body", "hello " + name);
        return response;
    }
}

该接口请求结果如下:
Flutter_web加Java Spring 整站前后台开发经验梳理_第6张图片

数据库操作

上面的实现了常见的http请求,但是还没有数据库相关操作的参与,实际开发中,大多数接口的实际实现,都是数据库的操作。

这里,需要先加上相关配置。

  1. 在Application类上,增加注解@ImportResource("classpath:applicationContext.xml"),表示使用applicationContext.xml作为context配置文件。
    applicationContext.xml配置如下

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                 http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
                 http://www.springframework.org/schema/context
                 http://www.springframework.org/schema/context/spring-context-4.2.xsd">
    <context:component-scan base-package="com.example.demo"/>
    <import resource="classpath*:application_dao.xml"/>
beans>
  1. 编写application_dao.xml配置

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://123.123.123.123:3306/dataBaseName?characterEncoding=utf8"/>
        <property name="username" value="root"/>
        <property name="password" value="root12345"/>
    bean>
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="mapperLocations" value="classpath:mapper/*_mapper.xml"/>
    bean>
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.example.demo"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    bean>
beans>
  1. mapper配置
    test_mapper.xml

<mapper namespace="com.example.demo.DemoModelMapper">
    <resultMap id="demoModel" type="com.example.demo.demoModel">
        <id property="id" column="id"/>
        <result property="viewCode" column="view_code"/>
        <result property="title" column="title"/>
    resultMap>
    <sql id="table_name">test_tablesql>
    <select id="getDemoModels" resultMap="DemoModel">
    
        select *
        from
        <include refid="table_name"/>
        where
        view_code=#{viewCode} 
    select>
mapper>

做好以上xml配置后,还需要定义Mapper接口类。

@Mapper //表示该类是Mapper类
public interface DemoModelMapper {
    List<DemoModel> getDemoModels(String viewCode);
}

之后就可以直接使用该接口操作数据库了,接口的实现,会由Spring框架根据xml配置自动注入。
我们将上面的TestController略微修改,来调用该mapper操作数据库。

@RestController
@RequestMapping("/test/demo")
public class TestController {
    @Resource
    private DemoModelMapper demoMapper; //不需要手动实例化,Spring会根据注解和配置自动注入
    @RequestMapping(value = "greet", method = RequestMethod.GET)
    Map<String, Object> greet(@RequestParam String viewCode) {
        HashMap<String, Object> response = new HashMap<>();
        response.put("code", "0");
        response.put("msg", "ok");
        response.put("body", demoMapper.getDemoModels(viewCode));
        return response;
    }
}

如此,就完成了一个可从数据库查找数据的http接口。

集成Flutter_web打包产物

我们虽然采用了前后端分离的方式开发,但是在发布时,采用了合并到一起,发布到一台服务器上的形式来上线。这种方式虽然不利于前后端分开迭代,但是在接入我们内部一些权限管理、自动部署等组件时,具有巨大的便利性。

首先使用上面提到过的webdev build命令,将Flutter_web项目编译成html和js等生成产物。

然后将这些生成产物,统一复制到JavaProject/demo/src/main/resources/static目录下。这样,java项目运行后,直接访问http://127.0.0.1:8080地址,就可以访问到网站主页面了。

你可能感兴趣的:(java,技术,Flutter)