Express 06 制作留言板项目完

接上篇 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;

Express 06 制作留言板项目 完

相关推荐

Express 06 制作留言板项目完