1
如果说，两个人在一起的际遇有很多种，那不在一起的理由里“性格不合”一定排在首位。
曾看过街头随机采访情侣分手的视频，百分之九十的回答都是：
“还是性格原因吧。我们不合适。”
“他太大男子主义了，我受不了。”
“她脾气不好，要求太多，我太累了。”
或许，在我们的感情经历里，多多少少都遇到类似的经历。
本来各方面条件都还不错的对象，因为性格，最终还是因无法长久和谐的相处而分手;再多的怦然心动，也抗衡不了性格不合的互相消耗和折磨。
那是不是我们每个人在遇到性格合适的人之前，都会面临争吵、冷战、over的结局呢?
还是说这个世界上真的存在俩人一开始就十分合拍，惺惺相惜的人呢?
用我的亲身经历来回答，是有的。
这里的登录和传统的登录有一点不一样，传统的登录提交账号密码，正确就可以了。这里得先请求
/sanctum/csrf-cookie,再进行登录请求。
在 vue element admin 目录中，先修改前端页面。
src/api/user.js 中增加：
export function csrfCookie() {
return request({
url: '/sanctum/csrf-cookie',
method: 'get'
})
}
为了测试， 我们需要写入一些用户信息。
为了方便数据的丰满性，这里给用户增加了昵称，性别，头像，签名等字段，更新后的迁移数据是这样的。
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。
laravel8 + bootstrap + vue-element-admin（4）安装 Sanctum 并添加路由配置
身份验证使用 Laravel Sanctum
https://learnku.com/docs/laravel/8.x/sanctum/9421
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate
laravel8 + bootstrap + vue-element-admin（3）配置 vue-element-admin 去掉 mock data 数据
在测试前期阶段 mock data 的确很有用。可测试后期和线上的时候，就需要用到真实环境数据。
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，那就可以去实现拦截器。
laravel8 + bootstrap + vue-element-admin（2）安装 vue-element-admin
设想我们的后台是前后端分离的，可以和主站点同域名，也可以不同域名。当前考虑的前端框架有 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 下），打包编译的时候需要注意，可关注发布相关细节。
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 了
分词很必要，分词很重要，分词看 ik 和 jieba
jieba https://github.com/fxsjy/jieba
ik https://github.com/medcl/elasticsearch-analysis-ik
vs 安装好了，vs 中的 Go for Visual Studio Code 也安装好了。这还不够，还需要安装其他的。可安装的时候总失败。那看下边这里。
go env -w GO111MODULE=on
go env -w GOPROXY="https://goproxy.io,direct"
这样操作一波再安装就没问题了。
go mod init main
# 然后自己定义的文件需要以 main.mod 目录为根目录开始引用起。比如 import "utils/str"
https://github.com/iswbm/GolangCodingTime
下拉条调
::-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;
}