php - vue todolist实现增删改查

最新推荐文章于 2024-04-08 09:30:32 发布

puth7788

最新推荐文章于 2024-04-08 09:30:32 发布

阅读量1.7k

点赞数

分类专栏： PHP Vue 文章标签： php

本文链接：https://blog.csdn.net/flower46273736/article/details/77231600

版权

PHP 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

前端：vue

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link href='css/index.css' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="container" id="todo">
        <section class="panel">
            <input v-model="newTask" @keyup.enter="addTask" placeholder="p l e a s e" class="text-input">
            <button @click="addTask">新增</button>
        </section>

        <section class="list">
            <ul class="list-item">
                <li v-for="(task,index) in tasks">
                    <input type="text" v-if="task === editingTask" class="text-input" @keyup.enter="endEditing(task.todoId,task.todoText)" @blur="endEditing(task.todoId,task.todoText)"
                        v-model="task.todoText">
                    <label for="checkbox" v-if="task !== editingTask" @dblclick="editTask(task)">{{ task.todoText }}</label>
                    <button v-if="task !== editingTask" @click="editTask(task)">编辑</button>
                    <button v-if="task == editingTask" @click="endEditing(task.todoId,task.todoText)">完成</button>
                    <button class="delete" @click="removeTask(index,task.todoId)">删除</button>
                </li>
            </ul>
        </section>
    </div>



    <script tyle="text/javascript">
        new Vue({
            el: "#todo",
            data: {
                newTask: "",
                tasks: [],
                editingTask: {}
            },

            methods: {
                /*增*/
                addTask: function () {
                    var _this = this;
                    var task = this.newTask.trim();
                    if (task) {
                        axios.get('addMes.php', {
                                params: {
                                    todoText: task
                                }
                            })
                            .then(function (response) {
                                /*console.log(response);
                                _this.tasks.push({
                                    todoText: task
                                });
                                _this.newTask = "";*/
                                axios.get('queryMes.php')
                                .then(function (response) {
                                    _this.tasks = response.data.result;
                                })
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                },


                /*删*/
                removeTask: function (index, id) {
                    var _this = this;
                    axios.get('delectMes.php', {
                            params: {
                                todoId: id,
                            }
                        })
                        .then(function (response) {
                            _this.tasks.splice(index, 1);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                },

                /*改*/
                editTask: function (task) {
                    this.editingTask = task;
                },

                /*修改提交*/
                endEditing: function (id, todoText) {
                    this.editingTask = {};
                    var _this = this;
                    axios.get('editMes.php', {
                            params: {
                                todoId: id,
                                todoText: todoText
                            }
                        })
                        .then(function (response) {

                        })
                        .catch(function (error) {
                            console.log(error);
                        });

                }
            },


            created() {
                var _this = this;
                //获取数据
                axios.get('queryMes.php')
                    .then(function (response) {
                        _this.tasks = response.data.result;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        });
    </script>
</body>
</html>

//addMes.php
<?php  
    $url = "127.0.0.1";//连接数据库的地址 
    $user = "root"; //账号 
    $password = "";//密码  
    $con = mysql_connect($url,$user,$password); 
    if(!$con){ die("连接失败".mysql_error());} 
    mysql_select_db("todolist"); 

    //新增数据
    $sql = "INSERT INTO todoTable (todoText) VALUES ('$_GET[todoText]')";  

    //执行SQL语句 
    mysql_query($sql,$con); 

    //关闭资源 
    mysql_close($con); 
?> 

//delectMes.php
//删除数据
$del_id=$_GET["todoId"];  
$sql="delete from todoTable where todoId='$del_id'"; 

//editMes.php
//修改数据
$edit_id=$_GET["todoId"];  
$edit_Text=$_GET["todoText"];  
$sql="update todoTable set todoText='$edit_Text' where todoId='$edit_id'";

//queryMes.php
//查询数据
$sql="select * from todoTable";

这里写图片描述

https://jingyan.baidu.com/article/fcb5aff757fb01edaa4a71d5.html

// 1.连接数据库:
//conn.php
mysqli_connect(服务器名,用户名,密码,数据库名)
$conn = mysqli_connect("localhost","root",'','user');
// 设置插入数据编码为utf8，不设置的话会出现乱码
mysqli_query($conn,"set names utf8");

// 2.创建数据库:
// user数据库创建的sql语句:
// 只需要复制这一部分数据库代码到数据库语句执行就可以创建这个表了
// 第一句是创建一个数据库叫user
// 在里面创建一个message数据表
create database user; 
CREATE TABLE `message` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) CHARACTER SET utf8 DEFAULT NULL,
  `content` varchar(255) CHARACTER SET utf8 DEFAULT NULL,
  `who` varchar(255) CHARACTER SET utf8 DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

// 3.添加数据
insert into 数据表名(字段1,字段2,....) values("值1","值2",.....);

<?php
//引用数据库连接文件
include "conn.php";
//关键的地方是sql语句的书写，一定不能写错，要对应前一个数据表的字段对应插入对应的值，然后实现插入数据。
$sql = "insert into message(title,content,who) values('留言标题','留言内容','留言人')";
//处理数据语句
$result = mysqli_query($conn,$sql);
if($result){
echo "发布留言成功!";
}else{
echo "发布留言失败!";
}

// 4.删除数据
delete from 表明 where 字段='条件' 

<?php
 //引用数据库连接文件
 include "conn.php";
 //删除id=1的数据
 $sql = "delete from message where id='1'";
 //执行sql语句
 $result = mysqli_query($conn,$sql);
 if($result){
    echo "删除成功!<a href='message.php'>返回</a>";
 }else{
    echo "删除失败!<a href='message.php'>返回</a>";
 }


// 5.查找数据
select * from 表名 where 条件(可选)

<?php 
//引用数据库连接文件
include "conn.php";
//查询全部数据
 $sql = "select * from message";
 //处理sql语句
 $result = mysqli_query($conn,$sql); 
 while($row = mysqli_fetch_array($result){
    echo $row['title'];
    echo $row['content'];
    echo $row['who'];
 }

// 6.修改数据
update 表名set 字段1='值1',字段2='值2',字段3='值3' where 字段='条件'

<?php
//引用数据库连接文件
 include "conn.php";
// 修改对应id数据到数据库,修改id=1的数据
$sql="update message set title='修改标题',content='修改内容',who='修改名' where id='1'";
//处理数据库
$result = mysqli_query($conn,$sql);
if($result){
echo "修改留言成功!";
}else{
echo "修改留言失败!";
}

puth7788

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
php - vue todolist实现增删改查

前端：vue<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <script src="js/vue.js"></
复制链接

扫一扫