用vue和sql server实现一个论坛管理系统

要实现一个论坛管理系统，需要以下步骤：

1. 设计数据库：在 SQL Server 中创建数据库，并定义相应的表结构，包括用户表、帖子表、评论表等等。

2. 创建后端 API：使用 Node.js 或者其他后端技术创建 API，负责处理前端发送的请求并与数据库进行交互。

3. 创建前端页面：使用 Vue.js 创建前端页面并与后端 API 进行交互，实现用户注册、登录、发帖、评论、点赞等功能。

下面是具体的实现步骤：

1. 创建数据库

在 SQL Server 中创建数据库，可以使用 SQL Server Management Studio（SSMS）进行创建。创建数据库后，需要创建相应的表结构，例如：用户表（user）、帖子表（post）、评论表（comment）等等。表结构如下：

用户表（user）：

| 列名 | 类型 |
| --- | --- |
| id | int |
| username | varchar(50) |
| password | varchar(50) |

帖子表（post）：

| 列名 | 类型 |
| --- | --- |
| id | int |
| title | varchar(50) |
| content | varchar(max) |
| author_id | int |
| created_at | datetime |
| updated_at | datetime |

评论表（comment）：

| 列名 | 类型 |
| --- | --- |
| id | int |
| content | varchar(max) |
| post_id | int |
| author_id | int |
| created_at | datetime |

2. 创建后端 API

使用 Node.js 和 Express.js 创建后端 API，使用 mssql 库连接 SQL Server 数据库，实现用户注册、登录、发帖、评论、点赞等功能。

安装依赖：

npm install express mssql body-parser

创建 server.js 文件：

const express = require('express');
const bodyParser = require('body-parser');
const sql = require('mssql');

const app = express();
const port = process.env.PORT || 5000;

// 配置 bodyParser
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 配置数据库连接
const config = {
  user: 'username',
  password: 'password',
  server: 'localhost',
  database: 'forum'
};

// 注册接口
app.post('/api/register', (req, res) => {
  const { username, password } = req.body;
  const query = `INSERT INTO user (username, password) VALUES ('${username}', '${password}')`;
  sql.connect(config, err => {
    if (err) console.log(err);
    const request = new sql.Request();
    request.query(query, (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
  });
});

// 登录接口
app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  const query = `SELECT * FROM user WHERE username='${username}' AND password='${password}'`;
  sql.connect(config, err => {
    if (err) console.log(err);
    const request = new sql.Request();
    request.query(query, (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
  });
});

// 发帖接口
app.post('/api/posts', (req, res) => {
  const { title, content, author_id } = req.body;
  const query = `INSERT INTO post (title, content, author_id, created_at, updated_at) VALUES ('${title}', '${content}', ${author_id}, GETDATE(), GETDATE())`;
  sql.connect(config, err => {
    if (err) console.log(err);
    const request = new sql.Request();
    request.query(query, (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
  });
});

// 评论接口
app.post('/api/comments', (req, res) => {
  const { content, post_id, author_id } = req.body;
  const query = `INSERT INTO comment (content, post_id, author_id, created_at) VALUES ('${content}', ${post_id}, ${author_id}, GETDATE())`;
  sql.connect(config, err => {
    if (err) console.log(err);
    const request = new sql.Request();
    request.query(query, (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
  });
});

// 点赞接口
app.put('/api/posts/:id/like', (req, res) => {
  const { id } = req.params;
  const query = `UPDATE post SET likes=likes+1 WHERE id=${id}`;
  sql.connect(config, err => {
    if (err) console.log(err);
    const request = new sql.Request();
    request.query(query, (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
  });
});

// 获取帖子列表接口
app.get('/api/posts', (req, res) => {
  const query = 'SELECT * FROM post';
  sql.connect(config, err => {
    if (err) console.log(err);
    const request = new sql.Request();
    request.query(query, (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
  });
});

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

3. 创建前端页面

使用 Vue.js 创建前端页面，并使用 axios 库发送请求与后端 API 进行交互。

安装依赖：

npm install vue axios

创建 App.vue 文件：

<template>
  <div>
    <div v-if="!user">
      <h2>注册</h2>
      <input type="text" v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button @click="register">注册</button>
      <h2>登录</h2>
      <input type="text" v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button @click="login">登录</button>
    </div>
    <div v-else>
      <h2>发帖</h2>
      <input type="text" v-model="title" placeholder="标题">
      <textarea v-model="content" placeholder="内容"></textarea>
      <button @click="post">发帖</button>
      <h2>帖子列表</h2>
      <ul>
        <li v-for="post in posts" :key="post.id">
          <h3>{{ post.title }}</h3>
          <p>{{ post.content }}</p>
          <p>{{ post.likes }} <button @click="like(post.id)">赞</button></p>
          <h4>评论</h4>
          <ul>
            <li v-for="comment in post.comments" :key="comment.id">
              <p>{{ comment.content }}</p>
            </li>
          </ul>
          <input type="text" v-model="comment" placeholder="评论">
          <button @click="addComment(post.id)">评论</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null,
      username: '',
      password: '',
      title: '',
      content: '',
      posts: [],
      comment: ''
    };
  },
  methods: {
    register() {
      axios.post('/api/register', { username: this.username, password: this.password })
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    login() {
      axios.post('/api/login', { username: this.username, password: this.password })
        .then(res => {
          this.user = res.data[0];
          this.getPosts();
        })
        .catch(err => {
          console.log(err);
        });
    },
    post() {
      axios.post('/api/posts', { title: this.title, content: this.content, author_id: this.user.id })
        .then(res => {
          console.log(res.data);
          this.title = '';
          this.content = '';
          this.getPosts();
        })
        .catch(err => {
          console.log(err);
        });
    },
    addComment(postId) {
      axios.post('/api/comments', { content: this.comment, post_id: postId, author_id: this.user.id })
        .then(res => {
          console.log(res.data);
          this.comment = '';
          this.getPosts();
        })
        .catch(err => {
          console.log(err);
        });
    },
    like(postId) {
      axios.put(`/api/posts/${postId}/like`)
        .then(res => {
          console.log(res.data);
          this.getPosts();
        })
        .catch(err => {
          console.log(err);
        });
    },
    getPosts() {
      axios.get('/api/posts')
        .then(res => {
          console.log(res.data);
          this.posts = res.data.map(post => {
            post.comments = [];
            return post;
          });
          this.getComments();
        })
        .catch(err => {
          console.log(err);
        });
    },
    getComments() {
      this.posts.forEach(post => {
        axios.get(`/api/posts/${post.id}/comments`)
          .then(res => {
            console.log(res.data);
            post.comments = res.data;
          })
          .catch(err => {
            console.log(err);
          });
      });
    }
  }
};
</script>

以上就是用 Vue.js 和 SQL Server 创建论坛管理系统的步骤。当然，还有很多细节需要考虑，例如数据验证、权限控制、分页等等。