錯題小系統

技術
環境
界面
功能
- 1.查
- 2.增
- 3.删
- 4.改
資料庫
檔案結構
接口文檔
代碼
- HTML
- CSS
- php
- JS

技術

Bootstrap、JavaScript、Ajax、PHP

環境

VScode、谷歌浏覽器、PHPstudy（Apache、MySQL）

界面

主界面：

2020-09-26---錯題小系統技術環境界面功能資料庫檔案結構接口文檔代碼
點選添加錯題：

2020-09-26---錯題小系統技術環境界面功能資料庫檔案結構接口文檔代碼
點選修改錯題：

2020-09-26---錯題小系統技術環境界面功能資料庫檔案結構接口文檔代碼

功能

1.查

顯示所有錯題，把資料庫中的錯題都顯示到頁面。

2.增

添加錯題，點選添加錯題按鈕後，彈出模态框，可以輸入對應的内容，通過ajax内容添加到資料庫中，然後再通過重載功能把内容加載到頁面中。

3.删

删除錯題，點選對應錯題後面的删除錯題按鈕後，通過ajax把資料庫中對應的錯題删除，然後再通過前端删除節點的功能把頁面中對應的錯題删除

4.改

修改錯題，點選對應錯題後面的修改按鈕，首先通過ajax把對應錯題的id傳到後端，查詢對應的錯題，把内容顯示到頁面中（查）；然後再修改錯題，之後再通過ajax把修改後的内容和對應的錯題id都傳到資料庫，使資料庫中對應錯題的内容也被修改，然後前端通過重載功能把前端頁面中對應的錯題内容也修改。這裡是改操作，一定要記得把要修改的錯題id傳過來，然後才能修改對應内容。（改）

資料庫

2020-09-26---錯題小系統技術環境界面功能資料庫檔案結構接口文檔代碼

檔案結構

2020-09-26---錯題小系統技術環境界面功能資料庫檔案結構接口文檔代碼

接口文檔

apidoc.md

将資料庫中的錯題顯示到頁面
method : get
url :  ./php/show.php

将錯題添加到資料庫
method : post
url : ./php/add.php
參數：
    content  string  錯題内容
    where  string  錯在哪
    idea   string  想法

删除錯題
method ： get
url : ./php/delete.php
參數
    id  int  錯題id

修改錯題（擷取要修改的錯題的id）
method : get
url ： ./php/update_select.php
參數
    id  int 錯題id

修改錯題
method : post
url : ./php/update.php
參數：
    id        int       錯題id
    content   string    錯題内容
    where     string    錯在哪
    idea      string    想法

代碼

HTML

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>錯題系統</title>
    <link rel="stylesheet" href="css/bootstrap.css" target="_blank" rel="external nofollow" >
</head>
<body>
    <div class="container-fluid">
        <h3>
            <span class="logo">
                <img src="http://www.qfedu.com/images/new_logo.png"/>
            </span>
            易錯内容
            <button type="button" class="btn" data-toggle="modal" data-target='.wq-add'>
                <!-- 字型小圖示 添加一個齒輪 -->
                <span  class="glyphicon glyphicon-cog"></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" name="wq-content" id="wq-content" value="閉包" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="wq-where">錯在哪</label>
                        <textarea id="wq-where" class="form-control" rows="2" cols="" placeholder="請較長的描述錯誤位置" value="閉包的原理略有模糊現在已經了解"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="wq-idea">你的想法</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="table">
            <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-conter">删除</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>内容</td>
                        <td>
                            <button class="btn">删除</button>
                        </td>
                        <td>
                            <button class="btn">
                                <span class="glyphicon glyphicon-cog">修改</span>
                            </button>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
    </div>



    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/ajax.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

CSS

導入bootstrap.css檔案

php

公共的php

<?php
    //設定字元集
    header('content-type:text/html;charset=utf-8');

    //連接配接并選擇操作的資料庫
    $db = mysqli_connect('localhost','root','root','day20200921');

将資料庫中的錯題顯示到頁面

<?php
    // 導入公共檔案
    include 'public.php';

    //操作資料庫
    //把資料庫的錯題顯示到頁面，不需要傳遞資料

    //查詢資料庫
    //編寫sql語句
    $sql = 'SELECT * FROM `wqtab` WHERE 1';
    //執行sql語句
    $set = mysqli_query($db,$sql);  //結果傳回一個集合  
    //轉為數組
    // mysqli_fetch_array  一次隻能轉一條記錄
    while($arr = mysqli_fetch_array($set)){
        //每轉出一條記錄，就放到數組中一條
        $list[] = $arr;
    }
    //将資料轉為json格式傳回給前端
    echo json_encode($list);
    // echo json_encode($arr);
    // echo json_encode($set);

将錯題添加到資料庫

<?php
    //導入公共檔案
    include 'public.php';

    //添加錯題

    //接收前端請求的資料
    $content = $_POST['content'];
    $where = $_POST['where'];
    $idea = $_POST['idea'];

    //操作資料庫
    //編寫sql語句

    // $sql = 'INSERT INTO `wqtab`(`wcontent`, `wwhere`, `widea`) VALUES ('$content','$where','$idea')';
    $sql = "INSERT INTO `wqtab`(`wcontent`, `wwhere`, `widea`) VALUES ('$content','$where','$idea')";
    //執行sql語句
    mysqli_query($db,$sql);

删除錯題

<?php
    //導入外部檔案
    include 'public.php';

    //接收前端的資料
    $id = $_GET['id'];

    //操作資料庫;
    //編寫sql語句
    $sql = "DELETE FROM `wqtab` WHERE wid=$id";

    //執行sql語句
    mysqli_query($db,$sql);

修改錯題（擷取要修改的錯題的id）

<?php
    //導入外部檔案
    include 'public.php';

    //接收前端的資料
    $id = $_GET['id'];

    //操作資料庫
    //編寫sql語句
    $sql = "SELECT * FROM `wqtab` WHERE wid=$id";
    //執行sql語句
    $set = mysqli_query($db,$sql);
    //轉為數組
    $arr = mysqli_fetch_array($set);
    
    //轉為json格式返給前端
    echo json_encode($arr);

修改錯題

<?php
    //導入外部檔案
    include 'public.php';

    //擷取前端資料
    $id = $_POST['id'];
    $content = $_POST['content'];
    $where = $_POST['where'];
    $idea = $_POST['idea'];

    //操作資料庫
    //編寫sql語句
    // $sql = "UPDATE `wqtab` SET `wcontent`=$content,`wwhere`=$where,`widea`=$idea WHERE `wid`=$id";
    $sql = "UPDATE `wqtab` SET `wcontent`='$content',`wwhere`='$where',`widea`='$idea' WHERE wid=$id";

    //執行sql語句
    mysqli_query($db,$sql);

JS

導入bootstrap.js檔案
導入jquery-1.12.4檔案
封裝ajax.js檔案

let ajax = new Object();
ajax.get = function(url,fn){
    let xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                if(fn instanceof Function){
                    fn(xhr.responseText);
                }
            }
        }
    }
}
ajax.post = function(url,data,fn){
    let xhr = new XMLHttpRequest();
    xhr.open('post',url,true);
    xhr.setRequestHeader('Content-type','Application/x-www-form-urlencoded;charset=utf-8');
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                if(fn instanceof Function){
                    fn(xhr.responseText);
                }
            }
        }
    }
}

編寫index.js檔案

//1. 擷取資料庫中的錯題，顯示到頁面中。(查詢)

//2. 添加錯題到資料庫中（增加）

//3. 删除錯題 （删除）

//4. 修改錯題（查詢、修改）

class EQ{
    constructor(){
        this.show();
        this.add();
    }
    // <td>**索引**</td>
    // <td>**标題**</td>
    // <td>**副标題**</td>
    // <td>内容</td>
    // <td>
    //     <button class="btn">删除</button>
    // </td>
    // <td>
    //     <button class="btn">
    //         <span class="glyphicon glyphicon-cog">修改</span>
    //     </button>
    // </td>
    //1. 擷取資料庫中的錯題，顯示到頁面中。(查詢)
    show(){
        //擷取tbody
        let o_tbody = $('#tbody');
        //擷取資料庫的錯題
        ajax.get('./php/show.php',data => {
            //先列印一下資料，看接收回來的資料是什麼類型
            console.log(data);  //數組
            //轉為對象
            data = JSON.parse(data);
            console.log(data);
            //周遊數組
            data.forEach(value => {
                // console.log(value);
                //周遊出一條添加一行
                let tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${value[0]}</td>
                    <td>${value[1]}</td>
                    <td>${value[2]}</td>
                    <td>${value[3]}</td>
                    <td>
                        <button class="btn delete" data-wq-id=${value[0]}>删除</button>
                    </td>
                    <td>
                        <button class="btn update" data-wq-id=${value[0]}>
                            <span class="glyphicon glyphicon-cog">修改</span>
                        </button>
                    </td>
                `;
                // console.log(value[0]);
                // console.log(value[1]);
                // console.log(value[2]);
                o_tbody.appendChild(tr);

                //調用删除錯題  因為删除按鈕是在這裡動态添加的
                this.delete();
                this.update();
            })
        })
    }

    //2. 添加錯題到資料庫中（增加）
    add(){
        //擷取錯題内容文本框
        let o_content = $('#wq-content');
        //擷取錯在哪文本框
        let o_where = $('#wq-where');
        //擷取想法文本框
        let o_idea = $('#wq-idea');
        //擷取送出按鈕
        let o_sub = $('#wq-save-question');
        //給按鈕添加點選事件
        o_sub.onclick = function(){
            let content = o_content.value;
            console.log(content);
            let where = o_where.value;
            let idea = o_idea.value;
            //content 是 後端設定的參數  ${content}是前端接收到的文本框的内容
            let data = `content=${content}&where=${where}&idea=${idea}`;
            console.log(data);
            //通過ajax傳到後端
            ajax.post('./php/add.php',data,() => {
                location.reload();
            })
            
        }
    }

    //3. 删除錯題 （删除）
    delete(){
        //擷取所有的删除按鈕
        let o_del = document.querySelectorAll('.delete');
        //給删除按鈕添加點選事件
        for(let i = 0,len = o_del.length;i < len;i ++){
            o_del[i].onclick = function(){
                //擷取錯題id
                let id = this.getAttribute('data-wq-id');
                console.log(id);
                //通過ajax将資料庫中對應id的錯題删掉
                //注意格式 路徑和參數之間用問号
                ajax.get('./php/delete.php?id=' + id);
                //删除頁面中的錯題
                this.parentNode.parentNode.remove();
            }
        }
    }

    //4. 修改錯題（查詢、修改）
    update(){
        //擷取所有的修改按鈕
        let o_upd = document.querySelectorAll('.update');
        // console.log(o_upd);
        //給修改按鈕添加點選事件
        for(let i = 0,len = o_upd.length;i < len;i ++){
            o_upd[i].onclick = function(){
                //擷取錯題id
                let id = this.getAttribute('data-wq-id');
                console.log(id);
                //擷取資料庫中對應的錯題
                ajax.get('./php/update_select.php?id=' + id,data => {
                    console.log(data);
                    data = JSON.parse(data);
                    //把擷取到資料放到前端頁面
                    //遮罩層
                    let o_mark = document.createElement('div');  
                    //放置内容的div
                    let o_float = document.createElement('div');
                    // console.log(o_mark,o_float);
                    //設定樣式
                    o_mark.style.cssText = "width : 100%;height : 100%;background : black;opacity : 0.5;position : absolute;top : 0;left : 0;z-index : 9999";
                    o_float.style.cssText = "width : 500px;height : 300px;background : skyblue;opacity : 0.9;position : absolute;top : 100px;left : 500px;z-index : 10000";

                    // 添加到頁面
                    document.documentElement.appendChild(o_mark);
                    document.documentElement.appendChild(o_float);
                    
                    //添加内容
                    o_float.innerHTML = `
                        <form>
                            <h3>修改錯題</h3>
                            <p>錯題内容：<input type = 'hidden' value = ${data[0]} id = 'id'><input type = 'text' value = ${data[1]} id = 'content'></p>
                            <p>錯在哪：<input type = 'text' value = ${data[2]} id = 'where'></p>
                            <p>你的想法：<input type = 'text' value = ${data[3]} id = 'idea'></p>
                            <input type = 'button' id = 'updbtn' value = '修改'>
                        </form>
                    `;
                    

                    //擷取修改按鈕
                    let o_updbtn = $('#updbtn');
                    //給修改按鈕添加點選事件
                    o_updbtn.onclick = function(){

                        //擷取修改後的輸入框的内容，放到資料庫
                        // let id = $('#id').value;
                        // let content = $('#content').value;
                        // let where = $('#where').value;
                        // let idea = $('#idea').value;
                        let datas = `id=${$('#id').value}&content=${$('#content').value}&where=${$('#where').value}&idea=${$('#idea').value}`;
                        // let datas = 'id=' + id
                        // console.log(datas); 
                        ajax.post('./php/update.php',datas,() => {
                            // console.log(datas);
                            //頁面重載，資料庫中的錯題修改之後，前端頁面也對應修改
                            location.reload();
                        });
                    }
                });
                
            }
        }
    }

}
new EQ();

function $(selector){
    return document.querySelector(selector);
}

2020-09-26---錯題小系統技術環境界面功能資料庫檔案結構接口文檔代碼

錯題小系統

技術

環境

界面

功能

1.查

2.增

3.删

4.改

資料庫

檔案結構

接口文檔

代碼

HTML

CSS

php

JS

繼續閱讀

【每日一練】59—寫一個中秋月餅的響應式卡片

TextView 使用HTML标簽

閑聊HTML5的新特性HTML5

html5适配ios的黑暗模式

04 IDEA注冊碼：http://lookdiv.com/

uni-app實作訂單支付倒計時，不會随着傳回重新計時uni-app實作訂單支付倒計時

13個常用的JavaScript代碼片段

股票型基金買賣方法

html中＜dt＞＜/dt＞與＜dd＞＜/dd＞的差別

Vue學習記錄--使用ref擷取DOM元素群組件引用

PAT (Advanced Level) Practise 1042 Shuffling Machine (20)

淺析H5新增的Webworker對象

React+Umi 的H5 小程式公用跳轉 H5小程式路由帶參

微信小程式的開發與h5有什麼關系

實戰h5頁面跳轉到小程式

H5測試點