终于来了!结合 Laravel 5.3 + vue 2.1 组件化开发的博客系统

Powered By Jiajian Chan

PJ Blog 是一个开源的博客系统,结合了 Laravel 5.3vue 2.1 组件化开发。后台 SPA 带来更好的操作体验。

由于工作原因,开发断断续续,花费了不少时间去处理各种问题,这是第一个完整的开源项目。

欢迎?各位 issues、stars,我会不断改进,大家互相学习。

预览

New Blog

New Blog

链接

功能

  1. 用户管理、文章管理、讨论管理以及文件管理等
  2. 分类文章
  3. 多标签
  4. 内容审核
  5. 评论系统
  6. Markdown 编辑器
  7. and more...

由于不少人问我有关部署之类的问题,都是比较基础的问题,我没有足够的时间逐一回答,所以我创建一个 QQ 群:272734386 给使用者们互相交流一下。

本作品采用《CC 协议》,转载必须注明作者和本文链接
Nothing is impossible. —— @Jiajian Chan
本帖由 Summer 于 7年前 加精
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 77

:thumbsup: 赞

7年前 评论

一看就是会设计的人呀,页面很简洁!:+1: 赞

7年前 评论

@moell :grin: 我就只会用一下软件,设计这东东有待提高 :joy:

7年前 评论

主题很好看 叫什么名字啊 ?

7年前 评论

@Denniskevin 自己出的主题 :joy: No name. 配色参照 flatly

7年前 评论

支持 :thumbsup:

7年前 评论
Summer

手动点个赞 :+1:

7年前 评论

gulp安装报错。

message: './~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/views/dashboard/article/Edit.vue\nModule not found: Error: Can\'t resolve \'vue-multiselect/lib/Multiselect.vue

7年前 评论

gulp编译报错。

message: './~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/views/dashboard/article/Edit.vue\nModule not found: Error: Can\'t resolve \'vue-multiselect/lib/Multiselect.vue

7年前 评论

import Multiselect from 'vue-multiselect/lib/Multiselect.vue' 这个没有,npm中是否没有配置?

7年前 评论

@YangSen 你缺少了 vue-multiselect 这个 modules,你可以尝试删除 node_modules 重新运行 npm install 或者直接使用 yarn

7年前 评论

@YangSen npm很坑的,我也是是gulp编译报错,估计有的包被墙了,但用yarn是没报错的

7年前 评论

@cjjian 问题解决了, yarn安装正常。 cnpm安装的vue-multiselect 与 yarn安装的包的内容不一致,无Multiselect.vue。

7年前 评论

@skywingfs 用yarn正常了。

7年前 评论

@YangSen 好,我看了一下,我用的是 vue-multiselect v2.0.0-beta.9 我发现 beta.13 目录改了。Multiselect.vue 文件从 lib 放到 src 中了,我晚点更新一下包,你看看你刚刚是不是下载到最新的 vue-multiselect

7年前 评论

@YangSen 已更新,用上 beta.13 用法有点不一样了,直接引用就行:

import Multiselect from 'vue-multiselect'
7年前 评论

不错的网站,可以学习参考下

7年前 评论

学习 Laravel 很棒的范例!

7年前 评论
Mantis

请问添加分类那个路径是什么意思??

7年前 评论

@chunlintang 那个可以定义分类跳转链接,但功能还没实现。

7年前 评论

问一个比较笨的问题,你这个网站是在阿里云吗?我看见你有备案,我也想去阿里云买一个站点,个人备案可以用来挂博客、论坛这样的站点吗

7年前 评论

@leven 是的,我用的是阿里云服务器,个人备案只需要说明什么用途基本没什么问题,大概半个月时间,看地区。

7年前 评论
lijinma

点赞。

7年前 评论

弱弱的问下 vue 页面如何访问呢?

7年前 评论

@Robote 你可以看看项目的 web.php 路由文件:

Route::group(['prefix' => 'dashboard'], function () {
   Route::get('{path?}', 'HomeController@dashboard')->where('path', '[\/\w\.-]*');
});

通过访问 Vue 定义的一个入口路由进入到 Vue 中,可以看到上面通过正则使得 Vue-router 中定义的所有路由均可访问。

7年前 评论

正好想学习vue来着 点赞!

7年前 评论

@cjjian 谢谢,我想将vue 从laravel 单独出来,vue做web app 通过接口来请求laravel 数据,需要多多想你学习

7年前 评论

大赞,一直在关注vue和laravel,苦于没有现成的源码可以研究,这下楼主帮大忙了 ,这几晚要好好撸一下代码了:laughing::laughing::laughing:

7年前 评论

什么时候出个正式的版本用一下

7年前 评论

MarkDown功能是怎么实现的哈,楼主给个思路哈

7年前 评论

@张鹏 由于主页引入了一个 Vue 的实例,如果使用 Blade 模版的原生 Html 输出:

{!! $html !!}

同时,如果在 Html 的代码块中含有 {{}} ,会导致 Vue 直接解析,出错,所以不能直接用 Blade 来显示 Markdown,这时候需要通过将数据传到 Vue 的实例中进行处理,这里我的做法是写成一个 Parse.vue 的组件,将数据传到组件里面:

<parse :content="{{ $article->content }}"></parse>

通过 marked.js 来转义 Markdown 语法,看 Parse.vue 组件:


<template>
    <div class="markdown" v-html="rawHtml"></div>
</template>

<script>
    export default {
        props: {
            content: {
                type: Object,
                default() {
                    return null
                }
            }
        },
        data() {
            return {
                rawHtml: ''
            }
        },
        created() {
            this.rawHtml = marked(this.content.raw)
        }
    }
</script>

如有更好的处理方法,请告知~:laughing:

7年前 评论
jsyzchen

点赞

7年前 评论

好棒呀,佩服

7年前 评论

webpack 打包吗

7年前 评论

@dadaManLaravel 5.3 默认的 gulp 打包,Laravel 5.4 将会用 mix 替换 elixir,用 webpack 取代 gulp,正式出的时候会做一下升级

7年前 评论

楼主,下载了你的项目之后 执行 composer install --no-dev 报错:

file

7年前 评论

@huchiwen 报错很明显,没有开启或安装 php 的 fileinfo extension

7年前 评论

@huchiwen 我安装好了,管理员密码是啥

7年前 评论

@huchiwen 账号 admin@pigjian.com 密码 admin

7年前 评论

@cjjian 谢谢~,在看源码中遇到些看不懂的代码请教一下你 resources/views/dashboard/index.blade.php
怎么这个页面这么简单 啥都看不出

7年前 评论

@huchiwen 这个文件主要引入 Vue,做一个过渡。

7年前 评论

@cjjian 后天的模板是用了spa吗? 你后台的模板是怎么来的?

7年前 评论

@huchiwen 是的,后台是 SPA,模板自己写的,木有样板

7年前 评论
gitxuzan

https协议怎么做到的

6年前 评论

@cjjian 也是这个话题,传入的值中不要包含 "文字" 这种带英文双引号的文字,会报错~

6年前 评论

@cjjian 给vue props传值的时候

6年前 评论

@野山椒鸡杂 :sweat: 你能将你要说的说清楚一点么?我还是一脸懵逼...

6年前 评论

@cjjian
<parse :content="{{ $article->content }}"></parse>
这里的 $article->content 里面的内容在文本编辑器编辑的时候不要包含 "" ->英文状态下的双引号,不然会报错,提醒下大家~

6年前 评论

大神这个安装在Windows上怎么安装?我在生成数据库时报错
D:\xampp\htdocs\aaaaaaa\blog-master>php artisan migrate
Migration table created successfully.

[Illuminate\Database\QueryException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was t
oo long; max key length is 767 bytes (SQL: alter table users add unique users_name_unique(name))

[PDOException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was t
oo long; max key length is 767 bytes

D:\xampp\htdocs\aaaaaaa\blog-master>

6年前 评论

@cjjian 非常感谢大神!已解决!点赞一万零一下!

6年前 评论

(3/3) ErrorException
The Mix manifest does not exist. (View: D:\xampp\htdocs\aaaaaaa\blog-master\resources\views\layouts\app.blade.php) (View: D:\xampp\htdocs\aaaaaaa\blog-master\resources\views\layouts\app.blade.php)
原来以为是没有安装Mix的问题,搞了半天终于安装了Mix,可输入网址还是报上面的错

6年前 评论

@苏亚东 请认真看报错信息,然后 Google 一下。你是否已经编译前端资源了?

6年前 评论

有些问题,真的报错只能google了。博主有时候都不知道是什么原因

6年前 评论

文档打不开? 能给个链接吗

5年前 评论
dreamsun

不错

5年前 评论

@ZeLingNing 有维护。功能更新暂时比较少

5年前 评论

后台都是单页应用了。。没有必要用laravel来处理路由吧。。给nginx不是更好。。还有代码也可以分了。说不定那天你不想用laravel..可以玩easyswoole 或golang (+_+)?

4年前 评论

file 大佬,我安装下来面板只有一个面板的,没有文章创建的那些,那些咋弄出来啊

3年前 评论

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