Write the Code. Change the World.

7月 31

前边写了一个 laravel mix vue 的基本构造使用。虽然那种结构能跑起来,可受限 laravel 自己的功能。这次,要利用 vue 的优势,elemeui 的优势,独立去构建项目。

前边一部分操作是一样的。

从零开始操作

这里以 laravel7 为例子,来使用 vue。

先安装 laravel 7

composer create-project laravel/laravel --prefer-dist testvue.cn "7.*"

cd testvue.cn

# 查看 laravel 的版本(发现是 7.22.4)
php artisan -V

# 创建 git 仓库
git init
git add .
git commit -m 'laravel 7.22.4 initialize'

浏览器访问 testvue.cn, 发现能正常访问到 laravel 基础页面(之前已经配合域名映射这些)。
继续阅读

7月 31

laravel 初始化是不带 ui 这些的,可它天生支持 bootstrap,vue,react 这些。只需要安装配置下即可。

从零开始操作

这里以 laravel7 为例子,来使用 vue。

先安装 laravel 7

composer create-project laravel/laravel --prefer-dist testvue.cn "7.*"

cd testvue.cn

# 查看 laravel 的版本(发现是 7.22.4)
php artisan -V

# 创建 git 仓库
git init
git add .
git commit -m 'laravel 7.22.4 initialize'

浏览器访问 testvue.cn, 发现能正常访问到 laravel 基础页面(之前已经配合域名映射这些)。
继续阅读

7月 30

laravel 写接口的时候,通常会建立 request。在 request 中验证一些参数。这个时候用 postman 或其他请求时候,会发生返回 html 的情况,非 json 格式。该么处理呢。

简单操作一下

TestController.php

public function store(TestRequest $request)
{
    $result = $request->only(['name', 'num']);

    return response()->json($result)->setStatusCode(201);
}

继续阅读

7月 29

小程序 swiper 组件,没有禁止手动滑动的属性。可这个功能体验很重要。该怎么实现呢。有人觉得在上边盖一层,这样虽然可以实现禁止滑动了,可和 swiper 里边的交互就不能实现了。这样也不好。还有一种方式,在 swpier-item 上增加拦截事件。

<swiper class="swiper" :duration="600" :disable-touch="false">
    <swiper-item v-for="(item, index) in menus" :key="index" catchtouchmove="catchTouchMove" @touchstart.stop="catchTouchMove" >
        <span>{{item}}</span>
    </swiper-item>
</swiper>

...

# vue methods
catchTouchMove() {
    return false;
},
7月 28

项目弄好了,就要做发布的准备。主要是部署的非根目录的配置。

这里,配置在根目录下的 admin 目录。

修改 config/config.ts,增加下边的配置:

  …
  base: '/admin/',
  outputPath: '../../public/admin',
  publicPath: '/admin/',
  manifest: {
    basePath: '/admin/',
  },

修改 nginx, 增加下边的配置:

    location /admin  {
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }
7月 28

linux 下使用 ant design pro 安装依赖的时候,会出现 /bin/sh: 1: umi: not found 问题。需要更改编译模式。

cd /bin

ls -lh sh

# 结果 lrwxrwxrwx 1 root root 4 Jan 21  2020 sh -> dash

下边将 dash 改成 bash。

sudo dpkg-reconfigure dash

# 选择 no 保存即可。

# 然后再执行 ls -lh sh 发现结果是

lrwxrwxrwx 1 root root 4 Jul 28 11:09 sh -> bash

好了,就这样了。

7月 24

还是那句话,喜欢简洁,有强迫症,就是想弄。那么,从路由和注册登录开始。先去掉其他路由,仅仅保存注册登录和welcome。去掉其他页面,从零开始。

修改路由

编辑 /config/config.ts,修改路由配置如下:

  routes: [
    {
      path: '/user',
      layout: false,
      routes: [
        {
          name: 'login',
          path: '/user/login',
          component: './user/auth',
        },
        {
          name: 'register',
          path: '/user/register',
          component: './user/auth',
        }
      ],
    },
    {
      path: '/welcome',
      name: 'welcome',
      icon: 'smile',
      component: './Welcome',
    },
    {
      path: '/',
      redirect: '/welcome',
    },
    {
      component: './404',
    },
  ],

注册和路由都进同一个 component, 然后根据路由进行不同的渲染。
继续阅读

7月 23

ant design pro v5 在 /src/components/ 下暴露一些顶栏以及底栏的功能。可以在这里进行其功能定义。之前就说过,ant design pro 很多地方不完美,需要自己去打造和改变。

作为一个疯狂的极简的完美追求者, 打开 /src/components/RightContent/ 下的 index.tsx,删掉只剩下这么点东东了。

  return (
    <Space className={className}>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
    </Space>
  );

然后就只剩下头像和昵称了。

删掉 /src/components/HeaderSearch 这个目录。如果需要什么,再自己扩展。删掉不需要的引用。

修改 Avatar,暴露出个人中心等 dropMenu。虽然暴露了,可没有对应的路由页面,点击是 404 。如果想关掉,去掉 menu 设置。如果想扩展 dropMenu 的功能,可以在 ./AvatarDropdown 里边修改逻辑。

<Avatar  menu={true} />

额外

如何利用 React Hooks API 做全局状态管理?

https://umijs.org/plugins/plugin-initial-state#loading

7月 23

ant design pro 版本总是更新,总是没稳定下来。前段时间 v5 也出来了,和 v4 差别蛮大的。就样式来说,我更喜欢宽点的侧边栏,更喜欢将侧边栏伸缩按钮放在顶部。更喜欢暴露更多的 layout,去定义自己想要的。喜欢更简洁,更少的展示的元素。不是专业研究前端的,核心东西还是没深入。从零开始创建项目以及变更项目吧。

安装

yarn create umi

# 选择 ant design pro
# 选择 v5
# 等待下载

# 安装依赖包
yarn 

# 启动,先看看效果(默认样式太丑陋,兼职无语)
yarn start

# git 操作
git init
git add .
git commit -m 'ant-design-pro-v5-initialize'

到此, ant design pro v5 已经安装完成。但页面太丑陋,和曾经的页面完全不是一个样。页面丑陋是由 div 和 css 决定的。下边修改下配置,使得样式稍微好看一点。

继续阅读