前后端分离开发中的laravel
创建一个前端目录,然后再里面写html页面
用命令行下载laravel框架,在里面写后台代码
前后端分离开发中的文章的增删改查
创建一个idnex.html
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.modal1{
display:none;
position: fixed;
left: 650px;
top: 0;
}
.modal2{
display:none;
position: fixed;
left: 650px;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<button class="btn btn-primary add">添加文章</button>
<table class="table">
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- 添加数据的模态框 -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-toggle="modal" data-target="#myModal"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">添加数据</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">标题</label>
<input type="email" class="form-control" id="title" placeholder="请输入标题">
</div>
<div class="form-group">
<label for="">内容</label>
<textarea name="" id="content" cols="30" rows="10" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close1" data-dismiss="modal" data-toggle="modal" data-target="#myModal">关闭</button>
<button type="button" class="btn btn-primary save">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 编辑数据的模态框 -->
<div class="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close close2" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">更新数据</h4>
</div>
<div class="modal-body">
<input type="hidden" id="id">
<div class="form-group">
<label for="">标题</label>
<input type="email" class="form-control" id="title1" placeholder="请输入标题">
</div>
<div class="form-group">
<label for="">内容</label>
<textarea name="" id="content1" cols="30" rows="10" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close3" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary save1">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
<script>
load();
function load(){
$("tbody tr").remove();
$.ajax({
url:"http://127.0.0.1:8000/posts",
type:"get",
dataType:"json",
success:function(res){
// console.log(res);
$(res).each(function(k,v){
var tr=`<tr>
<td><a href="xiang.html?id=${v.id}"">${v.id}</a></td>
<td><a href="xiang.html?id=${v.id}">${v.title}</a></td>
<td>
<a href="#" class="btn btn-info edit" data-code="${v.id}">编辑</a>
<a href="#" class="btn btn-danger del" data-id="${v.id}">删除</a>
</td>
</tr>`
$('tbody').append(tr);
})
}
})
}
$(".add").on('click',function(){
$(".modal").css('display','block');
})
$(".close,.close1").on('click',function(){
$(".modal").css('display','none');
})
$("tbody").on('click','.edit',function(){
$(".modal1").css('display','block');
})
$(".close2,.close3").on('click',function(){
$(".modal1").css('display','none');
})
$(".save").on('click',function(){
var data={title:$("#title").val(),content:$("#content").val()};
$.ajax({
url:"http://127.0.0.1:8000/posts",
data:data,
type:"post",
dataType:"json",
success:function(res){
// console.log(res);
if(res.error==0){
//从新加载页面
load();
//关闭模态框
$(".modal").css('display','none');
}
}
})
})
//删除数据
$("tbody").on('click','.del',function(){
var id=$(this).data("id");
// console.log(id);
$.ajax({
url:`http://127.0.0.1:8000/posts/${id}`,
type:"post",
data:{_method:'DELETE'},
success:function(res){
// console.log(res);
if(res.error==0){
//重新加载数据
load();
}
}
})
})
//编辑数据
$("tbody").on('click','.edit',function(){
$(".modal1").css("display",'block');
var id=$(this).data("code");
// console.log(id);
$.ajax({
url:`http://127.0.0.1:8000/posts/${id}/edite`,
dataType:"json",
success:function(post){
console.log(post);
$("#id").val(post.id);
$("#title1").val(post.title);
$("#content1").val(post.content);
}
})
})
//更新数据
$(".save1").on('click',function(){
var id=$("#id").val();
data={title:$("#title1").val(),content:$("#content1").val()};
$.ajax({
url:`http://127.0.0.1:8000/posts/${id}/edit`,
data:data,
dataType:"json",
type:"post",
success:function(res){
// console.log(res);
if(res.error==0){
//从新加载页面
load();
//关闭模态框
$(".modal1").css('display','none');
}
}
})
})
</script>
后端控制器
use Illuminate\Support\Facades\Route;
//展示文章数据
Route::get('/posts','PostController@index');
//添加数据
Route::post('/posts','PostController@store');
//删除数据
Route::delete('/posts/{post}','PostController@delete');
//展示待编辑页面
Route::get('/posts/{post}/edite','PostController@update');
//编辑数据
Route::post('/posts/{post}/edit','PostController@edite');
//详情页面
Route::get('/posts/{post}/xiang','PostController@xiang');
控制器代码
//获取文章信息
public function index(){
$res=Post::all();
return response()->json($res);
}
//增加数据
public function store(){
$title=request('title');
$content=request('content');
$model=new Post();
$model->title=$title;
$model->content=$content;
$res=$model->save();
if($res){
return response()->json([
'error'=>0,
'msg'=>'success',
'data'=>null
]);
}else{
return response()->json([
'error'=>201,
'msg'=>'error',
'data'=>null
]);
}
}
//删除数据
public function delete(Post $post){
$res=$post->delete();
if($res){
return response()->json([
'error'=>0,
'msg'=>'success',
'data'=>null
]);
}else{
return response()->json([
'error'=>201,
'msg'=>'error',
'data'=>null
]);
}
}
//展示待更新页面
public function update(Post $post){
return response()->json($post);
}
//更新数据
public function edite($post){
$model=Post::find($post);
$model->title=request('title');
$model->content=request('content');
$res=$model->save();
if($res){
return response()->json([
'error'=>0,
'msg'=>'success',
'data'=>null
]);
}else{
return response()->json([
'error'=>201,
'msg'=>'error',
'data'=>null
]);
}
}
//详情页
public function xiang(Post $post){
return response()->json($post);
}
再写增删改查的时候发生的错误
就是老是报500的错误(内置服务器错误),错误如下
这种错误就是后台的代码写错了,仔细检查一下会找到不同的效果
加油奥~~~~~