用Vue和Node.js和SQL做一个案例

解决方案

通过一个具体的案例，展示如何使用Vue.js作为前端框架、Node.js作为后端服务以及SQL数据库进行数据存储的完整解决方案。我们将构建一个简单的任务管理应用，用户可以添加、删除和查看任务。通过这个案例，您将了解前后端交互的基本流程以及如何与SQL数据库进行数据操作。

环境准备

在开始之前，请确保您的环境中已安装以下工具：
- Node.js 和 npm
- MySQL 数据库
- Vue CLI 工具

项目结构

我们的项目将分为两个主要部分：前端和后端。
- 前端：使用Vue.js构建用户界面
- 后端：使用Node.js和Express处理API请求，并连接到SQL数据库

后端开发

设置Node.js和Express环境

初始化一个新的Node.js项目并安装必要的依赖项。

bash mkdir task-manager cd task-manager npm init -y npm install express body-parser mysql cors

创建一个名为server.js的文件：

javascript
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');</p>

<p>const app = express();</p>

<p>// Middleware
app.use(bodyParser.json());
app.use(cors());</p>

<p>// Create connection
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'taskdb'
});</p>

<p>// Connect to database
db.connect(err => {
    if (err) throw err;
    console.log('MySQL Connected...');
});</p>

<p>// Create DB
app.get('/createdb', (req, res) => {
    let sql = 'CREATE DATABASE taskdb';
    db.query(sql, err => {
        if (err) throw err;
        res.send('Database created...');
    });
});</p>

<p>// Create table
app.get('/createtable', (req, res) => {
    let sql = 'CREATE TABLE tasks(id int AUTO_INCREMENT, title VARCHAR(255), PRIMARY KEY(id))';
    db.query(sql, err => {
        if (err) throw err;
        res.send('Tasks Table Created...');
    });
});</p>

<p>// Insert a new task
app.post('/addtask', (req, res) => {
    const { title } = req.body;
    let sql = <code>INSERT INTO tasks (title) VALUES ('${title}');
    db.query(sql, err => {
        if (err) throw err;
        res.send('Task added...');
    });
});

// Get all tasks
app.get('/gettasks', (req, res) => {
    let sql = 'SELECT * FROM tasks';
    db.query(sql, (err, results) => {
        if (err) throw err;
        res.send(results);
    });
});

// Delete a task
app.delete('/deletetask/:id', (req, res) => {
    const id = req.params.id;
    let sql = DELETE FROM tasks WHERE id = ${id};
    db.query(sql, err => {
        if (err) throw err;
        res.send('Task deleted...');
    });
});

// Start server
app.listen('3000', () => {
    console.log('Server started on port 3000...');
});

前端开发

设置Vue.js环境

初始化一个新的Vue项目并安装Axios用于HTTP请求。

bash vue create task-manager-client cd task-manager-client npm install axios

在src/components/TaskList.vue中编写组件代码：

html

  <div>
    <h1>Task Manager</h1>
    
    <button>Add</button>
    <ul>
      <li>
        {{ task.title }}
        <button>Delete</button>
      </li>
    </ul>
  </div>
</p>


import axios from 'axios';

export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      axios.post('http://localhost:3000/addtask', { title: this.newTask })
        .then(() => {
          this.getTasks();
          this.newTask = '';
        });
    },
    deleteTask(id) {
      axios.delete(`http://localhost:3000/deletetask/${id}`)
        .then(() => {
          this.getTasks();
        });
    },
    getTasks() {
      axios.get('http://localhost:3000/gettasks')
        .then(response => {
          this.tasks = response.data;
        });
    }
  },
  mounted() {
    this.getTasks();
  }
};


<p>