Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构

搭建项目结构 第一步、使用get cli生成基础的项目结构

https://pub.dev/packages/get_cli
项目类型为Flutter Project,iOS语言选swift、Andoid语言选Kotlin,并且启用null safe特性,Getx的模板选择“GetX Pattern”。
get create project:strapi_flutter_internation_poc 1) Flutter Project 2) Get Server 1 ? What is your company's domain?Example: com.yourcompanycom.nasawz.strapi_flutter_internation_pocwhat language do you want to use on ios?1) Swift 2) Objective-C 1what language do you want to use on android?1) Kotlin 2) Java 1Do you want to use null safe?1) Yes! 2) No 1do you want to use some linter?1) no 2) Pedantic [Deprecated] 3) Effective Dart [Deprecated] 4) Dart Recommended 1Running `flutter create D:\poc\strapi_flutter_internation_poc` …$ flutter create --no-pub -i swift -a kotlin --org com.nasawz.strapi_flutter_internation_poc D:\poc\strapi_flutter_internation_poc Creating project .... lib\main.dart (created) pubspec.yaml (created) README.md (created) test\widget_test.dart (created) .gitignore (created) .idea\libraries\Dart_SDK.xml (created) .idea\libraries\KotlinJavaRuntime.xml (created) .idea\modules.xml (created) .idea\runConfigurations\main_dart.xml (created) .idea\workspace.xml (created) .metadata (created) ....... ........ Wrote 81 files.All done! In order to run your application, type:$ cd . $ flutter runYour application code is in .\lib\main.dart.Running `flutter pub get` …$ flutter pub get Running "flutter pub get" in strapi_flutter_internation_poc...2,666ms $ dart migrate --apply-changes --skip-import-check Migrating D:\poc\strapi_flutter_internation_pocSee https://dart.dev/go/null-safety-migration for a migration guide.Analyzing project... All sources appear to be already migrated.Nothing to do. ?File: analysis_options.yaml created successfully at path: analysis_options.yaml 1) GetX Pattern (by Kauê) 2) CLEAN (by Arktekko) 1Your lib folder is not empty. Are you sure you want to overwrite your application? WARNING: This action is irreversible1) Yes! 2) No 1 ?'Package: get installed! ?File: main.dart created successfully at path: lib\\main.dart ?File: home_controller.dart created successfully at path: ./lib\app\modules\home\\controllers\\home_controller.dart ?File: home_view.dart created successfully at path: ./lib\app\modules\home\\views\\home_view.dart ?File: home_binding.dart created successfully at path: ./lib\app\modules\home\\bindings\\home_binding.dart ?File: app_routes.dart created successfully at path: lib\\app\\routes\\app_routes.dart ?File: app_pages.dart created successfully at path: lib\\app\\routes\\app_pages.dart ?home route created successfully. ?Home page created successfully. ?GetX Pattern structure successfully generated.Running `flutter pub get` …$ flutter pub get Running "flutter pub get" in strapi_flutter_internation_poc...

【Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构】至此 我们已经有了一个Flutter基础的项目结构。
接下来,让我们将Strapi融入到项目中。
第二步、融入Strapi
https://strapi.io/
进入项目目录
cd .\strapi_flutter_internation_poc

使用"create-strapi-app"来初始化项目
npx create-strapi-app strapi npx: installed 146 in 14.856s ? Choose your installation type Quickstart (recommended) ? Would you like to use a template? (Templates are Strapi configurations designed for a specific use case) No Creating a quickstart project. Creating a new Strapi application at D:\poc\strapi_flutter_internation_poc\strapi. Creating files. Dependencies installed successfully.Your application was created at D:\poc\strapi_flutter_internation_poc\strapi.Available commands in your project:yarn develop Start Strapi in watch mode.yarn start Start Strapi without watch mode.yarn build Build Strapi admin panel.yarn strapi Display all available commands.You can start by doing:cd D:\poc\strapi_flutter_internation_poc\strapi yarn develop> strapi@0.1.0 build D:\poc\strapi_flutter_internation_poc\strapi > strapi build "--no-optimization"Building your admin UI with development configuration ...√ Webpack Compiled successfully in 27.43sRunning your Strapi application.

到这里 Strapi安装成功并启动在本地的 http://localhost:1337 端口上。
Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构
文章图片

能看到这个界面后可以先暂停下,先修改下Strapi的配置。将Strapi中默认的Sqlite数据库的地址指向到Flutter项目的assets文件夹中。
先将对应的文件夹建立好 assets/db
修改 [project_root]/strapi/config/database.js
module.exports = ({ env }) => ({ defaultConnection: 'default', connections: { default: { connector: 'bookshelf', settings: { client: 'sqlite', filename: env('DATABASE_FILENAME', '../assets/db/data.db'), }, options: { useNullAsDefault: true, }, }, }, });

修改完成后重新启动Strapi项目
npm run develop

注册一个管理员账号
admin@poc.com nrVABVAAYq9geTY

Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构
文章图片

修改Flutter项目的配置文件 pubspec.yaml将数据库的路径放到assets下
flutter: assets: - assets/db/ uses-material-design: true

在之后的开发中 Flutter 就可以利用Strapi的数据库文件了。
现在看到项目结构如下图
Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构
文章图片

上一篇:技术选型

    推荐阅读