vue 情侣空间代办模块记录

待办事项

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

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

实现：

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

vue 情侣空间代办模块记录相关推荐

springboot+mysql+安卓APP情侣空间系统39734
摘要随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多学校的眼球之中,他们利用网络来做这个宠物服务预约,随之就产生了"情侣空间系统 ",这样就让用户情侣空间系 ...
springboot+mysql情侣空间系统APP-计算机毕业设计源码39734
摘要随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多学校的眼球之中,他们利用网络来做这个宠物服务预约,随之就产生了"情侣空间系统 ",这样就让用户情侣空间系 ...
Python-Django搭建情侣空间
Python-Django搭建情侣空间简介使用的技术功能设计用户模块聊天模块界面简介搭建一个情侣空间,可聊天.写日记.上传照片.纪念日提醒等. 模仿小恩爱APP. 项目起始时间:202 ...
boost::log模块记录多个线程的示例
boost::log模块记录多个线程的示例实现功能 C++实现代码实现功能 boost::log模块记录多个线程的示例 C++实现代码 #include <stdexcept> #in ...
Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
我们的小窝-情侣空间秀恩爱php源码
简介: 开源我们的小窝php源码,高仿情侣空间玩法,秀恩爱必备网站源码. 有独立后台管理,可以上传照片和设置成就. 源码搭建方法: 先打开 core.php 文件,配置一下数据库信息. 然后导入 lo ...
平行空间怎么设置32位_10月微信新花样！微信情侣空间怎么解除情侣空间取消情侣关系设置方法...
阅读本文前,请您先点击上面的蓝色字体,再点击"关注",这样您就可以继续免费收到内容了.每天都有分享.完全是免费订阅,请放心关注. ‍现在很多年轻人都在微信里面设置了齐心情侣空间,创 ...
情侣空间显示服务器失败,情侣空间error是什么意思
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. qq情侣空间显示error可能是因为网络问题或者QQ服务器的问题,建议检查网络连接后再试或者稍后再试. QQ是腾讯QQ的简称,是一 ...
springboot+thymeleaf+bootstrap+mybatis-Plus+mysql 情侣空间网站源代码
前言最近刷短视频,因为那个程序员电视剧中表白爱心很火,短视频很多表白程序.看了之后很感兴趣,想着自己做一个情侣空间网站,于是就花了两个星期写了一个.因为前端使用bootstrap可以兼容手机端.话不 ...

vue 情侣空间代办模块记录

待办事项

vue 情侣空间代办模块记录相关推荐

最新文章

热门文章

vue 情侣空间 代办模块 记录

待办事项

vue 情侣空间 代办模块 记录相关推荐

最新文章

热门文章

vue 情侣空间代办模块记录

vue 情侣空间代办模块记录相关推荐