技术
Bootstrap、JavaScript、Ajax、PHP
环境
VScode、谷歌浏览器、PHPstudy（Apache、MySQL）
界面
-
主界面：
-
点击添加错题：
-
点击修改错题：
功能
1.查
显示所有错题，把数据库中的错题都显示到页面。
2.增
添加错题，点击添加错题按钮后，弹出模态框，可以输入对应的内容，通过ajax内容添加到数据库中，然后再通过重载功能把内容加载到页面中。
3.删
删除错题，点击对应错题后面的删除错题按钮后，通过ajax把数据库中对应的错题删除，然后再通过前端删除节点的功能把页面中对应的错题删除
4.改
修改错题，点击对应错题后面的修改按钮，首先通过ajax把对应错题的id传到后端，查询对应的错题，把内容显示到页面中（查）；然后再修改错题，之后再通过ajax把修改后的内容和对应的错题id都传到数据库，使数据库中对应错题的内容也被修改，然后前端通过重载功能把前端页面中对应的错题内容也修改。这里是改操作，一定要记得把要修改的错题id传过来，然后才能修改对应内容。（改）
数据库
文件结构
接口文档
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 lang="en">
<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">
</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);
}
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
