数据库如何传到前台页面

数据库传到前台页面的方法包括：使用服务器端脚本、利用API、通过前端框架、使用模板引擎。 其中，使用服务器端脚本是最常见且直观的方法。服务器端脚本（如PHP、Node.js等）可以直接从数据库中提取数据，并将其嵌入HTML页面中，确保数据在传递过程中保持一致性和安全性。

一、使用服务器端脚本

服务器端脚本是最传统也是最广泛使用的方法之一。通过PHP、Node.js、ASP.NET等服务器端语言，开发者可以直接与数据库交互，并将数据传递到前台页面。

1. PHP与MySQL的结合

PHP与MySQL的结合是最经典的数据库和服务器端脚本搭配。通过PHP脚本，开发者可以查询数据库并将结果嵌入HTML页面。

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  // 输出数据
  while($row = $result->fetch_assoc()) {
    echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
  }
} else {
  echo "0 results";
}
$conn->close();
?>

2. Node.js与MongoDB的结合

Node.js与MongoDB的结合利用JavaScript的全栈开发能力，使得前后端代码可以更一致。

const express = require('express');
const mongoose = require('mongoose');
const app = express();
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true, useUnifiedTopology: true});
const Schema = mongoose.Schema;
const TestSchema = new Schema({
  name: String,
  age: Number
});
const Test = mongoose.model('Test', TestSchema);
app.get('/', async (req, res) => {
  const data = await Test.find();
  res.send(data);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

二、利用API

通过创建RESTful API或GraphQL API，前端可以通过HTTP请求获取数据库数据。这种方法的优点是前后端完全分离，灵活性更高。

1. RESTful API

RESTful API使用HTTP动词（GET、POST、PUT、DELETE）进行操作，易于理解和实现。

from flask import Flask, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
db = SQLAlchemy(app)
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
@app.route('/users', methods=['GET'])
def get_users():
    users = User.query.all()
    return jsonify([{'id': user.id, 'name': user.name} for user in users])
if __name__ == '__main__':
    app.run(debug=True)

前端可以通过fetch或axios等库来请求这个API：

fetch('/users')
  .then(response => response.json())
  .then(data => console.log(data));

2. GraphQL API

GraphQL API允许前端精确地查询所需的数据，避免数据冗余和网络开销。

const { ApolloServer, gql } = require('apollo-server');
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test', {useNewUrlParser: true, useUnifiedTopology: true});
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
  }
  type Query {
    users: [User]
  }
`;
const resolvers = {
  Query: {
    users: () => User.find()
  }
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

三、通过前端框架

前端框架如React、Vue、Angular等通常配合后端API使用，但它们也支持直接从数据库读取数据，尤其是在全栈框架如Next.js和Nuxt.js中。

1. React与API结合

React通过组件和状态管理，可以轻松地请求和显示API数据。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    axios.get('/users')
      .then(response => setUsers(response.data))
      .catch(error => console.error(error));
  }, []);
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default App;

2. Vue与API结合

Vue通过其响应式数据绑定和组件化设计，也能方便地展示从API获取的数据。

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

四、使用模板引擎

模板引擎如EJS、Pug等可以直接在服务器端生成HTML，并将数据插入其中。这种方法适用于需要快速生成静态页面的场景。

1. 使用EJS模板引擎

EJS是一种简单的模板引擎，能够在Node.js中使用，并将数据嵌入HTML。

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  const data = { users: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }] };
  res.render('index', data);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在EJS模板文件（index.ejs）中：

<!DOCTYPE html>
<html>
<head>
  <title>Users</title>
</head>
<body>
  <h1>Users</h1>
  <ul>
    <% users.forEach(user => { %>
      <li><%= user.name %></li>
    <% }) %>
  </ul>
</body>
</html>

2. 使用Pug模板引擎

Pug是一种简洁的模板引擎，能够生成高度可读的HTML代码。

const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.get('/', (req, res) => {
  const data = { users: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }] };
  res.render('index', data);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在Pug模板文件（index.pug）中：

doctype html html head title Users body h1 Users ul each user in users li= user.name

五、数据传输的安全性与优化

将数据库数据传输到前台页面时，安全性和性能优化是关键点。

1. 防止SQL注入

无论使用何种数据库和服务器端脚本，防止SQL注入是首要任务。使用参数化查询或ORM（对象关系映射）工具可以有效防止SQL注入。

$stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests WHERE lastname = ?");
$stmt->bind_param("s", $lastname);
$stmt->execute();

2. 数据缓存

为了提高性能，可以使用缓存机制如Redis、Memcached等，将频繁访问的数据存储在缓存中，减少数据库查询次数。

const redis = require('redis');
const client = redis.createClient();
app.get('/users', (req, res) => {
  client.get('users', (err, users) => {
    if (users) {
      return res.json(JSON.parse(users));
    }
    User.find().then(users => {
      client.setex('users', 3600, JSON.stringify(users));
      res.json(users);
    });
  });
});

3. 数据分页

对于大量数据，可以使用分页技术，避免一次性加载所有数据导致的性能问题。

app.get('/users', async (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const skip = (page - 1) * limit;
  const users = await User.find().skip(skip).limit(limit);
  res.json(users);
});