Write the Code. Change the World.

9月 18

发表于 • 3,025 views • 7 条评论

php

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

操作一波

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

src/api/user.js 中增加：

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

继续阅读

9月 16

发表于 • 1,316 views • 没有评论!

php

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

生数据前奏

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

        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

发表于 • 2,148 views • 没有评论!

php

在测试前期阶段 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 dev 或 npm 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，那就可以去实现拦截器。
继续阅读

9月 11

发表于 • 3,927 views • 3 条评论

php,vue,前端

设想我们的后台是前后端分离的，可以和主站点同域名，也可以不同域名。当前考虑的前端框架有 ant design pro 和 vue element admin。虽然 ant design pro 是阿里的业余产品，ui 漂亮丰富，使用 react 来开发，可前端总体表现上没有 vue element admin 小，前端展示细节问题没处理好，而且一直在更新一直又不好。还是果断选择 vue element admin。

预览页： https://panjiachen.github.io/vue-element-admin

文档页：https://panjiachen.gitee.io/vue-element-admin-site/zh/

这里，使用的和主站点同域名，同环境下。这个时候就得为后台想一个好的路由前缀，暂且这么叫吧。这里使用的是 http://jk.cn/admin。 对，就是 admin，文件放在非根目录下（admin 下），打包编译的时候需要注意，可关注发布相关细节。
继续阅读

9月 11

发表于 • 2,830 views • 没有评论!

php,vue,前端

laravel 8 提供接口，bootstrap 提供自适应网页， vue-element-admin 提供后台支持。环境 homestead 。

配置站点

cd ~/Homestead
vim Homestead.yam
# 增加站点配置（域名位置映射以及数据库）
    - map: jk.cn
      to: /home/vagrant/code/study/jk.cn/public

    databases:
    - jk

# 修改本地(本地 win10)的 host ，增加映射 win + r -> drivers -> cd etc -> vim hosts
vim hosts
192.168.10.10 jk.cn

好的，域名就定位 jk.cn 了
继续阅读

9月 09

发表于 • 773 views • 没有评论!

go

vs 安装好了，vs 中的 Go for Visual Studio Code 也安装好了。这还不够，还需要安装其他的。可安装的时候总失败。那看下边这里。

https://goproxy.io/

go env -w GO111MODULE=on
go env -w GOPROXY="https://goproxy.io,direct"

这样操作一波再安装就没问题了。

然后开始了

go mod init main

# 然后自己定义的文件需要以 main.mod 目录为根目录开始引用起。比如 import "utils/str"

GO 入门文章

https://github.com/iswbm/GolangCodingTime

https://github.com/Go-zh/tour

有用的信息

https://www.jianshu.com/p/e6967acc5eb1

9月 08

发表于 • 1,029 views • 没有评论!

工具

https://carbon.now.sh/

下拉条调

::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px;
}

::-webkit-scrollbar-button {
    height: 0px;
    width: 0px;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.docs-gm ::-webkit-scrollbar-thumb {
    border-style: solid;
    border-color: transparent;
    border-width: 4px;
    background-color: rgb(218, 220, 224);
    border-radius: 8px;
    box-shadow: none;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px inset, rgba(0, 0, 0, 0.07) 0px -1px 0px inset;
}

.docs-gm ::-webkit-scrollbar-track {
    box-shadow: none;
    margin: 0px 4px;
}

::-webkit-scrollbar-track {
    background-clip: padding-box;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-width: 0px 0px 0px 4px;
}
9月 08

发表于 • 921 views • 没有评论!

linux,php,运维

因为有阿里云，ssl 证书，都是通过 阿里云盾证书服务 来申请的。免费，方便。但也有缺点。这个证书只能使用一年，且不支持泛域名，一个服务器最多支持 20 个证书。这样，如果域名多，也烦。 后来发现了 Let's Encrypt, 发现了 acme.sh 。想来试试这个。

了解了解

Let’s Encrypt 作为一个公共且免费 SSL 的项目逐渐被广大用户传播和使用，是由 Mozilla、Cisco、Akamai、IdenTrust、EFF 等组织人员发起，主要的目的也是为了推进网站从 HTTP 向 HTTPS 过度的进程，目前已经有越来越多的商家加入和赞助支持。
Let’s Encrypt 免费 SSL 证书的出现，也会对传统提供付费 SSL 证书服务的商家有不小的打击。到目前为止，Let’s Encrypt 获得 IdenTrust 交叉签名，这就是说可以应用且支持包括 FireFox、Chrome 在内的主流浏览器的兼容和支持，虽然目前是公测阶段，但是也有不少的用户在自有网站项目中正式使用起来。
Let’s Encrypt 的最大贡献是它的 ACME 协议，第一份全自动服务器身份验证协议，以及配套的基础设施和客户端。这是为了解决一直以来 HTTPS TLS X.509 PKI 信任模型，即证书权威（Certificate Authority, CA）模型缺陷的一个起步。
在客户端-服务器数据传输中，公私钥加密使得公钥可以明文传输而依然保密数据，但公钥本身是否属于服务器，或公钥与服务器是否同属一个身份，是无法简单验证的。证书权威模型通过引入事先信任的第三方，由第三方去验证这一点，并通过在服务器公钥上签名的方式来认证服务器。第三方的公钥则在事先就约定并离线准备好，以备访问时验证签名之用。这个第三方就称为证书权威，简称 CA。相应的，CA 验证过的公钥被称为证书。
问题是，如果服务器私钥泄露，CA 无法离线使对应的证书无效化，只能另外发布无效记录供客户端查询。也就是说，在私钥泄露到 CA 发布无效记录的窗口内，中间人可以肆意监控服-客之间的传输。如果中间人设法屏蔽了客户端对无效记录的访问，那么直到证书过期，中间人都可以进行监控。而由于当前 CA 验证和签发证书大多手动，证书有效期往往在一年到三年。
Let’s Encrypt 签发的证书有效期只有90天，甚至希望缩短到60天。有效期越短，泄密后可供监控的窗口就越短。为了支撑这么短的有效期，就必须自动化验证和签发。因为自动化了，长远而言，维护反而比手动申请再安装要简单。
证书的有效期，我坚持认为这是合理的。Let’s Encrypt 的证书是自动签发的，对 Let’s Encrypt 的目标用户（个人网站、小网站）来说，90天已经是一个很长的时间了。特别是个人网站，域名所有权的变动是非常快的。可能前几天域名还属于张三，后几天就属于李四了。因此自动签发一个长有效期的证书是很容易产生问题的。如果证书的有效期是两年，那么经常交易域名的人就可以长时间持有已经不属于他们的域名的证书。并且这种持有不受证书吊销列表的控制，因为签发的时候，所有权是没有问题的，即使后来所有权变更了，Let’s Encrypt 也不会知道。所以设的有效期短一点，可以减少这个问题的影响。然后是易用性，现在已经有不少的 Let’s Encrypt 自动续期脚本了，配好后就不用管了，非常方便。
总之，强烈推荐站长和服务器平台用 Let’s Encrypt 向访客提供加密连接。这是域名认证未来的发展方向。

参考，了解更多

https://www.bluesdream.com/blog/tag/acme-sh

https://www.zhoutao.org/blog/2018/05/773.html

https://www.cnblogs.com/clsn/p/10040334.html

    1 2