zoukankan      html  css  js  c++  java
  • Laravel Vuejs 实战:开发知乎 (28-29)私信功能

    1.数据库迁移:

      1 php artisan make:model Message –m

    ****_create_messages_table:

      1 <?php
      2 
      3 use IlluminateDatabaseMigrationsMigration;
      4 use IlluminateDatabaseSchemaBlueprint;
      5 use IlluminateSupportFacadesSchema;
      6 
      7 class CreateMessagesTable extends Migration
      8 {
      9     /**
     10      * Run the migrations.
     11      *
     12      * @return void
     13      */
     14     public function up()
     15     {
     16         Schema::create('messages', function (Blueprint $table) {
     17             $table->bigIncrements('id');
     18             $table->unsignedBigInteger('from_user_id')->comment("发送私信的用户的id");
     19             $table->unsignedBigInteger('to_user_id')->comment("接受私信的用户的id");
     20             $table->text('content')->comment("私信的内容");
     21             $table->timestamp('read_at')->nullable()->comment("接收方阅读的时间");
     22             $table->timestamps();
     23         });
     24     }
     25 
     26     /**
     27      * Reverse the migrations.
     28      *
     29      * @return void
     30      */
     31     public function down()
     32     {
     33         Schema::dropIfExists('messages');
     34     }
     35 }
     36 
     37 
    CreateMessagesTable

    2.模型关联:

    Message.php

      1 <?php
      2 
      3 namespace App;
      4 
      5 use IlluminateDatabaseEloquentModel;
      6 
      7 class Message extends Model
      8 {
      9     //
     10 
     11     protected $table = 'messages';
     12 
     13     protected $fillable = ['from_user_id', 'to_user_id', 'content'];
     14 
     15     public function fromUser()
     16     {
     17         return $this->belongsTo(User::class, 'from_user_id');
     18     }
     19 
     20     public function toUser()
     21     {
     22         return $this->belongsTo(User::class, 'to_user_id');
     23     }
     24 }
     25 
     26 
    Message.php

    User.php

      1 <?php
      2 
      3 namespace App;
      4 
      5 use AppModelsQuestion;
      6 use IlluminateContractsAuthMustVerifyEmail;
      7 use IlluminateDatabaseEloquentSoftDeletes;
      8 use IlluminateFoundationAuthUser as Authenticatable;
      9 use IlluminateNotificationsNotifiable;
     10 
     11 class User extends Authenticatable implements MustVerifyEmail
     12 {
     13     use Notifiable;
     14     #region 支持软删除
     15     use SoftDeletes;
     16     protected $dates = ['deleted_at'];
     17     #endregion
     18     /**
     19      * The attributes that are mass assignable.
     20      *
     21      * @var array
     22      */
     23     protected $fillable = [
     24         'name', 'email', 'password', 'avatar', 'activation_token', 'api_token'
     25     ];
     26 
     27     /**
     28      * The attributes that should be hidden for arrays.
     29      *
     30      * @var array
     31      */
     32     protected $hidden = [
     33         'password', 'remember_token',
     34     ];
     35 
     36     /**
     37      * The attributes that should be cast to native types.
     38      *
     39      * @var array
     40      */
     41     protected $casts = [
     42         'email_verified_at' => 'datetime',
     43     ];
     44 
     45 
     46     /**添加用户模型和问题模型的模型关联
     47      * @return IlluminateDatabaseEloquentRelationsHasMany
     48      */
     49     public function questions()
     50     {
     51         return $this->hasMany(Question::class);
     52     }
     53 
     54 
     55     /** 添加用户模型和回答模型的模型关联 一个用户可以有多个回答
     56      * @return IlluminateDatabaseEloquentRelationsHasMany
     57      */
     58     public function answers()
     59     {
     60         return $this->hasMany(Answer::class);
     61     }
     62 
     63 
     64     public function followQuestions()
     65     {
     66         //默认表名 可以不设置后面三个参数,自定义表名需要设置
     67         return $this->belongsToMany(Question::class, 'users_questions', 'question_id', 'user_id')->withTimestamps();
     68     }
     69 
     70 
     71     /** 用户的粉丝
     72      * @return IlluminateDatabaseEloquentRelationsBelongsToMany
     73      */
     74     public function followers()
     75     {
     76 
     77         return $this->belongsToMany
     78         (
     79             self::class,
     80             'followers',
     81             'user_id', //foreignPivotKey:当前模型在中间表的字段(当前模型类的外键) //【当前模型是leader】的外键id
     82             'follower_id'//relatedPivotKey:另一模型在中间表的字段(另一模型类的外键)
     83         )->withTimestamps();
     84     }
     85 
     86 
     87     /** 用户关注的作者
     88      * @return IlluminateDatabaseEloquentRelationsBelongsToMany
     89      */
     90     public function followings()
     91     {
     92         return $this->belongsToMany
     93         (
     94             self::class,
     95             'followers',
     96             'follower_id',//foreignPivotKey:当前模型在中间表的字段(当前模型类的外键) //【当前模型是粉丝】的外键id
     97             'user_id'//relatedPivotKey:另一模型在中间表的字段(另一模型类的外键)
     98         )
     99             ->withTimestamps();
    100     }
    101 
    102 
    103     /**
    104      * @return IlluminateDatabaseEloquentRelationsBelongsToMany
    105      */
    106     public function votes()
    107     {
    108         return $this->belongsToMany(Answer::class, 'votes')->withTimestamps();
    109     }
    110 
    111 
    112     /**
    113      * @param $answer_id
    114      * @return array
    115      */
    116     public function voteAnswer($answer_id)
    117     {
    118         return $this->votes()->toggle($answer_id);
    119     }
    120 
    121 
    122     public function messages()
    123     {
    124         return $this->hasMany(Message::class, 'to_user_id');
    125     }
    126 
    127 
    128 }
    129 
    130 
    User.php

    3.执行迁移

      1 php artisan migrate

    4.view层 vue

    参考: PersonalAccessTokens.vue

    vue层:【要点击按钮弹出一个对话框,点击发送按钮,发送数据】

      1 <template>
      2     <div>
      3         <button class="btn btn-sm btn-secondary ml-2"
      4                 @click="showMessageForm">私信
      5         </button>
      6 
      7         <div class="modal fade" id="model-send-message" tabindex="-1" role="dialog">
      8             <div class="modal-dialog">
      9                 <div class="modal-content">
     10                     <div class="modal-header">
     11                         <h4 class="modal-title">
     12                             编辑并发送私信
     13                         </h4>
     14                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     15                     </div>
     16 
     17                     <div class="modal-body">
     18                         <textarea class="form-control" rows="10" v-model="message" v-if="!success"></textarea>
     19                         <div class="alert alert-success" v-if="success">私信发送成功!</div>
     20                     </div>
     21 
     22                     <!-- Modal Actions -->
     23                     <div class="modal-footer">
     24                         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
     25                         <button type="button" class="btn btn-success" @click="send" v-if="!success">发送</button>
     26                     </div>
     27                 </div>
     28             </div>
     29         </div>
     30     </div>
     31 </template>
     32 
     33 <script>
     34     export default {
     35         props: ['user'],
     36         name: "SendMessage",
     37         data() {
     38             return {
     39                 voteable: true,
     40                 message: '',
     41                 success: false,
     42             }
     43         },
     44         computed: {},
     45         mounted: function () {
     46 
     47         },
     48         methods: {
     49             send() {
     50                 let currentObj = this;
     51                 axios.post('/api/messages/send', {'user': this.user, 'message': this.message})
     52                     .then(function (response) {
     53                             currentObj.message = '';
     54                             currentObj.success = response.data.success;
     55                             //两秒钟后关闭弹窗
     56                             if (currentObj.success) {
     57                                 setTimeout(function () {
     58                                     $('#model-send-message').modal('hide');
     59                                 }, 2000);
     60                             }
     61                         }
     62                     )
     63                     .catch(function (e) {
     64                         console.log(e);
     65                     });
     66             },
     67             showMessageForm() {
     68                 $('#model-send-message').modal('show');//显示发送编辑框
     69             }
     70         }
     71     }
     72 </script>
     73 
     74 <style scoped>
     75 
     76 </style>
     77 
     78 
    SendMessage.vue
      1 <div>
      2     <img src="{{ $userable->user->avatar }}" class="card-img img-thumbnail imgWrap "
      3          style=" 50px" alt="{{ $userable->user->name }}">
      4     <span class="text text-info">{{ $userable->user->name }}</span>
      5 </div>
      6 <div class="float-left mt-2">
      7     <user-follow-button user="{{ $userable->user->id }}"user->id }}"></user-follow-button>
      8     @if(auth()->check())
      9         @if(auth()->user()->id!==$userable->user->id)
     10             <div class="float-right">
     11                 <send-message user="{{ $userable->user->id }}"user->id }}"></send-message>
     12             </div>
     13         @endif
     14     @endif
     15 </div>
     16 
     17 
    _small_icon.blade.php

    路由:

      1 <?php
      2 
      3 use IlluminateHttpRequest;
      4 
      5 /*
      6 |--------------------------------------------------------------------------
      7 | API Routes
      8 |--------------------------------------------------------------------------
      9 |
     10 | Here is where you can register API routes for your application. These
     11 | routes are loaded by the RouteServiceProvider within a group which
     12 | is assigned the "api" middleware group. Enjoy building your API!
     13 |
     14 */
     15 
     16 Route::middleware('auth:api')->get('/user', function (Request $request) {
     17     return $request->user();
     18 });
     19 
     20 Route::middleware('api')->get('/topics', function (Request $request) {
     21     $query = $request->query('q');
     22     return AppTopic::query()->where('name', 'like', '%' . $query . '%')->get();
     23 });
     24 #region 问题关注
     25 //加载页面时取关注状态
     26 Route::middleware('auth:api')->post('/questions/follow/stats', 'QuestionController@getFollowStats');
     27 //执行关注/取关操作
     28 Route::middleware('auth:api')->post('/questions/follow', 'QuestionController@followThroughApi');
     29 #endregion
     30 
     31 #region 用户关注
     32 //加载页面时取关注状态
     33 Route::middleware('auth:api')->post('/users/follow/stats', 'FollowerController@getFollowStats');
     34 //执行关注/取关操作
     35 Route::middleware('auth:api')->post('/users/follow', 'FollowerController@followThroughApi');
     36 
     37 #endregion
     38 
     39 
     40 #region
     41 //加载页面时取赞状态
     42 Route::middleware('auth:api')->post('/answers/vote/stats', 'VoteController@getVoteStats');
     43 //执行赞/取消赞操作
     44 Route::middleware('auth:api')->post('/answers/vote/up', 'VoteController@voteUpThroughApi');
     45 #endregion
     46 
     47 
     48 #region
     49 
     50 Route::middleware('auth:api')->post('/messages/send', 'MessageController@store');
     51 
     52 #endregion
     53 
     54 
    api.php

    控制器:

      1 php artisan make:controller MessageController

      1 <?php
      2 
      3 namespace AppHttpControllers;
      4 
      5 use AppMessage;
      6 use AppUser;
      7 use IlluminateHttpRequest;
      8 
      9 class MessageController extends Controller
     10 {
     11     //
     12 
     13     public function __construct()
     14     {
     15         $this->middleware('auth');
     16     }
     17 
     18     public function store(Request $request)
     19     {
     20         $toUser = $request->get('user');
     21 
     22         $currentUser = auth()->user()->id;
     23 
     24         $content = $request->get('message');
     25 
     26         if ($content) {
     27             $data = [
     28                 'from_user_id' => $currentUser,
     29                 'to_user_id' => $toUser,
     30                 'content' => $content,
     31             ];
     32             $message = Message::create($data);
     33             if ($message) {
     34                 return response()->json(['success' => true]);
     35             }
     36         }
     37         return response()->json(['success' => false]);
     38     }
     39 }
     40 
     41 
    MessageController.php

  • 相关阅读:
    Android——点击对话框上按钮不关闭对话框
    超酷的Android 侧滑(双向滑动菜单)效果
    Android快速开发不可或缺的11个工具类(下载)
    Android ——真机调试
    Android程序完全退出的三种方法
    android 添加桌面快捷方式
    最全Android开发常用工具类
    成为Java GC专家(5)—Java性能调优原则
    JVM调优总结 + jstat 分析
    mysql中max_allowed_packet参数的配置方法(避免大数据写入或者更新失败)
  • 原文地址:https://www.cnblogs.com/dzkjz/p/12402317.html
Copyright © 2011-2022 走看看