Fork me on GitHub

larave结合vue仿知乎项目


失去就好像,你将余生写一首长诗,却不能提及一个与她有关的字……

简介

基于laravel5.3 vue2.0开发的仿知乎项目,实现基本的登录注册,发布问题,关注问题,回答问题,评论问题,发送私信,系统发送邮件通知,使用千牛存储图片,使用阿里云提供的短信服务发送验证码等基本功能.

功能点

发布问题

回答问题

发送私信

评论问题

私信列表

更换头像

一些代码

路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Route::get('/','QuestionsController@index');
Auth::routes();
Route::get('/home', 'HomeController@index');
Route::get('email/verify/{token}',['as' => 'email.verify', 'uses' => 'EmailController@verify']);
Route::resource('questions','QuestionsController',['names' => [
'create' => 'question.create',
'show' => 'question.show',
]]);
Route::post('questions/{question}/answer','AnswersController@store');
Route::get('question/{question}/follow','QuestionFollowController@follow');
Route::get('notifications','NotificationsController@index');
Route::get('notifications/{notification}','NotificationsController@show');
Route::get('avatar','UsersController@avatar');
Route::post('avatar','UsersController@changeAvatar');
Route::get('password','PasswordController@password');
Route::post('password/update','PasswordController@update');
Route::get('setting','SettingController@index');
Route::post('setting','SettingController@store');
Route::get('inbox','InboxController@index');
Route::get('inbox/{dialogId}','InboxController@show');
Route::post('inbox/{dialogId}/store','InboxController@store');

邮件发送

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
namespace App\Mailer;
use Auth;
/**
* Class UserMailer
* @package App\Mailer
*/
class UserMailer extends Mailer
{
/**
* @param $email
*/
public function followNotifyEmail($email)
{
$data = ['url' => 'http://zhihu.dev', 'name' => Auth::guard('api')->user()->name];
$this->sendTo('zhihu_app_new_user_follow', $email, $data);
}
/**
* @param $email
* @param $token
*/
public function passwordReset($email, $token)
{
$data = ['url' => url('password/reset', $token)];
$this->sendTo('zhihu_app_password_reset', $email, $data);
}
/**
* @param User $user
*/
public function welcome(User $user)
{
$data = [
'url' => route('email.verify', ['token' => $user->confirmation_token]),
'name' => $user->name
];
$this->sendTo('zhihu_app_register', $user->email, $data);
}
}

关注用户组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<button
class="btn btn-default"
v-bind:class="{'btn-success': followed}"
v-text="text"
v-on:click="follow"
></button>
</template>
<script>
export default {
props:['user'],
mounted() {
this.$http.get('/api/user/followers/' + this.user).then(response => {
this.followed = response.data.followed
})
},
data() {
return {
followed: false
}
},
computed: {
text() {
return this.followed ? '已关注' : '关注他'
}
},
methods:{
follow() {
this.$http.post('/api/user/follow',{'user':this.user}).then(response => {
this.followed = response.data.followed
})
}
}
}
</script>

发送私信组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
<div>
<button
class="btn btn-default pull-right"
style="margin-top: -36px;"
@click="showSendMessageForm"
>发送私信</button>
<div class="modal fade" id="modal-send-message" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">
发送私信
</h4>
</div>
<div class="modal-body">
<textarea name="body" class="form-control" v-model="body" v-if="!status"></textarea>
<div class="alert alert-success" v-if="status">
<strong>私信发送成功</strong>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="store">
发送私信
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['user'],
data() {
return {
body:'',
status: false
}
},
methods:{
store() {
this.$http.post('/api/message/store',{'user':this.user,'body':this.body}).then(response => {
this.status = response.data.status
this.body = ''
setTimeout(function () {
$('#modal-send-message').modal('hide')
}, 2000)
})
},
showSendMessageForm() {
$('#modal-send-message').modal('show')
}
}
}
</script>

说明: 本项目是结合互联网上教学视频学习练习所做,并非自己原创;