Write the Code. Change the World.

分类目录
9月 28

laravel 中 laravel-permission 对角色权限管理很好用。这里,就用这个玩意吧。突然想到一个额外的问题。项目中使用的是 Laravel Sanctum 来做认证。这样,仅仅是它自己可以使用了。如果想将 node.js 等和这个配合起来认证,就不好搞了。如果是用 jwt 来做,就不会出现这个问题。jwt 的实现都是一样的,各个语言都可以通用。岔开了,这里还是 laravel-permission 吧。

操作一波

文档:

https://spatie.be/docs/laravel-permission/v3/introduction

https://github.com/spatie/laravel-permission#installation

composer require spatie/laravel-permission

# 生成配置文件和迁移文件
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

# 如果之前做过缓存,需要这样处理下
php artisan config:clear

# 生成数据库表
php artisan migrate

继续阅读

9月 25

先看一个漂亮的 点击看漂亮的

UI

操作一波

编辑 resources/sass/_variables.scss,增加下边的定义

// 定义主题颜色
$primary:       #9c27b0 !default;
$success:       #4caf50 !default;
$info:          #00bcd4 !default;
$warning:       #ff9800 !default;
$danger:        #f44336 !default;

// 修改点击按钮的时候,按钮周围的边框,好难看,强迫症要干掉。这样会把input的边框也干掉了,不好。
$input-btn-focus-width:       0 !default;
$input-btn-focus-box-shadow:  none !default;

然后,执行编译打包。

yarn run dev

打包好后,刷新登录页面,是不是发现 input框,按钮都变了呀。

下一步

主题颜色也变了,那么下一步去搞搞在 blade 中使用 vue 组件的问题。虽然大多时候不需要 vue,要不就用纯 vue 了。可偶尔某些组件用 vue 还是蛮好的。

9月 22

操作一波

composer require laravel/ui

# 生成基本脚手架
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

# 生成 登录/注册 脚手架
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

这里,我们使用 php artisan ui bootstrap --auth 生成登录注册脚手架,后边根据需要改

# 安装依赖包
yarn --no-bin-links

# 跑
yarn run dev

继续阅读

9月 19

安装 vue element admin 的时候,默认带入了很多路由,模板,mock,api 等。如果从 0 开始,就需要去掉这些多余的东西。

操作一波

src/api 删除下边的文件,只留下 role.jsuser.js
.
├── role.js
└── user.js

src/components 组件暂不做处理,随着项目发展,某些组件还是很有用的。

src/router/modules/ 全删掉(如果需要,可后边对比补充)

src/router/index.js 修改成如下(其实就是去掉那些不想要的)
继续阅读

9月 18

这里的登录和传统的登录有一点不一样,传统的登录提交账号密码,正确就可以了。这里得先请求 /sanctum/csrf-cookie,再进行登录请求。

操作一波

在 vue element admin 目录中,先修改前端页面。

src/api/user.js 中增加:

export function csrfCookie() {
  return request({
    url: '/sanctum/csrf-cookie',
    method: 'get'
  })
}

继续阅读

9月 16

为了测试, 我们需要写入一些用户信息。

生数据前奏

为了方便数据的丰满性,这里给用户增加了昵称,性别,头像,签名等字段,更新后的迁移数据是这样的。

        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('account')->unique();
            $table->string('password');
            $table->string('nickname', 32)->comment('昵称');
            $table->unsignedTinyInteger('gender')->default(3)->comment('性别 1 男 2 女 3 未知');
            $table->string('avatar', 128)->nullable();
            $table->string('email')->unique();
            $table->string('signature')->nullable();
            $table->rememberToken();
            $table->timestamp('email_verified_at')->nullable();
            $table->timestamps();
        });

这里将 name 改成 account 了,email 后移了。使用 account 和 password 登录。而非 email。当然,account 你可以和 email 的数据一样。我个人喜好用手机作为 account。
继续阅读

9月 16

在测试前期阶段 mock data 的确很有用。可测试后期和线上的时候,就需要用到真实环境数据。

操作一波

点击进去喵喵

关掉 mock

vue.config.js

# 注释掉这几行
  // devServer: {
  //   port: port,
  //   open: true,
  //   overlay: {
  //     warnings: false,
  //     errors: true
  //   },
  //   before: require('./mock/mock-server.js')
  // },

src/main.js

# 注释掉这几行
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

到此,mock data 已经关掉了。然后运行 npm run devnpm run build:prod 跑起来看看。打开网页,F12 打开控制台,选择 network, 选择 xhr。默认会进入到登录页面(刚运行没登录),输入用户名和密码,点击登录,这个时候,就可以看到请求地址了。地址是下边这样的。而这些只是在打包阶段。

http://192.168.1.141:8080/dev-api/vue-element-admin/user/login

既然我们禁用了 mock data,那我们怎么很好的控制请求了。vue-element-admin 这里使用了 axios,既然是 axios,那就可以去实现拦截器。
继续阅读