用户信息在数据库是json在界面展示与修改

#用户信息在数据库是json在界面展示与修改

PHP:7.2.2
Laravel:5.5.40
Vue:2.5

用户的基本信息是以setting字段以json数据类型在数据库存放

数据库中的数据

界面的展示

现在需要对用户的个人设置进行展示与修改

##1. 路由routes/web.php

Route::get("/setting",'SettingController@index')->name('setting');//用户设置面板
Route::post("/setting",'SettingController@store')->name('setting');//用户设置保存

##2. 个人设置的模型app\Models\Setting.php

namespace App\models;

/**
 * 用户信息设置的模型
 *
 * Class Setting
 * @package App\models
 */
class Setting
{
    /**
     * @var array 用户设置的字段
     */
    protected $allowd = ['city', 'site', 'github', 'bio'];

    /**
     * @var User 需要修改信息的用户
     */
    protected $user;

    /**
     * Setting constructor.
     * @param $user
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }

    /**
     * 用户保存自己的信息时使用
     *
     * @param array $attributes
     * @return bool
     */
    public function merge(array $attributes)
    {
        $settings = array_merge($this->user->setting, array_only($attributes, $this->allowd));
        return $this->user->update(['setting' => $settings]);
    }
}

##3. 用户中添加个人设置方法app/Models/User.php

/**
 * 设置用户的信息
 *
 * @return Setting
 */
public function settings()
{
    return new Setting($this);
}

##4. 用户个人设置的控制器app/Http/Controllers/SettingController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

/**
 * 用户个人设置控制器
 *
 * Class SettingController
 * @package App\Http\Controllers
 */
class SettingController extends Controller
{
    /**
     * SettingController constructor.
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**展示用户的个人设置
     *
     *
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index(){
        return view('users.setting');
    }

    /**
     * 保存个人设置的操作
     *
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function store(Request $request){
        user()->settings()->merge($request->all());
        return back();
    }
}

##5. 前端界面resources/views/users/setting.blade.php

@extends('layouts.app')

@section('title','个人设置')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">个人设置</div>

                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="POST" action="{{ url('/setting') }}">
                            {{ csrf_field() }}

                            <div class="form-group{{ $errors->has('city') ? ' has-error' : '' }}">
                                <label for="city" class="col-md-4 control-label">现居城市</label>

                                <div class="col-md-6">
                                    <input id="city" type="text" class="form-control" name="city"
                                           value="{{ user()->setting['city'] }}" required>

                                    @if ($errors->has('city'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('city') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('site') ? ' has-error' : '' }}">
                                <label for="site" class="col-md-4 control-label">个人站点</label>

                                <div class="col-md-6">
                                    <input id="site" type="text" class="form-control" name="site"
                                           value="{{user()->setting['site']}}" required>

                                    @if ($errors->has('site'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('site') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('github') ? ' has-error' : '' }}">
                                <label for="github" class="col-md-4 control-label">Github</label>

                                <div class="col-md-6">
                                    <input id="github" type="text" class="form-control" name="github"
                                           value="{{user()->setting['github']}}" required>

                                    @if ($errors->has('github'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('github') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('bio') ? ' has-error' : '' }}">
                                <label for="bio" class="col-md-4 control-label">个人简介</label>

                                <div class="col-md-6">
                                    <textarea id="bio" type="text" class="form-control" name="bio"
                                              required>{{user()->setting['bio']}}</textarea>

                                    @if ($errors->has('bio'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('bio') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-md-6 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary btn-block">
                                        更改资料
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection