本节目标
- portainer 容器管理工具
- 数据库设计过程
- 数据库设计目标、规范、习惯
- graphql 条件查询、排序
- flutter 代码实现
视频
https://www.bilibili.com/vide...
代码
https://github.com/ducafecat/...
strapi 运行环境网盘下载
- 网盘
链接:https://pan.baidu.com/s/13Ujy...
密码:yu82
- 文件
| 名称 | 说明 |
|---|---|
| strapi-docker-compose-00.zip | 干净环境，已安装 graphql 插件 |
| strapi-docker-compose-15.zip | 15 课内容 |
- 运行
需要用 docker-compose 启动
账号 admin
密码 123456
# 启动
docker-compose up -d --remove-orphans
# 关闭
docker-compose down工具
正文
安装 portainer
docker run -d -p 9000:9000 \
--restart=always \
-v /var/run/docker.sock:/var/run/docker.sock \
--name portainer-local \
portainer/portainer设计数据模型
- https://www.draw.io
- 标准数据库设计
ER 图 -> 设计范式 -> 数据库物理表
- ER
- 范式
https://zh.wikipedia.org/wiki...
- 设计规范 表前缀
sys* 系统、用户、权限
dict* 字典表
bus_ 业务
- 设计数据 对象、属性、关系
创建 strapi 数据类型
- 创建外键表 新闻分类
- 创建外键表 新闻频道
- 创建业务表 新闻内容
- 创建链接外键 新闻内容、分类、频道
编写 graphql 查询
- 新闻
query News($category_code: String) {
busNews(where: { dict_categories: { code: $category_code } }) {
title
dict_channel {
code
title
icon {
url
}
}
dict_categories {
code
title
}
author
url
addtime
thumbnail {
url
}
}
}- 首页
query pageIndex {
# 分类
dictCategories(sort: "sortNum:desc") {
code
title
}
# 频道
dictChannels(sort: "sortNum:desc") {
code
title
icon {
url
}
}
# 热点
busNews(where: { dict_categories: { code: "news_hot" } }) {
title
dict_channel {
code
title
icon {
url
}
}
dict_categories {
code
title
}
author
url
addtime
thumbnail {
url
}
}
}编写 flutter 代码
- 实例 entity
lib/common/entitys/gql_news.dart
// 首页
class GqlIndexResponseEntity {
GqlIndexResponseEntity({
this.dictCategories,
this.dictChannels,
this.busNews,
});
List dictCategories;
List dictChannels;
List busNews;
factory GqlIndexResponseEntity.fromJson(Map json) =>
GqlIndexResponseEntity(
dictCategories: List.from(
json["dictCategories"].map((x) => DictCategoryEntity.fromJson(x))),
dictChannels: List.from(
json["dictChannels"].map((x) => DictChannelEntity.fromJson(x))),
busNews: List.from(
json["busNews"].map((x) => GqlNewsResponseEntity.fromJson(x))),
);
Map toJson() => {
"dictCategories":
List.from(dictCategories.map((x) => x.toJson())),
"dictChannels": List.from(dictChannels.map((x) => x.toJson())),
"busNews": List.from(busNews.map((x) => x.toJson())),
};
}
// 新闻
class GqlNewsResponseEntity {
GqlNewsResponseEntity({
this.title,
this.dictChannel,
this.dictCategories,
this.author,
this.url,
this.addtime,
this.thumbnail,
});
String title;
DictChannelEntity dictChannel;
List dictCategories;
String author;
String url;
DateTime addtime;
ThumbnailEntity thumbnail;
factory GqlNewsResponseEntity.fromJson(Map json) =>
GqlNewsResponseEntity(
title: json["title"],
dictChannel: DictChannelEntity.fromJson(json["dict_channel"]),
dictCategories: List.from(
json["dict_categories"].map((x) => DictCategoryEntity.fromJson(x))),
author: json["author"],
url: json["url"],
addtime: DateTime.parse(json["addtime"]),
thumbnail: ThumbnailEntity.fromJson(json["thumbnail"]),
);
Map toJson() => {
"title": title,
"dict_channel": dictChannel.toJson(),
"dict_categories":
List.from(dictCategories.map((x) => x.toJson())),
"author": author,
"url": url,
"addtime":
"${addtime.year.toString().padLeft(4, '0')}-${addtime.month.toString().padLeft(2, '0')}-${addtime.day.toString().padLeft(2, '0')}",
"ThumbnailEntity": thumbnail.toJson(),
};
}
// 分类
class DictCategoryEntity {
DictCategoryEntity({
this.code,
this.title,
});
String code;
String title;
factory DictCategoryEntity.fromJson(Map json) =>
DictCategoryEntity(
code: json["code"],
title: json["title"],
);
Map toJson() => {
"code": code,
"title": title,
};
}
// 频道
class DictChannelEntity {
DictChannelEntity({
this.code,
this.title,
this.icon,
});
String code;
String title;
ThumbnailEntity icon;
factory DictChannelEntity.fromJson(Map json) =>
DictChannelEntity(
code: json["code"],
title: json["title"],
icon: ThumbnailEntity.fromJson(json["icon"]),
);
Map toJson() => {
"code": code,
"title": title,
"icon": icon.toJson(),
};
}
// 图
class ThumbnailEntity {
ThumbnailEntity({
this.url,
});
String url;
factory ThumbnailEntity.fromJson(Map json) =>
ThumbnailEntity(
url: json["url"],
);
Map toJson() => {
"url": url,
};
}
- api
lib/common/apis/gql_news.dart
/// 新闻
class GqlNewsAPI {
/// 首页
static Future indexPageInfo({
@required BuildContext context,
Map params,
}) async {
QueryResult response =
await GraphqlClientUtil.query(context: context, schema: GQL_INDEX_PAGE);
return GqlIndexResponseEntity.fromJson(response.data);
}
/// 翻页
static Future> newsPageList({
@required BuildContext context,
Map params,
}) async {
QueryResult response = await GraphqlClientUtil.query(
context: context, schema: GQL_NEWS_LIST, variables: params);
return response.data['busNews']
.map(
(item) => GqlNewsResponseEntity.fromJson(item))
.toList();
}
} - 界面业务代码
lib/pages/main/main.dart
GqlIndexResponseEntity _indexPageData; // 首页数据
// 读取所有数据
_loadAllData() async {
_indexPageData = await GqlNewsAPI.indexPageInfo(context: context);
...
if (mounted) {
setState(() {});
}
}
// 拉取推荐、新闻
_loadNewsData(
categoryCode, {
bool refresh = false,
}) async {
_selCategoryCode = categoryCode;
_newsPageList = await GqlNewsAPI.newsPageList(
context: context, params: {"category_code": categoryCode});
if (mounted) {
setState(() {});
}
}
...详见 git
资源
设计稿蓝湖预览
https://lanhuapp.com/url/lYuz1
密码: gSKl
蓝湖现在收费了，所以查看标记还请自己上传 xd 设计稿
商业设计稿文件不好直接分享, 可以加微信联系 ducafecat
© 猫哥