Vue 3+Laravel 个人博客。去除Element,自己编写所需功能组件,实现第三方登录

Vue 3 重构版本介绍

个人博客Vue 3原文地址

博客前台已使用Vue 3重构,去除Element,自己编写所需功能组件,完成了导航栏、全局提示、通知提醒框、空状态、无限滚动、按钮、头像、回到顶部、评论、音乐播放器、分页器、滑动条、Markdown预览、图片。其中图片样式来自Element,音乐播放器样式来自APlayer.其余的组件样式来自Ant Design of Vue。
本次前台打包后大小从1.3M降到0.9M左右。去除了注册,登录,用户信息功能!采用第三方登录!全站响应式布局,采用更简洁的设计!统一的设计风格,后台现在升级到Vue 3+Element Plus,添加数据统计。
网站首页:www.yunmobai.cn/
Vue3前端源码:gitee.com/baymaxsjj/by-vue3-blog
Vue3UI组件源码:gitee.com/baymaxsjj/by-vue3-ui
Laravel后端源码:gitee.com/baymaxsjj/by-laravel-blo...

wLQk7NPRvm.png!large AopK2Htyuj.png!large N813v7qfSO.png!large
UcXTEZez0i.png!large P10Dj3z1Y6.png!large kVlnSocZgV.png!large
8169jfLl4y.png!large fOzqb8BvM2.png!large luUi7cyJe2.png!large

Vue 2 版本介绍

个人博客Vue 2原文地址

这个项目是我大二疫情期间所写,历时3个月,主要是花费在学习Vue和Laravel,前端经过几次改变,刚开始自己使用Bootstrap编写组件,后来转向使用Element UI,前后端参考天行九歌的开源博客编写,虽然开源但是大部分都是自己编写,只是参考了其中的逻辑,毕竟这是我第一个正式的项目,之前在校学的都是毛皮,只有在实践中才能发现自己的不足,此项目同样适合和我一样刚接触但又没有写过一个像样项目的人群。参考手摸手教你让Laravel开发API更得心应手,我就是从这篇文章安照他的步骤一步一步来搭建Api,从中获得不少知识
网站首页:www.yunmobai.cn/
Vue 2前端源码:gitee.com/baymaxsjj/by-vue-blog
Laravel后端源码:gitee.com/baymaxsjj/by-laravel-blo...
SEO优化:查看我的文章(无需修改Vue源码,采用服务器开小灶,对爬虫的请求由无头浏览器解析后,返回给爬虫) Vue前端总结——SEO优化,目前多个页面被goole收录,百度收录了一个(本来两个,不知道首页收录又没了,现在只有一个友情链接被收录了),但是可以看出页面被正常解析了,页面的标题和内容也正常显示,百度快照也能显示我的首页!如果没经过处理的Vue项目也应该只有一段文字!而不是一个正常页面

T4ko0JlmK6.png!large QoYpGwHoiX.png!large UJlKqMprpS.png!large
6OBxrBujfP.png!large vSjtQDSr90.png!large m1nYf1BbU0.png!large

此项目使用的第三方图床,并配置多个图床,可自定义选择,也可使用又拍云等

项目介绍

Vue版本:3.0.3(2.6.12),Laravel版本:7.0
完成模块:
前台:首页介绍,文章展示,标签展示,分类展示,文章解析,生成目录,运行demo,模块显示,留言评论,友情链接,(登录,注册,找回密码)Vue 2,第三方登录(QQ,GITEE,GITHUB),
后台:数据统计(Vue 3),发表文章(模块管理,多平台发布(Vue 2),提交百度收录),文章列表,用户管理,友情链接,项目管理,成长路线,留言管理,网站公告,首页轮播,音乐管理,

前端项目部署

安装依赖

npm install

运行项目

//运行网站前台
npm run serve_home
//运行网站后台
npm run serve_admin

打包

//编译网站前台
npm run build_home 
//编译网站后台
npm run build_admin

vue cli配置参考

See Configuration Reference.

前后台分开打包

在package.json中配置

 "scripts": {
        "serve_home": "vue-cli-service serve --home",
        "build_home": "vue-cli-service build --home",
        "serve_admin": "vue-cli-service serve --admin",
        "build_admin": "vue-cli-service build --admin "
    },

在vue.config.js配置

//开发生产环境判断:true为生产环境
const IS_PROD = process.env.NODE_ENV === 'production';
//获取在package.json 编译或运行获取自定义的配置名称
let appName = process.argv.slice(0)[3].replace('--', '');
//编译输出名称
let outputPath = appName === 'home' ? 'home' : 'admin'

多页面配置,

    // 由于部分插件,导致ie下空白
    transpileDependencies: ['vue-savedata', 'vue-baberrage'],
    //运行目录:开发环境:都在根目录。生产环境,前台在根目录,后台在子目录下运行
    publicPath: IS_PROD ? outputPath == 'home' ? '/' : '../' + outputPath + '/' : '/',
    // 输出目录,
    outputDir: '../' + outputPath,
    //多页面配置
    pages: {
        //此处因为要前后台分开打包,所以要注释
        // about: {
        //     entry: 'src/pages/admin/main.js',
        //     template: 'public/admin.html',
        //     filename: 'admin.html',
        //     chunks: ['chunk-vendors', 'chunk-common', 'about'],
        //     title: 'BAYMAX后台管理'
        // },
        index: {
            entry: 'src/pages/' + appName + '/main.js',
            template: `public/${appName}.html`,
            filename: 'index.html',
            chunks: ["chunk-vendors", "chunk-common", "index", 'runtime~index'],
            title: appName === 'home' ? '云墨白的博客-Start with Hello World' : 'BAYMAX后台管理'
        }
    },

反向代理配置

由于项目使用到第三方的接口需要反向代理

  devServer: {
        sockHost: "localhost",
        disableHostCheck: true,
        port: 8080, // 端口号
        host: "0.0.0.0",
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        proxy: {
            //后台接口
            "/apis": {
                // target: "http://127.0.0.1:80/api/v1", // 需要请求的地址
                target: process.env.VUE_APP_API_URL, // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/apis": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            },
             //音乐接口
            "/music": {
                target: "https://music.liuzhijin.cn", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/music": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            },
             //每日英语接口
            "/english": {
                target: "http://sentence.iciba.com", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/english": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            },
            "/loimg": {
                target: "https://pc-store.lenovomm.cn/wallpapercontent/wallpaper/classify/tag_wallpapers", // 需要请求的地址
                // target: process.env.VUE_APP_URL,   // 需要请求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/loimg": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
                }
            }
        }
    },

nginx配置

location /apis {        
      proxy_pass 自己后端域名;
    }
    location /vendor/sitemap/styles/xml.xsl {        
      proxy_pass https://api.yunmobai.cn/vendor/sitemap/styles/xml.xsl;
    }
    location /music {
      proxy_pass https://music.liuzhijin.cn/;
    }
    location /english {
      proxy_pass http://sentence.iciba.com/;
    }

自动化脚本

echo 同步远程仓库
git pull
echo 编译主页
npm run build_home
echo 删除源文件
rm -r ../js ../css ../img ../fonts
echo 拷贝主页
cp -rf ../home/. ../
echo 删除编译文件
rm -r ../home ../admin.html
echo 完成

后端项目部署

项目配置

# 安装依赖
composer install 
# 生成key
php artisan key:generate
# 生成jwt-key
php artisan jwt:secret
# 生成数据库表(也可以将database/blog.sql导入数据库)
php artisan migrate
# 填充数据
php artisan db:seed
# 启动服务
php artisan serve
# .env 上线配置,注意上线要修改,不然所有报错将会在用户端显示,低版本Laravel 还可能会泄漏.evn配置文件中重要信息
APP_ENV=local 改成 APP_ENV=production
APP_DEBUG=true 改成 APP_DEBUG=false

第三方登录

此项目目前支持QQ,Gitee,GitHub登录,可以扩展,第三方登录包,下载安装如下配置!Gitee和GitHub直接到个人账号设置里开启就可以直接使用,如要申请QQ 登录,需要到QQ互联注册开发者,注意多次申请失败(身份证审核失败情况)直接找在线客服,快速审核通过,我就是搞了5,6此没搞好,直接找到客服,十来分钟就审核通过了!

# 下载对应包,socialiteproviders/第三方登录名
composer require socialiteproviders/qq

# 添加事件监听器 App/Providers/EventServiceProvider
protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        # 注意:官方有错误是QqExtendSocialite,不是QQ,这里我按官方给的搞半天没搞好,结果参看原文件,才发现是Qq
        'SocialiteProviders\\QQ\\QqExtendSocialite@handle',
    ],
];

# configure config/services.php
'qq' => [
    'client_id' => env('QQ_CLIENT_ID'),
    'client_secret' => env('QQ_CLIENT_SECRET'),
    'redirect' => env('QQ_REDIRECT_URI'),
]
# .env 中配置
QQ_CLIENT_ID=App ID
QQ_CLIENT_SECRET=App Key
QQ_REDIRECT_URI=回调地址
……
#其它包类似,把QQ改成对应名
# start building 
return Socialite::driver('qq')->redirect();

扩展第三方登录

由于此项目是动态路由,所以只需按照上方添加第三方登录包后,就可以直接使用。使用的动态路由根据第三方登录名为参数

//第三方登录请求地址
//party 动态参数,是第三方登录名。如:https://域名/login/qq/redirece 
Route::get('/login/{party}/redirect','UserController@redirectToProvider');
//第三方登录回调地址
Route::get('/login/{party}/callback','UserController@handleProviderCallback');
//以下是控制器配置
 /**
    * 将用户重定向到party认证页面
    *
    * @return Response
    */
    public function redirectToProvider($party)
    {
        // dd($party);
        return Socialite::driver($party)->redirect();
    }
    /**
    * 从party获取用户信息.
    *回调地址
    * @return Response
    */
    public function handleProviderCallback($party)
    {
        $partyUser= Socialite::driver($party)->stateless()->user();
    }

安装jwt

使用 JWT 对用户身份验证,

composer require tymon/jwt-auth
# 修改 config/app.php
'providers' => [
    ...
    Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
]
# 发布配置文件
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"
# 生成key
php artisan jwt:secret

安装邮箱模板

#安装邮件模版
composer require qoraiche/laravel-mail-editor
# 发布配置文件
php artisan vendor:publish --provider="qoraiche\mailEclipse\mailEclipseServiceProvider"
php artisan migrate
# 访问地址
http://localhost:8080/maileclipse
# 修改模板  /resources/views
编写邮箱模板,可以使用markdown语法也可使用html
# 修改内置模板样式 /resources/viewsvendor
在该文件夹下修改对于的模块样式及布局
# .env
MAIL_MAILER=smtp
MAIL_HOST=smtp.qq.com
MAIL_PORT=465
MAIL_USERNAME=邮箱号
MAIL_PASSWORD=邮箱码
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=邮箱号
MAIL_FROM_NAME=发送者名

浏览统计

用于对文章浏览量统计!

composer require awssat/laravel-visits
# 添加配置文件
php artisan vendor:publish --provider="awssat\Visits\VisitsServiceProvider"
# 修改.env文件
CACHE_DRIVER=file 改成 CACHE_DRIVER=array
# 需要安装redis,可以在宝塔面板中安装启动,修改密码
#php 需要安装redis 扩展,可在宝塔面板,php 扩展中安装
#.env 配置 
REDIS_CLIENT=predis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=# redis 密码
REDIS_PORT=6379

常用命令

# 添加模型 -m 生成数据库迁移
php artisan make:model Models/Article -m
# 添加控制器
php artisan make:controller Api/ArticleController
# 添加验证
php artisan make:request ArticleRequest
# 清除配置信息缓存
php artisan config:cache
php artisan config:clear
# 路由缓存
php artisan route:cache
php artisan route:clear
# 数据填充
# 生成User模型的工厂
php artisan make:factory UserFactory --model=Models/User
# 生成User的数据填充
php artisan make:seeder UsersTableSeeder
# 数据填充
php artisan db:seed
# 填充指定模型
php artisan db:seed --class=UsersTableSeeder
# 重新生成数据库表并填充数据
php artisan migrate:refresh --seed
# 进入数据填充测试
php artisan tinker

.env 模板

APP_NAME= 云墨白
APP_ENV=# local/production
APP_KEY=#  key
APP_DEBUG=# true/false
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=# 数据库名
DB_USERNAME=# 数据库密码
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=array
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.qq.com
MAIL_PORT=465
MAIL_USERNAME=# 邮箱名
MAIL_PASSWORD=# 邮箱密码,qq邮箱需到邮箱账户设置了开启POP3/SMTP服务 
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=# 邮箱
MAIL_FROM_NAME=# 发送名

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

REDIS_CLIENT=predis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=# redis 密码
REDIS_PORT=6379

GITEE_CLIENT_ID=# App ID
GITEE_CLIENT_SECRET=# App Key
GITEE_REDIRECT_URI=# App 回调地址

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URI=

QQ_CLIENT_ID=
QQ_CLIENT_SECRET=
QQ_REDIRECT_URI=

UPYUN_PROJECT_NAME =# 又拍云储存名称
UPYUN_OPERATOR_NAME =# 又拍云账号
UPYUN_OPERATOR_PASSWORD =# 又拍云密码
UPYUN_CNAME =# 又拍云域名

JWT_SECRET=# jwt key
本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 2个月前 自动加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 23

真是 花里胡哨 我喜欢 :grinning:

2个月前 评论

不过 seo 就废了

view-source:https://www.yunmobai.cn/blog

file

百度霸霸可不会解析 js :joy:

2个月前 评论
baymaxsjj (楼主) 2个月前
lyxxxh (作者) 2个月前
baymaxsjj (楼主) 2个月前

这是百度官方爬虫爬取的到页面内容!,图太大了,但是你从标题也能看见已经有标题了,说明服务器把解析好的页面返回了回来
还有一个也能说明问题,就是百度快照!
百度快照也能显示到我的网站首页,而不是一串文字!

Laravel

2个月前 评论

我也是研究了好久的单页面seo, 目前谷歌收录了几个页面, 百度索引量永远是1,用的 vue-seo-phantomjs :sob:

2个月前 评论
baymaxsjj (楼主) 2个月前

vue seo nuxt.js了解一下

2个月前 评论
baymaxsjj (楼主) 2个月前

个人备案不能有评论功能吧 :smile:

2个月前 评论
baymaxsjj (楼主) 2个月前
小李世界 2个月前
baymaxsjj (楼主) 2个月前

现在大二生都已经开始抢饭碗了吗,呜呜呜

2个月前 评论
baymaxsjj (楼主) 2个月前
小李世界
2个月前 评论

我大二的时候还在天天去网吧。。。。

2个月前 评论
baymaxsjj (楼主) 2个月前

看看人家的大二 :joy: :joy: :joy: :joy: :joy:

2个月前 评论
baymaxsjj (楼主) 2个月前
一个人的江湖 (作者) 2个月前
baymaxsjj (楼主) 2个月前
小李世界

大二我还在玩CF的生化模式

2个月前 评论

IP+1

2个月前 评论
baymaxsjj (楼主) 2个月前
maliao

兄弟太秀了,我大二在统计一共通关了多少单机游戏 :joy:

2个月前 评论
baymaxsjj (楼主) 2个月前
baymaxsjj (楼主) 2个月前
Later 2周前

主楼好厉,正好我也想学习下这种前后分离的项目~~所以就下载下来运行下, 我看你前台 git clone 下来 npm install npm run serve 就报错了是我的NPM版本的问题吗? 然后我这边有运行了下后台,我发现后台database/blog.sql 里没有数据 管理员用户好像也是空表后台怎么进入 file

2个月前 评论
baymaxsjj (楼主) 2个月前
pszhao (作者) 2个月前

兄弟,你的数据迁移文件有两个错误。我给你评论了,你看下哈

2个月前 评论
baymaxsjj (楼主) 2个月前

@坐忘 :joy:兄弟你运行起来了吗?

2个月前 评论
坐忘 2个月前
pszhao (作者) 2个月前
坐忘 2个月前

npm run serve_home 这个命令我也试了 奇怪了~是不是直接 git 下来 npm install 在然后这样 npm run serve_home

file

2个月前 评论
baymaxsjj (楼主) 2个月前
pszhao (作者) 2个月前
baymaxsjj (楼主) 2个月前

你这个 markdown 侧边栏导航(marked)是前端处理的。

我开始以为数据库里边会存文章 content 和 导航栏两份数据。这样每次 create 和 update 的时候,都需要去维护这个导航栏数据。

最近也准备整个 markdown 相关的东西,参考看了下你的代码。谢谢。

2个月前 评论

当数据迁移时links表中的'link','imgUrl'这两个字段由于设置了unique属性会导致无法创建成功,mysql抛出
SQLSTATE[42000]: Syntax error or access violation: 1170 BLOB/TEXT column 'link' used in key specification without a key length (SQL: alter table links add unique links_link_unique(link))这个错误.原因与解决办法在这里找到了https://blog.csdn.net/helloxiaozhe/article/details/83018347!不知道博主有遇到这样的情况没!

1个月前 评论
baymaxsjj (楼主) 1个月前
WuTao_lxm (作者) 1个月前

有没有后台呢?

1个月前 评论
baymaxsjj (楼主) 1个月前
CodingHePing (作者) 1个月前
baymaxsjj (楼主) 1个月前

不错,我喜欢VUE3的语法

1个月前 评论
baymaxsjj (楼主) 1个月前

响应式是自己写的吗?还是用bootstrap栅格,或者element,我是后端前端不太了解,所以想问下

1个月前 评论
baymaxsjj (楼主) 1个月前

file
qq 授权登录报错~

1周前 评论
baymaxsjj (楼主) 1周前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!