连接 MySQL
数据库需要使用服务器端语言，比如
PHP、Python、Java 等，以及相应的
数据库连接库。这里以
PHP 和 PDO 为例来介绍如何连接 MySQL
数据库，并使用 Vue.js 和 MVC 架构进行前端开发。
1. 安装
PHP 和 MySQL
首先
需要安装
PHP 和 MySQL，具体安装方式可以自行搜索。
2. 创建
数据库
在 MySQL 中创建一个
数据库，并创建一个表，用于存储
数据。以下是创建表的 SQL 语句：
```
CREATE TABLE `books` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`author` varchar(255) NOT NULL,
`price` decimal(10,2) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
3. 编写
PHP 文件连接
数据库
在
PHP 中连接 MySQL
数据库可以使用 PDO，以下是一个示例代码：
```
php
<?
php
// 连接
数据库
$dsn = "mysql:host=localhost;dbname=database_name";
$username = "username";
$password = "password";
try {
$pdo = new PDO($dsn, $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "
数据库连接失败：".$e->getMessage();
exit;
}
?>
```
其中，`$dsn` 变量是
数据库连接字符串，包含
数据库类型、主机名、
数据库名等信息。`$username` 和 `$password` 变量是
数据库用户名和密码。
4. 编写
PHP 文件获取
数据
在
PHP 中获取
数据库中的
数据可以使用 PDO 的 `query` 方法，例如：
```
php
<?
php
// 获取
数据
$sql = "SELECT * FROM books";
$stmt = $pdo->query($sql);
$books = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 输出
数据
header('Content-Type: application/json');
echo json_encode($books);
?>
```
其中，`$sql` 变量是 SQL 查询语句，`$stmt` 变量是 PDOStatement 对象，`$books` 变量是一个包含所有
数据的数组。最后，使用 `json_encode` 函数将数组转换成 JSON 格式输出。
5. 编写 Vue.js 组件
使用 Vue.js 开发前端页面，可以将页面拆分成
多个组件，每个组件都是一个独立的 Vue 实例。以下是一个获取
数据并显示在页面上的 Vue 组件示例：
```html
<template>
<div>
<h1>图书列表</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
books: []
}
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
fetch('/api/books.
php')
.then(response => response.json())
.then(data => this.books = data)
.catch(error => console.error(error));
}
}
}
</script>
```
其中，`fetchData` 方法使用 `fetch` 函数向服务器发起请求，并将返回的 JSON
数据赋值给组件的 `books` 属性。`v-for` 指令用于循环遍历 `books` 数组，`v-bind` 指令用于将
数据绑定到 HTML 元素上。
6. 编写 MVC 控制器
在 MVC 架构中，控制器负责处理用户请求并返回响应。以下是一个简单的控制器示例，用于返回图书列表
数据：
```
php
<?
php
class BookController {
public function actionList() {
// 获取
数据
$
model = new Book
Model();
$books = $
model->getAll();
// 渲染视图
$view = new View();
$view->render('book/list', ['books' => $books]);
}
}
?>
```
其中，`Book
Model` 是一个模型类，用于操作
数据库并获取
数据。`View` 是一个视图类，用于渲染 HTML 页面并将
数据传递给页面。
7. 编写 MVC 模型
在 MVC 架构中，模型负责处理
数据，例如从
数据库中获取
数据。以下是一个简单的模型示例，用于从
数据库中获取图书列表
数据：
```
php
<?
php
class Book
Model {
public function getAll() {
// 连接
数据库
$dsn = "mysql:host=localhost;dbname=database_name";
$username = "username";
$password = "password";
$pdo = new PDO($dsn, $username, $password);
// 获取
数据
$sql = "SELECT * FROM books";
$stmt = $pdo->query($sql);
$books = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $books;
}
}
?>
```
8. 编写 MVC 视图
在 MVC 架构中，视图负责渲染 HTML 页面并将
数据传递给页面。以下是一个简单的视图示例，用于显示图书列表
数据：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书列表</title>
</head>
<body>
<h1>图书列表</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<?
php foreach ($books as $book) { ?>
<tr>
<td><?
php echo $book['id']; ?></td>
<td><?
php echo $book['title']; ?></td>
<td><?
php echo $book['author']; ?></td>
<td><?
php echo $book['price']; ?></td>
</tr>
<?
php } ?>
</tbody>
</table>
</body>
</html>
```
其中，`$books` 变量是从控制器传递过来的
数据，使用
PHP 的 `foreach` 循环遍历
数据并将
数据显示在 HTML 页面上。
9. 整合前后端代码
最后，将前端代码和后端代码进行整合，并将
PHP 文件放在服务器上运行即可。以下是一个简单的目录结构示例：
```
project/
├── api/
│ └── books.
php
├── controllers/
│ └── BookController.
php
├──
models/
│ └── Book
Model.
php
├── views/
│ └── book/
│ └── list.
php
└── public/
├── index.html
└── js/
└── app.js
```
其中，`api` 目录存放
PHP 文件，用于处理 AJAX 请求；`controllers` 目录存放控制器类；`
models` 目录存放模型类；`views` 目录存放视图文件；`public` 目录存放前端代码，包括 HTML、CSS、JS 等文件。
在 `api/books.
php` 文件中，使用 `BookController` 类处理请求，并返回 JSON 格式的
数据：
```
php
<?
php
require_once '../controllers/BookController.
php';
$controller = new BookController();
$data = $controller->actionList();
header('Content-Type: application/json');
echo json_encode($data);
?>
```
在 `public/index.html` 文件中，引入 Vue.js 和 app.js 文件，并使用 `BookList` 组件显示图书列表：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书列表</title>
</head>
<body>
<div id="app">
<book-list></book-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
</body>
</html>
```
在 `public/js/app.js` 文件中，定义 `BookList` 组件并使用 `fetch` 函数获取
数据：
```js
Vue.component('book-list', {
template: `
<div>
<h1>图书列表</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
`,
data() {
return {
books: []
}
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
fetch('/api/books.
php')
.then(response => response.json())
.then(data => this.books = data)
.catch(error => console.error(error));
}
}
});
new Vue({
el: '#app'
});
```
以上就是使用 MVC 和 Vue.js 连接 MySQL
数据库的一个简单示例。实际开发中，还
需要考虑安全性、性能、代码复用等问题。
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
