啥都不说,操作一波
先看路由,我们会看到在 routes/web.php 中增加了 Auth::routes(); 这个和以前不一样了。以前在 vendor/laravel/framework/src/Illuminate/Routing/Router.php 中,现在却在 vendor/laravel/ui/src/AuthRouteMethods.php 中,如下:
继续阅读
laravel8 + bootstrap + vue-element-admin(8)调整 laravel bootstrap 登录注册脚手架
先看路由,我们会看到在 routes/web.php 中增加了 Auth::routes(); 这个和以前不一样了。以前在 vendor/laravel/framework/src/Illuminate/Routing/Router.php 中,现在却在 vendor/laravel/ui/src/AuthRouteMethods.php 中,如下:
继续阅读
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
laravel8 + bootstrap + vue-element-admin(6)删除 vue-element-admin 初始化带入的不需要的模板等
安装 vue element admin 的时候,默认带入了很多路由,模板,mock,api 等。如果从 0 开始,就需要去掉这些多余的东西。
src/api 删除下边的文件,只留下 role.js 和 user.js
.
├── role.js
└── user.js
src/components 组件暂不做处理,随着项目发展,某些组件还是很有用的。
src/router/modules/ 全删掉(如果需要,可后边对比补充)
src/router/index.js 修改成如下(其实就是去掉那些不想要的)
继续阅读
这里的登录和传统的登录有一点不一样,传统的登录提交账号密码,正确就可以了。这里得先请求
/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