vue 与后台交互的 增删 改查

vue 与后台交互的 增删 改查

首先，先把后台的增删改查接口写完，我的代码如下：

//展示
public function index()
{
    $data = Shop::all();
    return json_encode($data);
}

/**
 * @return string
 */
 
public function show()
{
    $id = $_GET['id'];
    $data = Shop::findOrFail($id);
    return json_encode($data);
}

/**
 * @param Request $request
 * @return string
 * 修改
 */
 //修改
public function update(Request $request)
{
   $id = $_GET['id'];
    $res=Shop::findOrFail($id);
    $data = $res->update([
        'name'=>$request->name,
        'price'=>$request->price,
        'stock'=>$request->stock
    ]);
    if ($data) {
        return json_encode(['code' => '2000', 'msg' => '修改成功']);
    } else {
        return json_encode(['code' => '1001', 'msg' => '修改失败']);
    }
}
/**
 * @return string
 * 删除
 */
 //删除
public function del()
{
    $id = $_GET['id'];
    $data = Shop::findOrFail($id);
    $res = $data->delete();
    $info = Shop::all();
    if ($res) {
        return json_encode(['code' => '2000', 'msg' => '删除成功', 'data' => $info]);
    } else {
        return json_encode(['code' => '1001', 'msg' => '删除失败']);
    }
}

/**
 * @param Request $request
 * @return string
 * 添加
 */
 //添加
public function add(Request $request)
{
    $data = Shop::create([
        'name' => $request->name,
        'price' => $request->price,
        'stock' => $request->stock
    ]);
    if ($data) {
        return json_encode(['code' => '2000', 'msg' => '添加成功']);
    } else {
        return json_encode(['code' => '1001', 'msg' => '添加失败']);
    }
}

vue我先写的展示、：

下面是我的效果图：

当你点击删除时会调用删除的方法，

点击添加跳到

这是添加效果图：样式可以自己加

点击修改时跳到

效果图：