053. 优秀的开源社区——yike.io(一刻社区 )

优秀的开源社区——yike.io(一刻社区 )

最近 超哥 开源了 一刻社区 的代码,所以又多了一个可以参考和学习的项目,超哥有很多优秀的开源作品,开发了各种 Laravel 扩展包,相信大家都应该已经很熟悉了。

一刻社区是一个前后端分离的论坛项目,分为了前端以及后端 API:

前端使用的是 Vue 开发,后端使用了 Laravel 5.6,使用了腾讯防水墙服务,使用 Elasticsearch 进行全文搜索等等。

这节课我们就一起来在本地搭建一下一刻社区,方便接下来的学习。

file

安装

后端

$ cd ~/Code
$ git clone git@github.com:overtrue/api.yike.io.git

~/Homestead/Homestead.yaml

sites:
    .
    .
    .
    - map: api.yike.test
      to: /home/vagrant/Code/api.yike.io/public
databases:
    .
    .
    .
    - yike

重启 homestead:

$ vagrant reload --provision

修改一下 hosts:

/etc/hosts

192.168.10.10 api.yike.test

进入 homestead项目目录中,执行

$ composer install
$ cp .env.example .env

修改一下数据库的名字,将 DB_DATABASE 改成刚才配置的名称 yike

$ php artisan migrate --seed
$ php artisan key:generate
$ php artisan passport:install
$ php artisan storage:link

file

最后记得执行 storage:link ,不然某些图片显示不了,例如用户头像。

前端

前端的代码没有配置到Homestead中,我是配置到本机环境中,在Code目录中执行以下命令。

$ git clone git@github.com:overtrue/yike.io.git
$ cd  yike.io
$ yarn
$ cp .env.example .env.local

修改一下 env 配置:

.env.local

VUE_APP_API_URL=http://api.yike.io

VUE_APP_AUTH_CLIENT_ID=2
VUE_APP_AUTH_CLIENT_SECRET=ljfdHDw********

在命令行中启动:

> yarn serve

已经能看到一刻的页面了。

file

腾讯 007 防水墙

项目使用到了腾讯提供的防水墙服务,防止用户恶意注册和发帖。打开 https://007.qq.com ,使用 qq 登录。

填写如下信息,创建一个应用。
file

点击快速接入,里面的 App ID 和 App Secret Key 需要等会需要设置
file

我们一共需要两个应用,一个用于登录注册,一个用于发帖,所以点击新建验证,再创建一个。

file

env 中设置对应的 App ID 和 App Secret Key。
.env

.
.

CAPTCHA_ID_PUBLISH=208*****
CAPTCHA_SECRET_PUBLISH=0wZ_E8Rls******
CAPTCHA_ID_REGISTER=2073*****
CAPTCHA_SECRET_REGISTER=0LRJTsE******
.
.
.

回到前端的项目中,前端也需要设置一下 App ID 。

src/modules/auth/register.vue
src/modules/threads/form.vue

.
.
.
let captcha = new TencentCaptcha('xxxxxx', (res) => {
.
.
.

在上面两个文件的地方,将 App ID 替换进去,register.vue 对应注册,form.vue 对应发帖。

这两个 App ID 可以放在配置里面,有兴趣的同学可以提交个 PR。

Elasticsearch

社区的搜索功能利用了 Elasticsearch,有这么几种方式安装 Elasticsearch:

我这里已经安装好了 Elasticsearch 这里就不演示具体的安装过程了,还是推荐大家使用社区的 Vagrant Box。

如果你的电脑性能足够,可以将 Homestead 的 memory 和 cpus 增大。

$ php artisan es:init

执行以下 es:init 初始化以下 ES 模板。

测试

这样大部分的配置工作就完成了,接着就可以正常的注册和发帖了,注册是需要验证邮件的,所以还需要来修改一下配置。

.
.
.
APP_SITE_URL=http://localhost:8082/
.
.
.
MAIL_DRIVER=log
.
.
.

APP_SITE_URL 前端的地址,验证成功后会跳转回这个地址,MAIL_DRIVER 配置一下邮件的 driver,方便进行邮件测试。

总结

项目有很多值得学习的地方,也有很多可以优化的地方,如果你有兴趣和能力,可以尝试着提交 PR 给超哥。最后感谢以下超哥开源了这么多的作品供大家学习。

本文章首发在 LearnKu.com 网站上。
上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
贡献者:1
讨论数量: 11
发起讨论 只看当前版本


lianglunzhong
如何正确有效的阅读项目代码?
1 个点赞 | 2 个回复 | 问答
Ewaa
安装 Elasticsearch
0 个点赞 | 4 个回复 | 问答
warren
註冊失敗,提示跨域請求
0 个点赞 | 4 个回复 | 问答
sunniness
启动 yarn 失败
0 个点赞 | 4 个回复 | 问答
lianglunzhong
发帖成功后首页没有数据 ?
0 个点赞 | 3 个回复 | 问答
Huelse
必须是 Homestead 环境下使用吗?
0 个点赞 | 1 个回复 | 问答
sunniness
注册不了
0 个点赞 | 1 个回复 | 问答
smoon
启动命令 yarn serve 报错
0 个点赞 | 1 个回复 | 问答
LearnerHan
提示跨域请求问题解决办法
0 个点赞 | 0 个回复 | 分享
琳琅天上
yarn 启动错误
0 个点赞 | 0 个回复 | 问答
Flourishing
注册时遇到跨域问题.
0 个点赞 | 0 个回复 | 问答