前后端分离开发中的laravel实例2

最新推荐文章于 2024-04-30 13:40:25 发布

雨打荷叶

最新推荐文章于 2024-04-30 13:40:25 发布

阅读量204

点赞数 1

分类专栏： php Ajax jQuery 文章标签： laravel

本文链接：https://blog.csdn.net/qq_43358160/article/details/103499768

版权

php 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

前后端分离开发中的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">&times;</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">&times;</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的错误（内置服务器错误），错误如下
在这里插入图片描述这种错误就是后台的代码写错了，仔细检查一下会找到不同的效果
加油奥~~~~~

雨打荷叶

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前后端分离开发中的laravel实例2

前后端分离开发中的laravel创建一个前端目录，然后再里面写html页面用命令行下载laravel框架，在里面写后台代码前后端分离开发中的文章的增删改查创建一个idnex.html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></...
复制链接

扫一扫

专栏目录