flutter如何访问mysql数据库

Flutter访问MySQL数据库可以通过REST API、Dart MySQL包、使用GraphQL来实现。其中，通过REST API访问是最常见和推荐的方式，因为它能够有效地将前端和后端进行解耦，并且方便管理和维护。下面我将详细介绍通过REST API的方式，以及其他两种方式的实现方法。

一、通过REST API访问MySQL数据库

1、什么是REST API

REST（Representational State Transfer）是一种软件架构风格，常用于Web服务开发。REST API通过HTTP协议来与服务器进行通信，能够实现前端与后端数据的交互。

2、为什么选择REST API

解耦前后端：前端与后端可以分别开发和维护，减少了相互之间的依赖。
安全性高：通过REST API，可以对数据请求进行身份验证和权限控制。
可扩展性：REST API可以轻松扩展和集成其他服务。

3、实现步骤

3.1、后端部分

我们需要一个后端服务器来处理Flutter发出的HTTP请求，并与MySQL数据库进行交互。后端服务器可以使用Node.js、Python（Flask/Django）、Java（Spring Boot）等技术来搭建。

示例：使用Node.js和Express框架

安装Node.js和Express

npm init -y npm install express mysql body-parser

创建服务器文件server.js

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
app.use(bodyParser.json());
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'your_database_name'
});
db.connect(err => {
    if (err) throw err;
    console.log('MySQL connected...');
});
app.get('/api/users', (req, res) => {
    let sql = 'SELECT * FROM users';
    db.query(sql, (err, results) => {
        if (err) throw err;
        res.json(results);
    });
});
app.post('/api/users', (req, res) => {
    let user = { name: req.body.name, email: req.body.email };
    let sql = 'INSERT INTO users SET ?';
    db.query(sql, user, (err, result) => {
        if (err) throw err;
        res.json({ id: result.insertId, ...user });
    });
});
app.listen(3000, () => {
    console.log('Server started on port 3000');
});

3.2、前端部分（Flutter）

添加http包
```
dependencies:
  http: ^0.13.3
```

发送HTTP请求

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  List users = [];
  @override
  void initState() {
    super.initState();
    fetchUsers();
  }
  fetchUsers() async {
    final response = await http.get(Uri.parse('http://localhost:3000/api/users'));
    if (response.statusCode == 200) {
      setState(() {
        users = json.decode(response.body);
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Users List'),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(users[index]['name']),
            subtitle: Text(users[index]['email']),
          );
        },
      ),
    );
  }
}

通过以上步骤，我们实现了通过REST API在Flutter中访问MySQL数据库。

二、通过Dart MySQL包访问MySQL数据库

1、Dart MySQL包介绍

Dart MySQL包提供了直接在Dart代码中与MySQL数据库交互的方法。虽然这种方式可以简化一些后端开发，但不推荐在生产环境中使用，因为它暴露了数据库连接信息，并且缺少REST API的安全性和可扩展性。

2、实现步骤

安装mysql1包
```
dependencies:
  mysql1: ^0.19.2
```

连接MySQL数据库

import 'package:mysql1/mysql1.dart';
void main() async {
  final conn = await MySqlConnection.connect(ConnectionSettings(
    host: 'localhost',
    port: 3306,
    user: 'root',
    db: 'your_database_name',
  ));
  var results = await conn.query('SELECT * FROM users');
  for (var row in results) {
    print('Name: ${row[1]}, Email: ${row[2]}');
  }
  await conn.close();
}

虽然这种方法较为直接，但不适合在生产环境中使用，主要用于开发和测试阶段。

三、通过GraphQL访问MySQL数据库

1、什么是GraphQL

GraphQL是一种用于API的查询语言，由Facebook开发。与REST API相比，GraphQL可以更灵活地获取数据，前端可以明确指定所需的数据结构和字段。

2、为什么选择GraphQL

灵活性高：前端可以指定需要的字段，减少了数据传输量。
单一入口：通过单个端点即可处理所有数据请求。
强类型：GraphQL拥有强类型系统，可以在编译时进行类型检查。

3、实现步骤

3.1、后端部分

示例：使用Node.js、Express和Apollo Server

安装依赖

npm install express apollo-server-express graphql mysql

创建服务器文件server.js

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const mysql = require('mysql');
const app = express();
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'your_database_name'
});
db.connect(err => {
    if (err) throw err;
    console.log('MySQL connected...');
});
const typeDefs = gql`
    type User {
        id: ID!
        name: String!
        email: String!
    }
    type Query {
        users: [User]
    }
    type Mutation {
        addUser(name: String!, email: String!): User
    }
`;
const resolvers = {
    Query: {
        users: () => new Promise((resolve, reject) => {
            db.query('SELECT * FROM users', (err, results) => {
                if (err) reject(err);
                resolve(results);
            });
        }),
    },
    Mutation: {
        addUser: (_, { name, email }) => new Promise((resolve, reject) => {
            const user = { name, email };
            db.query('INSERT INTO users SET ?', user, (err, result) => {
                if (err) reject(err);
                resolve({ id: result.insertId, ...user });
            });
        }),
    },
};
const server = new ApolloServer({ typeDefs, resolvers });
server.start().then(() => {
    server.applyMiddleware({ app });
    app.listen(4000, () => {
        console.log('Server started on port 4000');
    });
});

3.2、前端部分（Flutter）

安装graphql_flutter包

dependencies:
  graphql_flutter: ^5.0.0

发送GraphQL请求

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
void main() {
  final HttpLink httpLink = HttpLink('http://localhost:4000/graphql');
  final ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: httpLink,
      cache: GraphQLCache(store: InMemoryStore()),
    ),
  );
  runApp(MyApp(client: client));
}
class MyApp extends StatelessWidget {
  final ValueNotifier<GraphQLClient> client;
  MyApp({required this.client});
  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  final String fetchUsers = """
    query {
      users {
        id
        name
        email
      }
    }
  """;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Users List'),
      ),
      body: Query(
        options: QueryOptions(
          document: gql(fetchUsers),
        ),
        builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
          if (result.hasException) {
            return Text(result.exception.toString());
          }
          if (result.isLoading) {
            return Center(child: CircularProgressIndicator());
          }
          final List users = result.data['users'];
          return ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(users[index]['name']),
                subtitle: Text(users[index]['email']),
              );
            },
          );
        },
      ),
    );
  }
}

通过以上步骤，我们实现了通过GraphQL在Flutter中访问MySQL数据库。

总结：通过REST API、Dart MySQL包和GraphQL，Flutter可以有效地访问MySQL数据库。推荐使用REST API，因为它能够提供更高的安全性和可扩展性。通过REST API，前端和后端可以解耦，方便进行独立开发和维护。GraphQL则提供了更灵活的数据查询方式，但实现复杂度略高。Dart MySQL包虽然简单直接，但不适合在生产环境中使用。选择合适的方法可以帮助我们更好地实现Flutter与MySQL数据库的交互。

flutter如何访问mysql数据库

一、通过REST API访问MySQL数据库

1、什么是REST API

2、为什么选择REST API

3、实现步骤

3.1、后端部分

3.2、前端部分（Flutter）

二、通过Dart MySQL包访问MySQL数据库

1、Dart MySQL包介绍

2、实现步骤

三、通过GraphQL访问MySQL数据库

1、什么是GraphQL

2、为什么选择GraphQL

3、实现步骤

3.1、后端部分

3.2、前端部分（Flutter）

相关问答FAQs：