Express 06 制作留言板项目完

Sengoku_Xingzi

于 2022-09-23 14:55:10 发布

阅读量245

点赞数

分类专栏： Express 文章标签： express

本文链接：https://blog.csdn.net/Sengoku_Xingzi/article/details/127005667

版权

Express 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

接上篇 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", (req, 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(),
    ],
    (err, 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", (req, res) => {
  db.all("select * from `message`", (err, 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", (req, res) => {
  const deleteId = req.query.id;
  db.all("delete from `message` where `id` = ? ", [deleteId], (err, 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: "",
            content: "",
          };
        },
        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", {
                title: this.title,
                content: this.content,
              })
              .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", (req, res) => {
    db.all("select * from `message`", (err, rows) => {
        res.send(rows)
    })
})

router.get("/list", (req, res) => {
    db.all("select * from `message`", (err, rows) => {
        res.send(rows)
    })
})

router.delete("/delete", (req, res) => {
    const deleteId = req.query.id;
    db.all("delete from `message` where `id` = ? ", [deleteId], (err, rows) => {
        if (err == null) {
            res.send({
                code: 200,
                message: "删除成功"
            })
        } else {
            res.send({
                code: 500,
                message: "删除失败"
            })
        }
    })
})

router.post("/add", (req, 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()], (err, rows) => {
        if (err == null) {
            res.send({
                code: 200,
                message: "添加成功"
            })
        } else {
            res.send({
                code: 500,
                message: "添加失败"
            })
        }
    })
})


module.exports = router;