demo-php增删改查-错题库

最新推荐文章于 2021-03-28 00:13:32 发布

咩有猫腻.

最新推荐文章于 2021-03-28 00:13:32 发布

阅读量292

点赞数 1

分类专栏：前端后端demo demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/106587668

版权

前端后端demo 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

demo

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述
需要的文件

创建数据库表字段
如果命名和图片上的不一样记得在代码里要替换成数据库里的格式

接口分析

一.index.js

// 获取标签对象，用函数 防止冗余代码生成
function getById(id) {
  return document.getElementById(id);
}
let wq_content = getById("wq-content");
let wq_where = getById("wq-where");
let wq_idea = getById("wq-idea");
let saveBtn = getById("wq-save-question");
let tBody = getById("tbody");

// 查询
ajax({
  url: "php/getData.php",
  type: "get",
  success: function (data) {
    console.log(data);
    data = JSON.parse(data);
    let str = "";
    data.forEach((item)=>{
      str += `
            <tr class="text-center middle">
            <td>${item.id}</td>
            <td>${item.wq_content}</td>
            <td>${item.wq_where}</td>
            <td>
              <a
                href="#"
                data-toggle="popover"
                data-content="**过长内容详情(bootstrap会处理点击显示)**"
                >${item.wq_idea}
              </a>
            </td>
            <td>
              <button class="btn delBtn" data-id="${item.id}">删除</button>
            </td>
            <td>
              <button class="btn">
                <span
                  class="glyphicon glyphicon-cog"
                  aria-hidden="true"
                ></span>
              </button>
            </td>
          </tr> 
            `;
    });
    tBody.innerHTML = str;

    // 因为没有数据时是没有删除按钮的 是在查询后才出现的 所以需要写在查询里

    // document.getElementsByClassName可以换成document.querySelectorAll
    let aBtns = document.getElementsByClassName("delBtn");

    for (let i = 0; i < aBtns.length; i++) {
      aBtns[i].onclick = function () {
        let id = this.getAttribute("data-id");
        ajax({
          url: "php/delData.php",
          type: "get",
          data: { id: id },
          success: function (data) {
             // 1 不能加引号
            if (data == 1) {
              alert("删除成功");
              tBody.removeChild(aBtns[i].parentNode.parentNode);
            } else {
              alert("删除失败，请重试");
            }
          },
        });
      };
    }
  },
});

// 添加
saveBtn.onclick = function () {
  let data = {
    wq_content: wq_content.value,
    wq_where: wq_where.value,
    wq_idea: wq_idea.value,
  };

  ajax({
    url: "php/addData.php",
    type: "post",
    data: data,
    success: function(data){
      if (data == 1) {
        alert("添加成功");
        location.reload();
      } else {
        alert("添加失败，请重试");
      }
    },
  });
};

二.各种php

qf是建立的数据库名 wq是数据库表名
conn.php

<?php
$conn = new mysqli("localhost","root","root","qf");
?>

addData.php

<?php
include "./conn.php";
$wq_content=$_REQUEST['wq_content'];
$wq_where=$_REQUEST['wq_where'];
$wq_idea=$_REQUEST['wq_idea'];

$sql="insert into wq (wq_content,wq_where,wq_idea) values('$wq_content','$wq_where','$wq_idea')";

if($conn->query($sql)){
    echo "1";
}else{
    echo "0";
}
?>

delData.php

<?php
include "conn.php";
$id = $_REQUEST["id"];
$sql = "delete from wq where id='$id'";
if($conn->query($sql)){
    echo "1";
}else{
    echo "0";
}
?>

getData.php

<?php
include "conn.php";
$sql="select * from wq";
$result=$conn->query($sql);
$newArr=[];
if($result->num_rows>0){
    while($row = $result->fetch_assoc()){
        array_push($newArr,$row);
    }
}
$json=json_encode($newArr);
echo $json;
?>

$result->num_rows>0 表示：统计数据库行目 如果大于0时
$result->fetch_assoc() 表示： 
	fetch_assoc函数从结果集中取得一行作为关联数组
	它在php里把数据库里的内容转换成一个数组（虽然这个数组用的是{}但它还是一个数组） 然后把这个对象都放到创建的newArr数组里
while表示：循环

在这里插入图片描述
updataData.php
这个修改是自己写的不知道对不对 demo里没有写修改的操作

<?php
include "./conn.php";
$id=$_REQUEST['id'];
$wq_content=$_REQUEST['content'];
$wq_where=$_REQUEST['where'];
$wq_idea=$_REQUEST['idea'];

$sql="updata wq set wq_content='$wq_content',wq_where='$wq_where',wq_idea='$wq_idea' where id='$id'";

if($conn->query($sql)){
    echo "1";
}else{
    echo "0";
}
?>

三.页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>错题系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="libs/common.css" />
  </head>
  <body>
    <div class="container-fluid">
      <h3 class="wq-title">
        <span class="logo">
          <img src="http://www.qfedu.com/images/new_logo.png" alt="" />
        </span>
        易错内容
        <button
          type="button"
          class="btn"
          data-toggle="modal"
          data-target=".wq-add"
        >
          <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
          添加错题
        </button>
      </h3>
      <!-- 添加错题部分 -->
      <div class="modal fade wq-add">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <!--细节划分-->
            <h4>请详细填写重点信息:</h4>
            <div class="form-group">
              <label for="wq-content">易错内容</label>
              <input
                type="text"
                class="form-control"
                id="wq-content"
                placeholder="易错内容"
                value="闭包"
              />
            </div>
            <div class="form-group">
              <label for="wq-where">错在哪</label>
              <textarea
                id="wq-where"
                class="form-control"
                rows="2"
                placeholder="请详细描述错误位置"
                value="闭包的原理略有模糊现在已经了解"
              ></textarea>
            </div>
            <div class="form-group">
              <label for="title">你的想法</label>
              <textarea
                id="wq-idea"
                class="form-control"
                rows="2"
                placeholder="你的感悟"
                value="闭包利用了垃圾回收机制，在每个函数执行的时候，都会产生一个活动对象，这个活动对象会在函数执行结束之后删除，但是内存的垃圾回收机制会保留已经储存的数据，该数据可查询，闭包就是利用这个原理对已经删除的数据进行查询"
              ></textarea>
            </div>
            <div class="text-center">
              <button
                type="button"
                class="btn btn-success"
                data-dismiss="modal"
                id="wq-save-question"
              >
                提交
              </button>
            </div>
          </div>
        </div>
      </div>
      <!--错题表格-->
      <div class="row">
        <table class="table table-bordered table-hover wq-main-table">
          <!--错题项目-->
          <thead>
            <tr>
              <th class="col-md-1 text-center">#</th>
              <th class="col-md-3 text-center">易错内容</th>
              <th class="col-md-3 text-center">错在哪</th>
              <th class="col-md-3 text-center">你的想法</th>
              <th class="col-md-1 text-center">删除</th>
              <th class="col-md-1 text-center">操作</th>
            </tr>
          </thead>
          <tbody id="tbody">
            <!-- <tr class="text-center middle">
              <td>**索引**</td>
              <td>**标题**</td>
              <td>**副标题**</td>
              <td>
                <a
                  href="#"
                  data-toggle="popover"
                  data-content="**过长内容详情(bootstrap会处理点击显示)**"
                  >**过长隐藏内容**
                </a>
              </td>
              <td>
                <button class="btn delBtn">删除</button>
              </td>
              <td>
                <button class="btn">
                  <span
                    class="glyphicon glyphicon-cog"
                    aria-hidden="true"
                  ></span>
                </button>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
      <div class="row text-center">
        <ul class="pagination">
          <li><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">&raquo;</a></li>
        </ul>
      </div>
    </div>
    <script src="libs/jquery-1.11.0.js"></script>
    <script src="libs/bootstrap.js"></script>
    <script src="libs/ajax01.js"></script>
    <script src="libs/index.js"></script>
  </body>
</html>