接上篇 Express 06 制作留言板项目_Sengoku_Xingzi的博客-CSDN博客
此篇完成 增删 刷新文件 的基本操作
完整路由文件和 前端文件放 最后了
我们开始弄前端
hello.html vue的固定格式 写上 运行测试 是否成功 每样东西都要先测试的
写dom
<body>
<div id="app">
<div><input type="text" v-model="title" /></div>
<div>
<textarea
name=""
id=""
cols="30"
rows="10"
v-model="content"
></textarea>
</div>
<div><button @click="submit">提交</button></div>
</div>
<script>
Vue.createApp({
data() {
return {
title: "",content: "",};
},methods: {
submit() {
console.log(this.title,this.content);
},},}).mount("#app");
</script>
</body>测试后端传值 MessageRouter.js 代码在图下 后端成功传值
const { application } = require("express");
const [db] = require("../db/dbutils");
const express = require("express");
// 拿到路由
var router = express.Router();
// 一样先做个路由测试
router.get("/test",(req,res) => {
db.all("select * from `message`",(err,rows) => {
res.send(rows);
});
});
// 这里是后端发送请求
router.post("/add",res) => {
let message = req.body;
db.run(
"INSERT INTO `message`(`id`,`title`,`content`,`create_time`) VALUES(?,?,?)",[
new Date().getTime(),message.title,message.content,new Date().getTime(),],rows) => {
if (err == null) {
res.send({
code: 200,message: "添加成功",});
} else {
res.send({
code: 500,message: "添加失败",});
}
}
);
});
// 路由导出
module.exports = router;
接下来测试前端传值 需要axios 添加成功
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
submit() {
console.log(this.title,this.content);
axios
.post("/message/add",{
title: this.title,content: this.content,})
.then(function (response) {
console.log(response);
});
},显示 内容 并实现添加后 删除后 刷新显示内容
// 得到所有内容 的接口 在路由文件写
router.get("/list",rows) => {
res.send(rows);
});
});下面是 前端文件 hello.html
<!-- 双绑数据可以看 -->
<!-- {{messages}} -->
<!-- 做点样式 -->
<div v-for="(message,index) in messages">
<div>
标题:{{message.title}}
<button @click="deleteMessage(message.id)">删除</button>
</div>
<div>内容:{{message.content}}</div>
<hr />
</div> // 页面刷新时运行此方法
created() {
this.loadMessage();
},//开始获得 数据 写在methods 方法里面
loadMessage() {
var that = this;
axios.get("/message/list").then(function (response) {
// 这里的this 指向axios 所以指向不了vue的this
that.messages = response.data;
console.log(response.data);
});
},删除数据
后端： 路由文件
// 删除数据
router.delete("/delete",res) => {
const deleteId = req.query.id;
db.all("delete from `message` where `id` = ? ",[deleteId],rows) => {
if (err == null) {
res.send({
code: 200,message: "删除成功",});
} else {
res.send({
code: 500,message: "删除失败",});
}
});
});
前端 hello.html 文件
deleteMessage(id) {
var that = this;
axios.delete(`/message/delete?id=${id}`).then(function (response) {
that.loadMessage();
});
},完
完整路由文件和 前端文件放这里
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="(message,index) in messages">
<div>
标题:{{message.title}}
<button @click="deleteMessage(message.id)">删除</button>
</div>
<div>内容:{{message.content}}</div>
<hr />
</div>
<div>
<input type="text" v-model="title" />
</div>
<div>
<textarea
name=""
id=""
cols="30"
rows="10"
v-model="content"
></textarea>
</div>
<div><button @click="submit">提交</button></div>
</div>
<script>
Vue.createApp({
data() {
return {
messages: [],title: "",created() {
this.loadMessage();
},methods: {
loadMessage() {
var that = this;
axios.get("/message/list").then(function (response) {
console.log(response);
that.messages = response.data;
});
},deleteMessage(id) {
var that = this;
axios.delete(`/message/delete?id=${id}`).then(function (response) {
that.loadMessage();
});
},submit() {
var that = this;
axios
.post("/message/add",})
.then(function (response) {
console.log(response);
that.loadMessage();
});
},}).mount("#app");
</script>
</body>
</html>
路由文件
const express = require("express");
const { db } = require("../db/dbutils")
var router = express.Router();
router.get("/test",res) => {
db.all("select * from `message`",rows) => {
res.send(rows)
})
})
router.get("/list",rows) => {
res.send(rows)
})
})
router.delete("/delete",res) => {
const deleteId = req.query.id;
db.all("delete from `message` where `id` = ? ",rows) => {
if (err == null) {
res.send({
code: 200,message: "删除成功"
})
} else {
res.send({
code: 500,message: "删除失败"
})
}
})
})
router.post("/add",res) => {
let message = req.body;
db.run("INSERT INTO `message`(`id`,[new Date().getTime(),new Date().getTime()],message: "添加成功"
})
} else {
res.send({
code: 500,message: "添加失败"
})
}
})
})
module.exports = router;
原文地址：https://blog.csdn.net/Sengoku_Xingzi
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。