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

Vue 3 重构版本介绍#

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

这个项目是我大二疫情期间所写,历时 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 协议》,转载必须注明作者和本文链接
本帖由系统于 4年前 自动加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 23

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

4年前 评论

不过 seo 就废了

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

file

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

4年前 评论
baymaxsjj (楼主) 4年前
lyxxxh (作者) 4年前
baymaxsjj (楼主) 4年前

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

Laravel

4年前 评论

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

4年前 评论
baymaxsjj (楼主) 4年前

vue seo nuxt.js 了解一下

4年前 评论
baymaxsjj (楼主) 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前
小李世界 4年前
baymaxsjj (楼主) 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前
一个人的江湖 (作者) 4年前
baymaxsjj (楼主) 4年前

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

4年前 评论

IP+1

4年前 评论
baymaxsjj (楼主) 4年前
maliao

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

4年前 评论
baymaxsjj (楼主) 4年前
baymaxsjj (楼主) 4年前
Later 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前
pszhao (作者) 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前

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

4年前 评论
坐忘 4年前
pszhao (作者) 4年前
坐忘 4年前

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

file

4年前 评论
baymaxsjj (楼主) 4年前
pszhao (作者) 4年前
baymaxsjj (楼主) 4年前

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

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

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

4年前 评论

当数据迁移时 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! 不知道博主有遇到这样的情况没!

4年前 评论
baymaxsjj (楼主) 4年前
WuTao_lxm (作者) 4年前
CodingHePing

有没有后台呢?

4年前 评论
baymaxsjj (楼主) 4年前
CodingHePing (作者) 4年前
baymaxsjj (楼主) 4年前

不错,我喜欢 VUE3 的语法

4年前 评论
baymaxsjj (楼主) 4年前

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

4年前 评论
baymaxsjj (楼主) 4年前

file
qq 授权登录报错~

4年前 评论
baymaxsjj (楼主) 4年前