javascript创建一个在线留言版
时间: 2023-08-13 17:46:25 浏览: 44
创建一个在线留言板需要使用前端和后端技术,这里提供一个简单的示例,使用前端框架Vue.js和后端框架Node.js和Express.js:
1. 创建一个Vue.js项目
```
vue create message-board
```
2. 安装axios和bootstrap
```
npm install axios bootstrap
```
3. 在src目录下创建一个components文件夹,在其中创建一个MessageBoard.vue组件
```
<template>
<div>
<h1>在线留言板</h1>
<form @submit.prevent="addMessage">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control" id="name" v-model="name">
</div>
<div class="form-group">
<label for="message">留言:</label>
<textarea class="form-control" id="message" rows="3" v-model="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<hr>
<div v-for="(msg, index) in messages" :key="index">
<h5>{{msg.name}}</h5>
<p>{{msg.message}}</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'MessageBoard',
data() {
return {
name: '',
message: '',
messages: []
}
},
methods: {
addMessage() {
axios.post('/api/messages', {
name: this.name,
message: this.message
})
.then(res => {
this.messages.unshift(res.data);
this.name = '';
this.message = '';
})
.catch(err => {
console.log(err);
});
}
},
created() {
axios.get('/api/messages')
.then(res => {
this.messages = res.data;
})
.catch(err => {
console.log(err);
});
}
}
</script>
```
4. 在src目录下创建一个server文件夹,在其中创建一个index.js文件
```
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(cors());
app.use(express.json());
let messages = [];
app.get('/api/messages', (req, res) => {
res.json(messages);
});
app.post('/api/messages', (req, res) => {
const { name, message } = req.body;
const newMessage = {
id: messages.length + 1,
name,
message
};
messages.unshift(newMessage);
res.json(newMessage);
});
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
```
5. 在根目录下创建一个package.json文件
```
{
"name": "message-board",
"version": "1.0.0",
"description": "",
"main": "server/index.js",
"dependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"express": "^4.17.1"
},
"scripts": {
"start": "node server/index.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
```
6. 运行应用程序
```
npm start
```
7. 在浏览器中打开http://localhost:3000/,即可看到在线留言板
以上是一个简单的在线留言板的示例,你可以根据自己的需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)