2020-09-26---错题小系统
本文共 8670 字，大约阅读时间需要 28 分钟。
错题小系统
技术
Bootstrap、JavaScript、Ajax、PHP
环境
VScode、谷歌浏览器、PHPstudy（Apache、MySQL）
界面
-
主界面：
-
点击添加错题：
-
点击修改错题：
功能
1.查
显示所有错题，把数据库中的错题都显示到页面。
2.增
添加错题，点击添加错题按钮后，弹出模态框，可以输入对应的内容，通过ajax内容添加到数据库中，然后再通过重载功能把内容加载到页面中。
3.删
删除错题，点击对应错题后面的删除错题按钮后，通过ajax把数据库中对应的错题删除，然后再通过前端删除节点的功能把页面中对应的错题删除
4.改
修改错题，点击对应错题后面的修改按钮，首先通过ajax把对应错题的id传到后端，查询对应的错题，把内容显示到页面中（查）；然后再修改错题，之后再通过ajax把修改后的内容和对应的错题id都传到数据库，使数据库中对应错题的内容也被修改，然后前端通过重载功能把前端页面中对应的错题内容也修改。这里是改操作，一定要记得把要修改的错题id传过来，然后才能修改对应内容。（改）
数据库
文件结构
接口文档
apidoc.md
将数据库中的错题显示到页面method : geturl : ./php/show.php将错题添加到数据库method : posturl : ./php/add.php参数： content string 错题内容 where string 错在哪 idea string 想法删除错题method ： geturl : ./php/delete.php参数 id int 错题id修改错题（获取要修改的错题的id）method : geturl ： ./php/update_select.php参数 id int 错题id修改错题method : posturl : ./php/update.php参数： id int 错题id content string 错题内容 where string 错在哪 idea string 想法
代码
HTML
错题系统
易错内容
# 易错内容 错在哪 你的想法 删除 操作
CSS
导入bootstrap.css文件
php
- 公共的php
- 将数据库中的错题显示到页面
- 将错题添加到数据库
- 删除错题
- 修改错题（获取要修改的错题的id）
- 修改错题
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(); } // **索引** // **标题** // **副标题** // 内容 // // // // // // //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 = ` ${value[0]} ${value[1]} ${value[2]} ${value[3]} `; // 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 = ` `; //获取修改按钮 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);} 转载地址：http://ntqzi.baihongyu.com/
你可能感兴趣的文章