基于vue和bootstrap实现简单留言板功能

下面我将为您详细讲解如何基于vue和bootstrap实现简单留言板功能的完整攻略。

环境准备

在开始之前，我们需要确保环境已经准备好，并且已经安装以下工具：

Node.js
Vue CLI
Bootstrap

如果您还没有安装这些工具，可以访问以下链接下载并安装：

Node.js：https://nodejs.org/
Vue CLI：https://cli.vuejs.org/
Bootstrap：https://getbootstrap.com/

创建Vue工程

首先，我们需要创建一个Vue工程来实现留言板的功能。打开命令行工具，进入到您的工程目录，执行以下命令：

vue create message-board

这个命令将会创建一个名为message-board的Vue工程，并安装必要的依赖。

安装Bootstrap

接着，我们需要安装Bootstrap，以便能够使用Bootstrap的组件和样式。执行以下命令安装：

npm install bootstrap

安装完成后，需要在Vue的入口文件main.js中导入并使用Bootstrap：

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

实现留言板组件

接下来，我们将会实现一个留言板组件，这个组件包含一个输入框和一个提交按钮。当用户点击提交按钮时，组件将会向后端发送请求，保存用户输入的留言信息。

在Vue的源代码目录中，创建一个名为MessageBoard.vue的组件文件，内容如下：

<template>
  <div>
    <div class="form-group">
      <label>留言：</label>
      <input type="text" v-model="message" class="form-control" placeholder="请输入留言内容">
    </div>
    <button class="btn btn-primary" @click="submitMessage">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    submitMessage() {
      // 向后端发送请求，保存留言信息
    }
  }
}
</script>

在这个组件中，我们定义了一个message变量，用于绑定输入框的值。当用户输入留言信息后，点击提交按钮时，会执行submitMessage方法，该方法中会向后端发送请求，保存留言信息。

实现后端服务

最后，我们需要实现后端服务，用于保存和查询用户提交的留言信息。这里我们使用Node.js和Express来实现简单的后端服务。

在Vue工程根目录中，创建一个名为server.js的文件，内容如下：

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

// 配置body-parser中间件
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

// 存储留言信息的数组
const messages = []

// 提交留言的接口
app.post('/submit-message', (req, res) => {
  const message = req.body.message
  messages.push(message)
  res.send('OK')
})

// 获取留言的接口
app.get('/get-messages', (req, res) => {
  res.send(messages)
})

// 监听端口并启动服务
app.listen(3000, () => {
  console.log('Server is running on port 3000...')
})

在这个服务中，我们定义了两个接口，一个用于保存留言信息，一个用于获取留言信息。当用户提交留言信息时，会向后端发送POST请求，服务会将留言信息保存在messages数组中。当用户请求获取留言信息时，服务会将messages数组中的内容返回。

完整示例说明

在这里，我将会指导您实现一个完整的留言板功能，包括前端Vue工程和后端Node.js服务。

创建Vue工程

vue create message-board

安装Bootstrap

npm install bootstrap

在main.js中导入并使用Bootstrap：

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

实现留言板组件

在Vue的源代码目录中，创建一个名为MessageBoard.vue的组件文件，内容如下：

<template>
  <div>
    <div class="form-group">
      <label>留言：</label>
      <input type="text" v-model="message" class="form-control" placeholder="请输入留言内容">
    </div>
    <button class="btn btn-primary" @click="submitMessage">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    submitMessage() {
      fetch('/api/submit-message', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          message: this.message
        })
      }).then(() => {
        alert('提交成功')
        this.message = ''
      })
    }
  }
}
</script>

在这个组件中，我们定义了一个message变量，用于绑定输入框的值。当用户输入留言信息后，点击提交按钮时，会执行submitMessage方法，该方法中会向后端发送POST请求，保存留言信息。

实现后端服务

在Vue工程根目录中，创建一个名为server.js的文件，内容如下：

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

// 配置body-parser中间件
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

// 存储留言信息的数组
const messages = []

// 提交留言的接口
app.post('/api/submit-message', (req, res) => {
  const message = req.body.message
  messages.push(message)
  res.send('OK')
})

// 获取留言的接口
app.get('/api/get-messages', (req, res) => {
  res.send(messages)
})

// 监听端口并启动服务
app.listen(3000, () => {
  console.log('Server is running on port 3000...')
})

在App.vue中使用留言板组件

在App.vue文件中，添加MessageBoard组件并使用MessageBoard：

<template>
  <div>
    <h1>留言板</h1>
    <MessageBoard />
    <hr>
    <h2>留言列表</h2>
    <div v-for="(message, index) in messages" :key="index">
      {{ message }}
    </div>
  </div>
</template>

<script>
import MessageBoard from '@/components/MessageBoard.vue'

export default {
  components: {
    MessageBoard
  },

  data() {
    return {
      messages: []
    }
  },

  mounted() {
    this.getMessages()
  },

  methods: {
    getMessages() {
      fetch('/api/get-messages')
        .then(res => res.json())
        .then(data => {
          this.messages = data
        })
    }
  }
}
</script>

在这个组件中，我们引入了MessageBoard组件，并在页面上使用它。同时，我们使用了v-for指令渲染留言列表，将留言信息显示在页面上。