简单的laravel增删改查+ajax分页

控制器

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\teachers\Teacher;
use function Sodium\compare;
use DB;
class TeachersController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
     /**ajax分页**/
    public function index()
    {
        $page=isset($_GET['page'])?$_GET['page']:1;
        $count=count(Teacher::get());
        $rev='3';

        $sums=ceil($count/$rev);
        $prev=($page-1)>1?$page-1:1;
        $next=($page+1)<$sums?$page+1:$sums;
        $offset=($page-1)*$rev;
        $data=DB::select("select * from teachers limit $offset,$rev");

        return view('teachers.index',compact('data','prev','next','sums'));
    }

public function create()
{
    return view('teachers.create');
}
/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
 /**添加**/
public function store(Request $request)
{
    $title=$_POST['title'];
    $email=$_POST['email'];
    $pwd=$_POST['pwd'];
    $res=DB::table('teachers')->insert([
        'title' => $title,
        'email' => $email,
        'pwd' => encrypt($request->pwd),
        'password' => encrypt($request->password),
    ]);` var_dump($res);die;
    if($res){
        echo '注册成功';
    }else{
        echo '注册失败';
    }
}`

//

/**
 * Display the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */

/**
 * Show the form for editing the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
 /**修改**/
public function edit($id)
{
    $teacher=Teacher::findOrFail($id);
    return view('teachers.edit',compact('teacher'));
}

/**
 * Update the specified resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
 //修改
public function update(Request $request, $id)
{
    $this->validate($request, [
        'title' => 'required|max:50',
    ]);

    $teacher = Teacher::findOrFail($id);
    $teacher->update([
        'title' => $request->title,
        'email' => $request->email,
        'pwd'=>$request->pwdd,
        'password'=>$request->password,
    ]);`    return back();
}`



/**
 * Remove the specified resource from storage.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
 //删除
public function destroy($id)
{
    $teachers=Teacher::findOrFail($id);
    $teachers->delete($id);
    return back();
}
  }
  
    `## 视图层
    
    /**添加页面**/
    create
    @extends('layouts.app')
    
    @section('content')
        <form action="{{ route('teachers.store') }}" method="post">
            {{ csrf_field() }}
            <label>Title</label>
            <input type="text" name="title" style="width:100%;" value="{{ old('title') }}">
            <label>Title</label>
            <input type="text" name="email" style="width:100%;" value="{{ old('title') }}">
            <label>密码</label>
            <input type="password" name="pwd" style="width:100%;" value="{{ old('pwd') }}">
            <button type="submit">OK</button>
        </form>
    @endsection`
    
/**显示页面**/
    index
    @section('content')
        <`在这里插入代码片`div style="border: 1px solid gray;margin-top: 20px;padding: 20px" id="box">
            @foreach($data as $teacher)
               <td>{{$teacher->id}}</td>
                <h2>{{$teacher->title}}</h2>
                <h3>{{$teacher->email}}</h3>
                <p>{{$teacher->pwd}}</p>
                <p>{{$teacher->password}}</p>
    <a href="{{route('teachers.edit',$teacher->id)}}">Edit</a>

        <form action="{{route('teachers.destroy',$teacher->id)}}" method="post">
            {{csrf_field()}}
            {{method_field('DELETE')}}
            <button type="submit">Delete</button>
        </form>
    @endforeach

        <a href="javascript:void(0)" onclick="page(1)">首页</a>
        <a href="javascript:void(0)" onclick="page({{$prev}})">上一页</a>
        <a href="javascript:void(0)" onclick="page({{$next}})">下一页</a>
        <a href="javascript:void(0)" onclick="page({{$sums}})">尾页</a>
</div>`@endsection
@extends('layouts.app')
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    function page(p){
        $.ajax({
          type:'get',
          url:"{{route('index')}}",
          data:{page:p},
          success:function(msg){
              if(msg){
                  $('#box').html(msg);
              }
          }
        })
    }
</script>

/*修改页面*/
edit
@extends('layouts.app')
@section('content')
    <form action="{{route('teachers.update',$teacher->id)}}" method="post">
        {{csrf_field()}}
        {{ method_field('PATCH') }}
        <label>用户名</label>
        `<input type="text" name="title" style="width: 100%;" value="{{$teacher->title}}">
        <label>邮箱</label>
        <input type="text" name="email" style="width: 100%" value="{{$teacher->email}}">
        <label>密码</label>
        <input type="password" name="pwd" style="width: 100%" value="{{$teacher->pwd}}">
        <label>确认密码</label>
        <input type="password" name="password" style="width: 100%;" value="{{$teacher->password}}">
        <button type="submit">Edit</button>
    </form>
@endsection``

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个典型的前后端分离的例子,我可以给您提供一个简单的示例代码,来帮助您理解如何使用 Vue3 + Vite + Ajax + SpringBoot 实现增删改查功能。 前端使用 Vue3 + Vite + Ajax 实现: 1. 在 Vue3 中,使用 `axios` 或者 `fetch` 进行 AJAX 请求,请求后端 SpringBoot 服务器,获取数据或者提交数据。 2. 在 Vue3 中,使用 `vue-router` 进行 SPA 单页应用的路由控制,实现前端页面的跳转。 3. 在 Vue3 中,使用 `vuex` 进行状态管理,方便组件之间的数据共享和传递。 下面是一个简单的 Vue3 组件的示例代码: ```vue <template> <div> <h1>用户列表</h1> <table> <thead> <tr> <th>ID</th> <th>用户名</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.email }}</td> <td> <button @click="editUser(user)">编辑</button> <button @click="deleteUser(user.id)">删除</button> </td> </tr> </tbody> </table> </div> </template> <script> import axios from 'axios'; export default { name: 'UserList', data() { return { users: [], }; }, methods: { async getUsers() { const response = await axios.get('/api/users'); this.users = response.data; }, async deleteUser(id) { await axios.delete(`/api/users/${id}`); this.getUsers(); }, editUser(user) { // 跳转到编辑用户页面,使用 vue-router this.$router.push(`/users/${user.id}`); }, }, mounted() { this.getUsers(); }, }; </script> ``` 后端使用 SpringBoot 实现: 1. 在 SpringBoot 中,使用 `@RestController` 和 `@RequestMapping` 注解定义 RESTful API 接口,实现增删改查的逻辑。 2. 在 SpringBoot 中,使用 `@Service` 和 `@Repository` 注解定义服务层和数据访问层,实现业务逻辑和数据库操作。 3. 在 SpringBoot 中,使用 `Spring Data JPA` 或者 `MyBatis` 等框架进行数据库操作,简化代码编写。 下面是一个简单的 SpringBoot Controller 的示例代码: ```java @RestController @RequestMapping("/api/users") public class UserController { private final UserService userService; public UserController(UserService userService) { this.userService = userService; } @GetMapping public List<User> listUsers() { return userService.listUsers(); } @PostMapping public void createUser(@RequestBody User user) { userService.createUser(user); } @PutMapping("/{id}") public void updateUser(@PathVariable Long id, @RequestBody User user) { userService.updateUser(id, user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userService.deleteUser(id); } } ``` 这是一个简单增删改查的示例代码,您可以根据自己的需要进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值