vue 情侣空间 代办模块 记录

待办事项

感觉实现过程比较愚蠢 唉… 没办法this指向问题太懵了

功能：
录入信息 点击添加 会添加到数据库 然后再自动渲染到页面显示
页面显示 分两种 一种是未完成的 一种是已完成的
点击清空可以 清空所有已完成的项目

实现：

1. 添加待办 点击添加按钮 发送信息给数据库存储 然后根据循环时的index 和 response返回的insertId信息 形成json 插入数组响应式自动更新
2. 点击完成和未完成同理 发送给数据库改变此条数据数据库的state的状态信息 然后 再调用读取数据方法 重新渲染页面
3. 点击删除 就是根据wait_id删除数据库数据 根据index 删除页面上的数据
4. 点击清除 就是在数据库执行 删除state为1的数据 再调用读取数据进行渲染

demo：
index.js

// node 后端服务器

const userApi = require('./api/userApi');
const waitApi = require('./api/waitApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 后端api路由
app.use('/api/user', userApi);
app.use('/api/wait', waitApi);

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

WaitThing.vue

<template>
<div calss="wait_thing">
		<table id="wait" class="add_title">
          <tr>
            <td id="wait_color" class="color_title"></td>
            <td ><input id="wait_thing" type="text" placeholder="等待主人做的事情..." v-model="wait_content"/></td>
            <td ><a href="#" class="add_btn" id="wait_add_btn" @click="add_wait">添加</a></td>
          </tr>
        </table>

          <table class="show">
          <tr v-for="(wait,index) in wait_list" :key="wait.wait_id">
            <td class="Do" v-if="wait.wait_state == 0">{{wait.wait_content}}</td>
            <td v-if="wait.wait_state == 0">
            <a href="#" class="text" @click="wait_state_change(wait.wait_id, index, 1)">完成</a> 
            <a href="#" class="text" @click="del_wait(wait.wait_id, index)">删除</a>
            </td>
          </tr>
          </table>

          <table class="show">
          <tr><td><a href="#" class="text" @click="clear_wait">清空</a></td?<tr>
          <tr v-for="(wait,index) in wait_list" :key="wait.wait_id">
            <td class="Done" v-if="wait.wait_state">{{wait.wait_content}}</td>
            <td v-if="wait.wait_state">
            <a href="#" class="text" @click="wait_state_change(wait.wait_id, index, 0)">未完成</a> 
            <a href="#" class="text" @click="del_wait(wait.wait_id, index)">删除</a>
            </td>
          </tr>
        </table>
</div>
</template>
<script>

export default {
  name: 'wait_thing',
  data () {
    return {
      wait_list: '',
      wait_content: ''
    }
  },
  components: {
  },
  mounted:function() {    //页面加载后自动执行 知识点：钩子函数
    this.read_wait(this);
  },
  methods: {
    read_wait(vm) {
      vm.$http.post('/api/wait/read_wait', {
      },{}).then((response) => {
        console.log(response);
        vm.wait_list = response.body;   //body是json类型
      })
    },
    add_wait() {
      var content = this.wait_content;
      this.$http.post('/api/wait/add_wait', {
        wait_content: content
      },{}).then((response) => {
        console.log("插入数据的ID：  --" + response.data.insertId);
        console.log(response);
        this.wait_content = null;   //  清空输入的表格
        var json = {wait_id:response.data.insertId,wait_content:content,wait_state:0}
        this.wait_list.push(json);
      })
    },
    del_wait(wait_id, index) {
        this.$http.post('/api/wait/del_wait', {   //查出要删除行的wait_id 
          wait_id: wait_id
          },{}).then((response) => {
          console.log("您已删除一条记录！");
          this.wait_list.splice(index,1);    //删除非数据库数组数据
          })
    },
    wait_state_change(wait_id,index,state) {
          console.log("您要更改一条更改的状态！" + wait_id + index + state);
          var vm = this;
          this.$http.post('/api/wait/state_wait', {   //发送要更改状态的wait_id 
          state: state,
          wait_id: wait_id
          },{}).then((response) => {
          console.log("您已更改状态");
          vm.$options.methods.read_wait(vm);    //调用 读取数据方法 刷新记录列表
          })
    },
    clear_wait() {
          console.log("清空所有已完成待办事项！");
          var vm = this;
          this.$http.post('/api/wait/clear_wait', {
          },{}).then((response) => {
          console.log("您已清空待办");
          vm.$options.methods.read_wait(vm);    //调用 读取数据方法 刷新记录列表
          })
    }
  }
}
</script>
<style>
</style>

waitApi.js

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');

// 连接数据库
var conn = mysql.createConnection(models.mysql);

conn.connect();
var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操作失败'
        });
    } else {
        res.json(ret);
    }
};

// 查询所有待办事项
router.post('/read_wait', (req, res) => {
    var sql = $sql.wait.read_wait;
    conn.query(sql, [], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

// 增加代办事项
router.post('/add_wait', (req, res) => {
    var sql = $sql.wait.add_wait;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.wait_content], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

// 删除已知行数的记录
router.post('/del_wait', (req, res) => {
    var sql = $sql.wait.del_wait;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.wait_id], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

// 更改已知行的状态
router.post('/state_wait', (req, res) => {
    var sql = $sql.wait.state_change;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.state, params.wait_id], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

// 更改已知行的状态
router.post('/clear_wait', (req, res) => {
    var sql = $sql.wait.clear_wait;
    var params = req.body;
    console.log(params);
    conn.query(sql, [], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            jsonWrite(res, result);
        }
    })
});

module.exports = router;

sqlMap.js

// sql语句
var sqlMap = {
    // 用户
    record: {
        add_record: 'insert into record(record_id, record_thing, record_number, record_day) values (0, ?, ?, ?)',
        read_record: 'select record_id, record_thing, DATEDIFF(CURRENT_TIMESTAMP(), record_number) AS record_number, record_day from record',
        del_record: 'DELETE FROM record WHERE record_id = ?'
    },
    wait: {
    	read_wait: 'select * from wait',
    	add_wait: 'insert into wait(wait_id, wait_content, wait_state) values (0, ?, 0)',
    	del_wait: 'delete from wait where wait_id = ?',
    	state_change: 'UPDATE wait SET wait_state = ? WHERE wait_id = ?',
        clear_wait: 'delete from wait where wait_state = 1'
    },
    chat: {
        read_chat: 'select * from chat'
    }
}

module.exports = sqlMap;

数据库：

CREATE TABLE `wait` (
  `wait_id` int(11) NOT NULL AUTO_INCREMENT,
  `wait_content` varchar(100) DEFAULT NULL,
  `wait_state` int(4) DEFAULT '0',
  PRIMARY KEY (`wait_id`)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;