组团开发全栈——用 antd vue Pro 做前端,用 Laravel7.0 做后端 API 支持!

如今的WEB,已经是前后端分离的天下,前端发展的如此迅速,Laravel7.0 兼容前端的VUE和REACT,个人感觉有很多好轮子,比如蚂蚁金服的前端框架 ANTD 的前端三大框架真的不错!

后端的API就用laravel来做!

组团开发报名哦!

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 37

支持做个一键CRUD的项目出来,类似laravel-admin这样子的,哈哈哈哈,觉得antd的前端用的很舒服

4年前 评论
dongzhiyu (楼主) 4年前
pikalu 4年前
blankqwq

报名!!!!

4年前 评论

一直在用laravel+antd开发,7.0+4.0有搞头

4年前 评论

报名了

4年前 评论
pikalu (作者) 4年前

antd vue Pro 要收钱的吗?

4年前 评论
dongzhiyu (楼主) 4年前

我也正在等Laravel 7 出来,做个全栈项目 :smile: :smile: :smile:

4年前 评论
CrazyZard

报名

4年前 评论

laravel 7 + passport 报名

4年前 评论

还是等段时间吧, Laravel 7 才 release, 很多 package 都还不支持...

4年前 评论

报名

4年前 评论

报名参与。这两东西都使用过。但是具体要做个什么?

4年前 评论

什么时候开搞?

4年前 评论

报名,laravel,vue都会

4年前 评论

咋报名啊

4年前 评论

还有位置没?加我一个!!!

4年前 评论

一群人等着发车

4年前 评论

难道是做外包吗?

4年前 评论

目标是准备做哪方面的?

4年前 评论

没消息了 :joy:

4年前 评论

我结合公司实际情况,写了一个帐号管理系统,先把截图呈上

帐号管理

file

详情

file

域名管理

file

主机管理

file

站点管理

file

前端框架React+AntD4.0,暂时没有用TS(项目有使用Larave-echo-server)

主要重新定义了鉴权模块的处理,来配合后端返回,还有自定义日期组件,因为日期组件接收的时间格式原因,以及其他细节优化。

import React from 'react';
import moment from "moment";
import { DatePicker } from 'antd';

const CustomDatePicker = props => {
  const {value, onChange, ...other} = props;
  const time = value ? moment(value) : null;
  const triggerChange = (_, dateStr) => {
    onChange && onChange(dateStr);
  };

  return (
    <DatePicker
      defaultValue={time}
      onChange={triggerChange}
      {...other}
    />
  )
};

export default CustomDatePicker;

后端主要是Laravel7.0

鉴权使用airlock+laravel-permission

自己写了一个AntRequestMiddleware来转换接收数据和相应

    public function handle($request, Closure $next)
    {
        $request->headers->set('Accept', 'application/json');
        $this->handleQueries($request->query);
        $response = $next($request);
        // 返回解析
        if ($response instanceof JsonResponse) {
            /* @var array $data */
            $data = $response->getData(true);
            $data['success'] = $response->isSuccessful();
            $response->setData($data);
        }

        return $response;
    }

    /**
     * 处理Query参数
     * @param ParameterBag $bag
     */
    protected function handleQueries(ParameterBag $bag)
    {
        // 过滤无效数据
        $params = collect($bag->all())->filter(function ($value) {
            $value = trim($value);
            return $value && !in_array($value, $this->invalid);
        });
        $data = [
            'with' => $params->get('with'),
            'withCount' => $params->get('withCount'),
            'sorter' => $params->get('sorter'),
            'page' => $params->get('current', 1),
            'pageSize' => $params->get('pageSize'),
            'filters' => $params->except(['with', 'withCount', 'sorter', 'current', 'pageSize'])->toArray()
        ];
        $bag->replace($data);
    }

对Laravel中的Resource二次封装,更易懂

基类ApiController

    /**
     * @param $resource
     * @param string|null $collects
     * @return JsonResponse
     */
    protected function toPagination($resource, $collects = null)
    {
        return (new CollectionResource($resource, $collects))->response();
    }

    /**
     * @param $resource
     * @param string|null $collects
     * @return JsonResponse
     */
    protected function toCollection($resource, $collects = null)
    {
        return (new CollectionResource($resource, $collects))->response();
    }

    /**
     * @param $resource
     * @return JsonResponse
     */
    protected function toItem($resource)
    {
        if ($resource instanceof JsonResource) {
            return $resource->response();
        }
        return (new JsonResource($resource))->response();
    }

    /**
     * @param array $data
     * @return JsonResponse
     */
    protected function toArray(array $data)
    {
        return response()->json(['data' => $data]);
    }


    /**
     * 为了返回结构一致
     *
     * @return JsonResponse
     */
    protected function noContent()
    {
        return response()->json([]);
    }

分页部分

    /**
     * @param Request $request
     * @return array
     */
    protected function paginationInformation($request)
    {
        $paginated = $this->resource->resource->toArray();

        return [
            'page' => Arr::get($paginated, 'current_page', 1),
            'total' => Arr::get($paginated, 'total', 0),
            'meta' => $this->antMeta($paginated),
        ];
    }

对于以上只贴了部分代码,懂的人自然懂!!

接下来会引入文档管理,看大家有没有兴趣一起。

4年前 评论
dongzhiyu (楼主) 4年前
小李世界 4年前
Fenguoz

@flykoala 我要参加react版本的

4年前 评论
小李世界 4年前

报名,但是一直好像没动静

4年前 评论
小李世界 4年前
黑将军

要用ts吗?

4年前 评论
李阳

我会,而且比较熟练react和laravel,上车的时候通知一下

4年前 评论
chenzx

antd版本的vue一点也不好用

4年前 评论

报名,有群吗?

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!