nuxt + express +mysql

基本要求
确保您的开发环境已经安装了 Node.js、npm、MySQL 以及 Vue CLI。

步骤 1: 创建 Nuxt.js 项目
使用 create-nuxt-app 创建一个新的 Nuxt.js 项目：

npx create-nuxt-app nuxt-crud-demo

选择所需的配置。一旦项目创建完毕，进入项目文件夹：

cd nuxt-crud-demo

步骤 2: 添加 Express 作为服务器
在项目根目录中创建一个名为 server 的文件夹。在 server 文件夹内创建一个 index.js 文件，用于设置 Express 服务器。

安装 Express:

npm install express

在 server/index.js 中添加基础服务器设置：

const express = require('express');
const app = express();

app.use(express.json());

const PORT = 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

步骤 3: 配置 Sequelize 和 MySQL
安装 Sequelize 和 MySQL2:

npm install sequelize mysql2

在 server 文件夹中创建一个 Sequelize 配置。这涉及配置数据库连接和模型。这里只是一个示例：

// server/models/index.js
const Sequelize = require('sequelize');

const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql'
});

const Model = Sequelize.Model;

class User extends Model {}
User.init({
  username: {
    type: Sequelize.STRING,
    allowNull: false
  },
  // 其他字段...
}, {
  sequelize,
  modelName: 'user'
});

sequelize.sync();

module.exports = {
  User
};

步骤 4: 创建后端 CRUD 路由
在 server/index.js 中添加 CRUD 路由：

const { User } = require('./models');

// 创建用户
app.post('/users', async (req, res) => {
  try {
    const user = await User.create(req.body);
    res.json(user);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// 获取用户列表
app.get('/users', async (req, res) => {
  const users = await User.findAll();
  res.json(users);
});

// 更新用户
app.put('/users/:id', async (req, res) => {
  try {
    const user = await User.findByPk(req.params.id);
    if (user) {
      await user.update(req.body);
      res.json(user);
    } else {
      res.status(404).json({ error: 'User not found' });
    }
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// 删除用户
app.delete('/users/:id', async (req, res) => {
  try {
    const user = await User.findByPk(req.params.id);
    if (user) {
      await user.destroy();
      res.json({ message: 'User deleted' });
    } else {
      res.status(404).json({ error: 'User not found' });
    }
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

步骤 5: 创建前端页面
在 Nuxt.js 项目中创建用于增删改查的前端页面。例如，在 pages/index.vue 中，您可以使用 Axios（如果您在创建项目时选择了它）来与 Express 后端进行交互：

<template>
  <div>
    <!-- 用户界面和逻辑... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      // 其他数据...
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await this.$axios.get('http://localhost:3001/users');
        this.users = response.data

https://github.com/stupidzhang/nuxtPractice