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

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 给使用者们互相交流一下。

Nothing is impossible. —— @Jiajian Chan

本帖由 Summer 于 2年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 75

:+1: 赞

2年前

:thumbsup: 赞

2年前

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

2年前
overtrue

:+1:

2年前

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

2年前
Denniskevin

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

2年前

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

2年前
abc

支持 :thumbsup:

2年前
Summer

手动点个赞 :+1:

2年前

:+1:

2年前
MrJing

666,设计好看

2年前

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

2年前

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

2年前

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

2年前

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

2年前

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

2年前

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

2年前

@skywingfs 用yarn正常了。

2年前

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

2年前

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

import Multiselect from 'vue-multiselect'
2年前

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

2年前

学习 Laravel 很棒的范例!

2年前
Mantis

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

2年前

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

2年前

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

2年前

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

2年前
lijinma

点赞。

2年前

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

2年前

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

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

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

2年前

正好想学习vue来着 点赞!

2年前

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

2年前

@Robote 互相学习学习 :smile:

2年前

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

2年前

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

2年前
benettzhang

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

2年前

@张鹏 由于主页引入了一个 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:

2年前
jsyzchen

点赞

2年前

好棒呀,佩服

2年前

:thumbsup:

2年前

webpack 打包吗

2年前

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

2年前

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

file

2年前

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

2年前

@cjjian 我解决了。谢谢

2年前

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

2年前

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

2年前

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

2年前

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

2年前

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

2年前

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

2年前

@cjjian 全栈工程师!!!

2年前

https协议怎么做到的

1年前

@GitHacking Let's Encrypt

1年前

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

1年前

@cjjian 给vue props传值的时候

1年前

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

1年前

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

1年前

大神这个安装在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>

1年前

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

1年前

(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,可输入网址还是报上面的错

1年前

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

1年前

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

1年前

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

6个月前

@Jhaihao 可以正常打开的。文档

6个月前

赞一个

6个月前
dreamsun

不错

3个月前
Zerin

项目还在维护吗?

2个月前

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

1个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!