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 防水墙

项目使用到了腾讯提供的防水墙服务,防止用户恶意注册和发帖。打开 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 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
贡献者:1
讨论数量: 10
发起讨论 只看当前版本


lianglunzhong
如何正确有效的阅读项目代码?
1 个点赞 | 2 个回复 | 问答
kkw
提示跨域请求问题解决办法
1 个点赞 | 0 个回复 | 分享
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 个回复 | 问答
Flourishing
注册时遇到跨域问题.
0 个点赞 | 0 个回复 | 问答