Flutter连接MySQL云数据库
Flutter连接MySQL云数据库
- Flutter连接MySQL云数据库
-
- 使用mysql1插件
- 调用mysql1插件
- 将数据渲染至页面
Flutter连接MySQL云数据库
使用mysql1插件
在pub.dev上找到mysql1插件（点击前往），
添加mysql1插件到pubspec.yaml文件中：
mysql1: ^0.17.1
调用mysql1插件
首先在需要处引入包：
import 'package:mysql1/mysql1.dart' as mysql;
因为包中的Row会和布局中的Row控件冲突，所以这里务必重命名。
如何使用：
Future Database() async {
var settings = new mysql.ConnectionSettings(
host: 'rm-xxxxxx.mysql.rds.aliyuncs.com', // 这里以阿里云DMS为例
port: 3306,
user: 'your username', // 更换用户名
password: 'your psw', //更换密码
db: 'python_catch_info');
var conn = await mysql.MySqlConnection.connect(settings);
var result =
await conn.query("select * from movie_info ORDER BY movie_rank limit 20");
await conn.close();
print(result);
}
官方example：
import 'dart:async';
import 'package:mysql1/mysql1.dart';
Future main() async {
// Open a connection (testdb should already exist)
final conn = await MySqlConnection.connect(ConnectionSettings(
host: 'localhost',
port: 3306,
user: 'root',
db: 'testdb',
password: 'secret'));
// Create a table
await conn.query(
'CREATE TABLE users (id int NOT NULL AUTO_INCREMENT PRIMARY KEY, name varchar(255), email varchar(255), age int)');
// Insert some data
var result = await conn.query(
'insert into users (name, email, age) values (?, ?, ?)',
['Bob', '[email protected]', 25]);
print('Inserted row id=${result.insertId}');
// Query the database using a parameterized query
var results = await conn.query(
'select name, email, age from users where id = ?', [result.insertId]);
for (var row in results) {
print('Name: ${row[0]}, email: ${row[1]} age: ${row[2]}');
}
// Update some data
await conn.query('update users set age=? where name=?', [26, 'Bob']);
// Query again database using a parameterized query
var results2 = await conn.query(
'select name, email, age from users where id = ?', [result.insertId]);
for (var row in results2) {
print('Name: ${row[0]}, email: ${row[1]} age: ${row[2]}');
}
// Finally, close the connection
await conn.close();
}
将数据渲染至页面
展示数据是用python爬的某站电影排行榜，简单实现效果如下：
PS：M1芯片能跑Android虚拟机是真滴舒服
代码 垃圾如下：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mysql1/mysql1.dart' as mysql;
class TopMoviePage extends StatefulWidget {
const TopMoviePage({Key key}) : super(key: key);
@override
_TopMoviePageState createState() => _TopMoviePageState();
}
class _TopMoviePageState extends State<TopMoviePage> {
List movieList = new List();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('电影排行榜'),
),
body: ListView.builder(
itemCount: movieList.length,
itemBuilder: (context, index) => movieCard(index),
),
);
}
Widget movieCard(int index) {
var info = movieList[index];
var imageUrl = movieList[index]['cover_url'].toString();
var movieType = movieList[index]['types'].toString().replaceRange(
movieList[index]['types'].toString().length - 1,
movieList[index]['types'].toString().length,
'');
var movieActors = movieList[index]['actors'].toString().replaceRange(
movieList[index]['actors'].toString().length - 1,
movieList[index]['actors'].toString().length,
'等');
var moviePublicTime;
if (!movieList[index]['release_date'].toString().contains('-')) {
moviePublicTime = movieList[index]['release_date'].toString() + '年';
} else {
moviePublicTime =
movieList[index]['release_date'].toString().replaceFirst('-', '年');
moviePublicTime = moviePublicTime.replaceFirst('-', '月') + '日';
}
return Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
margin: EdgeInsets.only(top: 10, left: 8, right: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Color(0xffffffff),
offset: Offset(0.0, 6.0),
blurRadius: 0,
spreadRadius: 0)
]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 45,
height: 20,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.all(Radius.circular(3)),
),
child: RichText(
text: TextSpan(children: [
TextSpan(
text: 'No.',
style: TextStyle(fontSize: 12, color: Colors.white),
),
TextSpan(
text: info['movie_rank'].toString(),
style: TextStyle(fontSize: 12, color: Colors.white),
),
]),
)),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 100,
height: 150,
child: Image.network(
imageUrl,
fit: BoxFit.fill,
),
),
SizedBox(
width: 10,
),
Container(
// height: 150,
width: 250,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
info['title'].toString(),
style: TextStyle(
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
RichText(
text: TextSpan(children: [
TextSpan(
text: '评分：',
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w400),
),
TextSpan(
text: info['score'].toString(),
style: TextStyle(fontSize: 16, color: Colors.black),
),
]),
),
RichText(
text: TextSpan(children: [
TextSpan(
text: '时间：',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Colors.black),
),
TextSpan(
text: moviePublicTime,
style: TextStyle(fontSize: 16, color: Colors.black),
),
]),
),
RichText(
softWrap: true,
text: TextSpan(children: [
TextSpan(
text: '类型：',
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w400),
),
TextSpan(
text: movieType,
style: TextStyle(fontSize: 16, color: Colors.black),
),
]),
),
RichText(
softWrap: true,
text: TextSpan(children: [
TextSpan(
text: '主演：',
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w400),
),
TextSpan(
text: movieActors,
style: TextStyle(fontSize: 16, color: Colors.black),
),
]),
),
],
),
)
],
)
],
),
);
}
Future Database() async {
var settings = new mysql.ConnectionSettings(
host: 'rm-xxxxxxxxxx.mysql.rds.aliyuncs.com',
port: 3306,
user: 'user',
password: 'psw',
db: 'python_catch_info');
var conn = await mysql.MySqlConnection.connect(settings);
var result = await conn
.query("select * from movie_info ORDER BY movie_rank limit 20");
await conn.close();
setState(() {
movieList = result.toList();
});
}
@override
void initState() {
super.initState();
Database();
}
}
End