用node和vue3和mysql写一个用户登陆后评论新闻，前端页面注册后评论，后台管理系统可以查看，具体代码实现

为了创建一个基于Node.js、Vue 3和MySQL的用户登录评论系统，我们需要分步实现前端和后端的功能。以下是简化的概述以及关键代码片段：

**后端（Node.js + Express + MySQL）**

1. 安装依赖：

npm init -y
npm install express mysql body-parser cors dotenv

2. 创建数据库连接 (db.js)：

const { createConnection } = require('mysql');
require('dotenv').config();

const connection = createConnection({
  host: process.env.MYSQL_HOST,
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DB
});

connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to the MySQL server');
});

3. 用户模型 (User.js):

const Sequelize = require('sequelize');

// 在此处定义User模型关联
module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define('User', {
    // 添加用户的字段...
  }, {
    timestamps: false, // 如果不需要时间戳
  });

  return User;
};

4. 注册和登录路由 (auth.js):

const router = require('express').Router();
const jwt = require('jsonwebtoken');
const User = require('./models/User');

router.post('/register', async (req, res) => {
  // 用户注册逻辑...
});

router.post('/login', async (req, res) => {
  // 用户登录验证逻辑...
  const token = jwt.sign({ userId: req.user.id }, 'secretKey');
  res.json({ token });
});

// 后面添加评论、管理API等

5. 前端（Vue 3 + Axios）:

1. 设置axios实例：

import axios from 'axios';
import { useStore } from './store';

export const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  headers: { 'X-Custom-Token': localStorage.getItem('token') || '' },
});

2. 注册组件:

<template>
  <!-- 注册表单 -->
</template>

<script>
import { register } from '@/api/auth'; // 假设我们有这个方法

export default {
  methods: {
    async register() {
      await register(this.formData);
    }
  },
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    };
  }
};
</script>

3. 登录组件:

<!-- 类似于上面的结构，使用login方法和JWT处理登出状态 -->

<template>
  <button @click="handleSubmit">登录</button>
</template>

<script>
import { login } from '@/api/auth';

export default {
  methods: {
    handleSubmit() {
      login(this.formData).then(() => {
        // 存储token到localStorage
      });
    }
  },
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    };
  }
};
</script>

4. 前端请求评论和管理API（假设Comment.vue）:

<template>
  <button @click="createComment()">发表评论</button>
</template>

<script>
import { api } from '@/utils/api';

export default {
  methods: {
    async createComment() {
      try {
        await api.post('/comments', yourCommentData);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

5. 后台管理系统（假设Admin.vue）:

<!-- 管理员可以获取、更新和删除评论 -->

以上是一个基本框架，实际项目中还需要考虑错误处理、数据验证、状态管理（如Vuex）、路由设置和权限控制。