笔记总结

笔记总结

1MVC

1.1概念

M(model 模型):- 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
V(view 视图):视图代表模型包含的数据的可视化。
C(controller 控制器):控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。
MVC 是一种编程思想
核心：将程序当中的跟页面展现相关的代码放到一个文件中，将业务逻辑处理相关的代码放到一个文件
中，将数据库交互的代码放到一个文件中
这三个文件就分别负责页面呈现（view）、业务逻辑(controller)和数据交互（模型）

1.2处理流程图

对于每一个用户输入的请求，首先被控制器接收，并决定由哪个模型来进行处理，然后模型通过业务处理逻辑处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回的数据，并通过显示页面呈现给用户。

1.3优点

1、视图重用。多个视图能共享一个模型。同一个模型可以被不同的视图重用，大大提高了代码的可重用性。

   2、松散耦合。由于MVC的三个模块相互独立，改变其中一个不会影响其他两个，所以依据这种设计思想能构造良好的松耦合的构件。

   3、灵活性。控制器提高了应用程序的灵活性和可配置性。控制器可以用来联接不同的模型和视图去完成用户的需求，这样控制器可以为构造应用程序提供强有力的手段。

1.3缺点

1、增加了系统结构和实现的复杂性。
对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率。

  2、视图与控制器间的过于紧密的连接。
  视图与控制器是相互分离，但确实联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

  3、视图对模型数据的低效率访问。
  依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

 MVC的使用会使我们的软件或系统在健壮性，代码重用和结构方面有很大的提升。但并不是所有的系统都适合使用MVC，它会带来额外的工作和复杂性，所以并不适合小型甚至中等规模的系统或软件，花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。这就需要我们做出抉择。

1.4案例

新闻增删案例

model页面

control页面

view页面

html页面

个人思路：现在model页面定义一个类，在分别写连库的基本操作，之后在control里引入model，在分别写php语法结合html前台，在html利用action传参，根据aciton的不同，打开不同的页面。

2jquery

2.1引入方式

$(function(){})

$(document).ready(function(){})

2.2选择器

2.3基础选择器

名称	用法	描述
ID选择器	$("#id")	获取ID的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(".class")	获取同一类class元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交际选择器	$(“li.current”)	交集元素

2.4层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

2.5筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

语法	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”),最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点,不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(li:eq(2)),index从0开始

2.6节点关系

父节点parent()
父节点集合 parents(“选择器”)
直接子节点 children()
后代子节点 find()
所有的兄弟节点 siblings()
后面的一个兄弟节点next()
前面的一个兄弟节点prev()
后面的所有兄弟节点 nextAll()
前面的所有兄弟节点 prevAll()
添加类名 addClass(‘类名’)
移出类名 removeClass(“类名”)
切换类名 toggleClass(‘类名’)

2.7DOM增删语法

$("#box").append(“我是尾部追加的元素”);//尾部追加元素

$("#box").prepend("")//头部追加元素

$("#box").after("");//外部末尾追加元素

$("#box").before("");//外部头部追加元素

$("我是内部追加的元素").appendTo($("#box"));//内部追加元素

$("#box").remove();//删除自身和所有的子元素

$("#box").empty();//删除子元素但是保留自身

$("#box").html("");//和上面的empty的用法相同

2.7jquery动画

hide(1000)隐藏 show(1000)显示
$("#btn").click(function(){
$("#box").hide(1000,function(){
alert('我被删除了');
});
})
slideUp()滑上去 slideDown()滑动下去
$("#btn").click(function(){
$("#box").slideUp(1000,function(){
alert('滑动上去了')
})
$(selector).animate({},1000,callback)
备注：动画属性可以设置很多，比如宽高、边框、位置、2D转换等，但是颜色没有用
$("#btn").click(function(){
$("#box").animate({
"width":"150px",
"height":"150px",
"border-radius":'50%'58
},1000,function(){
})
})
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。

2.8掉钱案例

css

<style>
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width:100%;
				height:100%;
			}
			.box{
				width:100%;
				height:100%;
				background-color: #000;
			}
			span{
				position: absolute;
			}
		</style>

html

<div class="box">
			
		</div>
		<script src="jquery.min.js"></script>
		<script>
			function money(){
				// 我们要创建span标签放在div里面去
				var $span=$("<span>¥</span>");
				// 随机数
				var left=Math.random()*1300;
				// 刚创建的span标签设置样式
				$span.css({
					"fontSize":"30px",
					"color":"red",
					"left":left+"px"
				})
				$(".box").append($span);
				$span.animate({
					"top":"600px"
				},1000,function (){
					// 让当前的span标签删除
					$(this).remove();
				})
					
			}
			setInterval(money,1000)
		</script>

2.9购物车全选案例

<table border="1px" cellspacing='0' cellpadding='0'>
        <thead>
            <tr>
                <th><input type="checkbox" id="checkall"></th>
                <th>课程名称</th>
                <th>所属学院</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="cek" id="c1"></td>
                <td>JavaScript</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="cek"></td>
                <td>css</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="cek"></td>
                <td>html</td>
                <td>前端与移动开发学院</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="cek"></td>
                <td>jQuery</td>
                <td>前端与移动开发学院</td>
            </tr>
            
        </tbody>
    </table>
    <script src="jquery.min.js"></script>
    <script>
        var cekall=$('#checkall')//获取全选复选框
        var cek=$('.cek')//获取每个复选框
        cekall.click(function(){//全选复选框点击事件
            var ck=$(this).prop('checked')//定义一个量，让每个复选框的状态处于选中状态
            cek.prop('checked',ck)//让每个复选框都选中
        })

       
        cek.change(function(){//定义一个事件
        l1=$('.cek:checked').length//先定义选中复选框的长度
        l2=$('.cek').length//在定义复选框的长度
        if(l1==l2){//如果选中的等于复选框，就是复选框全部被选中
            cekall.prop('checked',true)//让全选复选框处于true，因为在前面打印复选框的时候选中时全选框是true，没选中是false
        }else{
            cekall.prop('checked',false)
        }
    })
    </script>

定时器语法

var timer=setInterval(function(){},1000)
函数中是重复执行的代码块，1000代表时间是1000毫秒，也就是1秒
或者写一个单独的函数，然后用定时器调用
function fn(){}
var timer=setInterval(fn,1000)
clearInterval(timer);清除上面定时器的返回值，就是清除定时器的意思
简单示例如下：
var i=0;
var timer=setInterval(function(){
i++;
document.write(i)
if(i==5){
clearInterval(timer);
}
},1000)

Tab切换案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{
				color:red;
	
			}
			.block{
				display: none;
			}
		</style>
	</head>
	<body>
<div class="top">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
</div>
<div class="bot">
<div class="box">我是div1的内容</div>
<div class="box">我是div2的内容</div>
<div class="box">我是div3的内容</div>
</div>
	</body>
	<script src="jquery.min.js"></script>
	<script>
	$(".btn").click(function(){
	$(this).addClass("red").siblings().removeClass("red");
	var index=$(this).index();//获取当前点击按钮的索引号
	$(".box").eq(index).removeClass("block");
	$(".box").eq(index).siblings().addClass("block");
	})
	console.log($('.box').siblings())
	</script>
</html>

个人思路：

	先写三个button，再写三个div，给按钮添加点击事件，如果点击就让当时被点击的按钮获取red类，并且让他的兄弟移除red类。因为按钮和div索引相同，所以获取按钮的索引号，然后定义一个display:none的类，让索引号与按钮索引号相同的div移除block类，让他的兄弟获取block类。

3laravel写模块

3.1文章列表

首先把里的css,image,fonts,js放在public文件夹里，然后在views下新建一个post文件夹放blade.php文件，新建一个index.blade.php文件，把复制的代码放进去，然后把里面的路径改了。

先在web.php里编写路由

Route::get('posts','\App\Http\Controllers\PostController@index');

然后在控制器里编写index方法

    public function index(){
        $model=Post::orderby('id','desc')->get();
        return view('post.index',['posts'=>$model]);
    }

然后在前端页面的内容里这么写，别的不用动

开头写@foreach($posts as $post)

中间的内容用两个{}，里面用$post->数据库的内容

结尾写@endforeach

在地址栏里输入/posts，就能进到文章列表界面

3.2编写文章

编写文章分为两个步骤，首先在在web.php里写入以下代码

Route::get('posts/create','\App\Http\Controllers\PostController@create');
Route::post('posts','\App\Http\Controllers\PostController@store');

然后在控制器里新建create和store方法，create用于展示create.balde.php页面，store用于把写入的数据存到库里

    public function create(){
        return view('post.create');
    }
    public function store(){
        $title=request('title');
        $content=request('content');
        $model=new Post();
        $model->title=$title;
        $model->content=$content;
        $res=$model->save();
        if($res){
            return redirect('/posts');}

编写内容时用wangeditor编辑器，按照下图方法。

这时会出现一个问题，因为富文本编辑器是div标签。不是input。所以接收不到数据，把submit改为button，给form一个id，在js里写上以下代码，就可以传数据了。

document.querySelector('#btn_save').addEventListener('click',function(){
    // 根据id获取表单
    var form=document.querySelector('#form_post')

    // 创建一个 input
    var input=document.createElement('input')
    input.type="text"
    input.name='content'
    // 获取的是 编辑器中用户输入的内容
    input.value=editor.txt.html()
    form.appendChild(input)
    console.log(form);
   
    // 调用表单的 submit 方法提交表单
    form.submit()
})

返回的界面可能出现419，这是由于 CSRF 保护引起的，这时我们在form表单里添加@csrf就可以了，他会自动生成一段代码

还有一个问题，当点击图片上传时无法上传本地文件，在web.php写入下面代码

Route::post('/posts/upload/image','\App\Http\Controllers\PostController@upload');

在js里写下面的代码

var E = window.wangEditor
var editor = new E('#content')
// 配置 server 接口地址
editor.config.uploadImgServer = '/posts/upload/image'
editor.config.uploadFileName = 'file'
editor.config.uploadImgHeaders = {
    Accept: 'text/x-json',
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}

editor.create()

在控制器里写上下面的代码，

public function upload()
    {
        // 获取上传的图片，并将其保存到一个叫做 upload 的文件夹下
        // 如果没有这个文件夹，会自动创建
        // laravel 会为这个图片生成一个随机的名称
        $file = request()->file('file')->store('upload');
        return [
            'errno' => 0,
            'data' => [
                asset('/storage/' . $file)
            ]
        ];
    }

3.3文章详情页

先修改超链接

在web.php写入下面代码

Route::get('/posts/{id}','\App\Http\Controllers\PostController@show');

在控制器里写入下面代码

    public function edite($id)
    {
        $model = Post::find($id);
        return view('post.edite', ['post' => $model]);      
    }

3.4文章编辑

编辑的实质就是在添加页面写入数据库的东西，在web.php里写下面的代码

Route::get('/posts/{id}/edit','\App\Http\Controllers\PostController@edite');
Route::put('/posts/{id}','\App\Http\Controllers\PostController@update');

在控制器里写下面的代码

 public function edite($id)
    {
        // 根据id获取文章详细信息
        $model = Post::find($id);
        return view('post.edite', ['post' => $model]);      
    }
    
     public function update($id)
    {
        // 根据id查询到文章
        $model = Post::find($id);
        $model->title = request('title');
        $model->content = request('content');
        $res = $model->save();
        if ($res) {
            return redirect("/posts/{$id}");
        } else {
            return redirect("/posts/{$id}/edit");
        }
    }

3.5删除文章

这里的删除是软删除，不会真正把数据删除，查询的时候不会查询出来，首先在web.php写入代码

Route::get('/posts/{id}/delete','\App\Http\Controllers\PostController@delete');

控制器

public function delete($id)
    {
        $res = Post::find($id)->delete();
        if ($res) {
            return redirect("/posts");
        } else {
            return redirect("/posts/{$id}");
        }
    }

4ajax的增删改查

4.1查询

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="hero.css">
</head>
<body>
<a href="#" id="btn_showAdd">添加英雄</a>
<table border="1px" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
        <th>英雄名称</th>
        <th>英雄技能</th>
        <th>英雄职业</th>
        <th>英雄皮肤</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
    </body>
</html>

js页面

loadhero();
function loadhero(){
    var xhr = new XMLHttpRequest();
    xhr.open('get','list.php')
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
            document.querySelector('tbody').innerHTML=''
            var data = JSON.parse(xhr.responseText);
            data.forEach(function(ele,index){
                var tr = document.createElement('tr');
                tr.innerHTML=`
                    <td>${ele.title}</td>
                    <td>${ele.skill}</td>
                    <td>${ele.job}</td>
                    <td>${ele.skin}</td>
                    <td>
                        <a href="javascript:void(0)" class="edite" >编辑</a>
                        <a href="javascript:void(0)" class="btn_delete" data-id="${ele.id}">删除</a>
                    </td>
                    `
                document.querySelector('tbody').appendChild(tr);
            })

        }
    }
    xhr.send();
}

php后台

<?php
$link=mysqli_connect('localhost','root','root','blog');
mysqli_set_charset($link,'utf8');
$sql='select * from heroe';
$res=mysqli_query($link,$sql);
if ($res!=false){
    $heroe=mysqli_fetch_all($res,MYSQLI_ASSOC);
    echo json_encode($heroe);
}

个人思路：先写html生成一个只有表头没有内容的表格，然后在下面引入js文件，js里先定义一个函数叫loadhero，接着创建对象，配置请求方式和地址，注册事件，接受服务器返回的数据，里面先写一个console.log(xhr.responseText),下面在发送请求，之后写php代码，先连库，语法是查询，然后当语法执行时，定义一个$hero返回库中取得的行作为关联数组，在用json_encode输出，回到js在事件里用JSON.parse接收，在接收前用document.querySelector(‘tbody’).innerHTML=’'清空数据，然后遍历返回的数据，在遍历语法里创一个元素叫tr，让tr获取数据库的内容，最后在tbody里添加tr子节点。

4.2增加数据

html新增

    <div class="add_box">
        <span class="close">X</span>
        <div class="row">
            <label for="title">英雄名称</label>
            <input type="text" id="title">
        </div>
        <div class="row">
            <label for="job">英雄职业</label>
            <input type="text" id="job">
        </div>
        <div class="row">
            <label for="skill">英雄技能</label>
            <input type="text" id="skill">
        </div>
        <div class="row">
            <label for="skin">英雄皮肤</label>
            <input type="text" id="skin">
        </div>
        <div class="row">
            <button id="btn_add">保存</button>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="cover"></div>

css

.cover{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .3);
}
.add_box{
    display: none;
   position: absolute;
   width: 600px;
  
   left: 50%;
   top: 50%;
   margin-left: -300px;
   margin-top: -150px;
   padding: 15px;
   
   background-color: #fff;
   z-index: 999;
}
.close{
    position:absolute;
    width: 20px;
    height: 20px;
    right: 10px;
    top: 10px;
    border: 1px solid black;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

js

var btn_add = document.querySelector('#btn_add')
var close = document.querySelector('.close')
var cover = document.querySelector('.cover')
var add_box = document.querySelector('.add_box')
var btn_showAdd = document.querySelector('#btn_showAdd')
var tbody = document.querySelector('tbody');
btn_showAdd.addEventListener('click', function () {
    cover.style.display = 'block'
    add_box.style.display = 'block'
})
close.addEventListener('click', function () {
    cover.style.display = 'none'
    add_box.style.display = 'none'
})
cover.addEventListener('click', function () {
    cover.style.display = 'none'
    add_box.style.display = 'none'
})
btn_add.addEventListener('click', function () {
    var title = document.querySelector('#title').value
    var job = document.querySelector('#job').value
    var skill = document.querySelector('#skill').value
    var skin = document.querySelector('#skin').value
    var xhr = new XMLHttpRequest()
    xhr.open('post', 'add.php')
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.responseText == 'ok') {
                cover.style.display = 'none'
                add_box.style.display = 'none'
                loadhero()
            } else {

            }
        }
    }
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(`title=${title}&job=${job}&skill=${skill}&skin=${skin}`)
})

php

<?php
$title=$_POST['title'];
$job=$_POST['job'];
$skill=$_POST['skill'];
$skin=$_POST['skin'];

// 创建连接
$link=mysqli_connect('localhost','root','root','blog') or die('连接失败');
// 设置编码
mysqli_set_charset($link,'utf8');
// 拼写sql语句
$sql="insert into heroe values(null,'$title','$job','$skill','$skin')";
// echo $sql;
// 查询
$res=mysqli_query($link,$sql);
if($res==true){
    echo 'ok';
}else{
    echo 'no';
}

个人思路：先用一个盒子把添加的模板隐藏起来，当点击添加按钮时添加页面才能出来，在设置一个遮罩层，当点击遮罩层时，遮罩层和添加界面都会关闭，在js页面先把按钮都获取，在分别设置点击事件，在添加按钮事件里先获取几个输入框的值，再写必备的语句，然后写php语句，先接收传过来的值，当增加语句执行时会传ok，然后在js写当xhr.responseText == 'ok’时，添加模板和遮罩层都会消失，然后调用查询函数。在发送请求前再写上xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);。发送请求里用模板字符串写上title=KaTeX parse error: Expected 'EOF', got '&' at position 8: {title}&̲job={job}&skill=KaTeX parse error: Expected 'EOF', got '&' at position 8: {skill}&̲skin={skin}。

4.3删除

js

	tbody.addEventListener('click', function (e) {
    if (e.target.className == 'delete') {
        // 让用户确认是否删除
        var res=confirm('真的姚删除吗?')
        if(!res){ // res==false
            return false;
        }
        var id=e.target.dataset.id
        var xhr=new XMLHttpRequest()
        xhr.open('get','delete.php?id='+id)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.responseText=='ok'){
                    loadHeroes()
                    alert('删除成功')
                }else{
                    alert('删除失败')
                }
            }
        }
        xhr.send()
    }

php

<?php
$id=$_GET['id'];
$link=mysqli_connect('localhost','root','root','blog') or die('连接失败');
mysqli_set_charset($link,'utf8');
$sql="delete from heroe where id=$id";

$res=mysqli_query($link,$sql);
if($res){
    echo 'ok';
}else{
    echo 'no';
}

个人思路：在增加的js语法里在删除里定义一个data-id的自定义标签，让他等于这个数据的id，利用事件委托和冒泡机制，当点击的类名时delete时，会弹出一个框提示用户是否删除，之后定义一个id获取它自定义属性的id然后写上必备语句，在 配置地址里用?传值去锁定他的id，php里写上删除语句，成功执行会输出ok给服务器，当js里的xhr.responseText等于ok时，调用查询函数并弹出删除成功，否则弹出删除失败。

4.4编辑

js

else if(e.target.className=='edite'){
        cover.style.display='block'
        edite_box.style.display='block'
        var id=e.target.dataset.id
        var xhr=new XMLHttpRequest()
        xhr.open('get','getHeiroById.php?id='+id)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
               var data=JSON.parse(xhr.responseText)
               document.querySelector('#edite_id').value=data.id
               document.querySelector('#edite_title').value=data.title
               document.querySelector('#edite_job').value=data.job
               document.querySelector('#edite_skill').value=data.skill
               document.querySelector('#edite_skin').value=data.skin
            }
        }
        xhr.send()
    }
})
btn_edite.addEventListener('click',function(){

    var id=document.querySelector('#edite_id').value
    var title = document.querySelector('#edite_title').value
    var job = document.querySelector('#edite_job').value
    var skill = document.querySelector('#edite_skill').value
    var skin = document.querySelector('#edite_skin').value

    var xhr=new XMLHttpRequest()
    xhr.open('post','edite.php')
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.responseText=='ok'){
                cover.style.display='none'
                edite_box.style.display='none'
               
                

                loadHeroes()
            }else{
                alert('更新失败')
            }
        }
    }
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(`id=${id}&title=${title}&job=${job}&skill=${skill}&skin=${skin}`)
})

php

<?php
$id=$_POST['id'];
$title=$_POST['title'];
$job=$_POST['job'];
$skill=$_POST['skill'];
$skin=$_POST['skin'];


$link=mysqli_connect('localhost','root','root','blog') or die('连接失败');
mysqli_set_charset($link,'utf8');
$sql="update heroe set title='$title',job='$job',skill='$skill',skin='$skin'
where id=$id";

$res=mysqli_query($link,$sql);
if($res==true){
    echo 'ok';
}else{
    echo 'no';
}

<?php
$id=$_GET['id'];
$link=mysqli_connect('localhost','root','root','blog') or die('连接失败');
mysqli_set_charset($link,'utf8');
$sql="select * from heroe where id=$id";
$res=mysqli_query($link,$sql);
if($res){
    $hero=mysqli_fetch_assoc($res);
    echo json_encode($hero);
}

html

    <div class="edite_box">
        <span class="close">X</span>
        <!-- 隐藏域，用来存储英雄id -->
        <input type="hidden" id="edite_id">
        <div class="row">
            <label for="edite_title">英雄名称</label>
            <input type="text" id="edite_title">
        </div>
        <div class="row">
            <label for="edite_job">英雄职业</label>
            <input type="text" id="edite_job">
        </div>
        <div class="row">
            <label for="edite_skill">英雄技能</label>
            <input type="text" id="edite_skill">
        </div>
        <div class="row">
            <label for="edite_skin">英雄皮肤</label>
            <input type="text" id="edite_skin">
        </div>
        <div class="row">
            <button id="btn_edite">保存</button>
        </div>
    </div>

eroe where id=$id";
$res=mysql{i}_{q}uery($link,$sql);if($res){
$hero=mysql{i}_{f}etc{h}_{a}ssoc($res);
echo json_encode($hero);
}

#### html

```html
    <div class="edite_box">
        <span class="close">X</span>
        <!-- 隐藏域，用来存储英雄id -->
        <input type="hidden" id="edite_id">
        <div class="row">
            <label for="edite_title">英雄名称</label>
            <input type="text" id="edite_title">
        </div>
        <div class="row">
            <label for="edite_job">英雄职业</label>
            <input type="text" id="edite_job">
        </div>
        <div class="row">
            <label for="edite_skill">英雄技能</label>
            <input type="text" id="edite_skill">
        </div>
        <div class="row">
            <label for="edite_skin">英雄皮肤</label>
            <input type="text" id="edite_skin">
        </div>
        <div class="row">
            <button id="btn_edite">保存</button>
        </div>
    </div>

个人思路：先写一个和添加盒子差不多的html但是在上面得写一个隐藏域用来写id，js分成两个步骤，当你点击的类名时edite时，编辑的盒子和遮罩层都会出来，然后利用get把id传给php，php里写查询语句where 数据库的id等于传过来的id，在js里在获取穿过来的数据库里行的数组，让编辑页面的文本框的值等于库的值。在给更新按钮一个点击事件，先把文本框的值分别获取，写上必备的语句，利用post传给php，php在用post接收，当更改语句执行成功时，会给服务器返回ok，js在用xhr.responseText等于ok，在让编辑框和遮罩层消失，调用查询函数，否则会弹出失败，在js最后面写上xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);，并且在send把值传过去。