Laravel Vuejs - 翻译与 lang 文件夹翻译一起存储在数据库中

Question

我在 laravel 5.6 上使用 "vue-i18n": "^7.6.0"，vuejs 将网站翻译成 16 种语言。

我在 config/app.php 中提到了所有语言，并且在 resources/assets/js/lang 中创建了一个文件夹 lang，其中包含所有语言文件（例如，en.json、es.json 等） )。我创建了一个下拉列表，一切正常。

现在我需要创建文章表。我正在寻找的是用多种语言创建文章并存储在数据库中，例如

文章（表格） article_languages(id, article_id lang content) 类似这样的东西

并将这些翻译与我使用 json 文件创建的主要翻译一起使用。如何做到这一点？

文章控制器

<?php

namespace App\Http\Controllers\Articles;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\ArticleCategory;
use App\Models\Article;
use App\Models\ArticleTranslation;

class ArticleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index($language)
    {
        $articles = Article::withTranslations($language)->get();
        return $articles;
    }

我已经安装了this 软件包并按照他们的说明进行操作

ArtcileComponent

<template>
<div>
  <ul>
    <li>{ article.title }</li>
    <li>{ article.subtitle }</li>
    <li>{ article.content }</li>
  </ul>
</div>
<template>

<script>
    export default {
        data: function () {
            return {
                articles: []
            }
        },
        mounted() {
            var app = this;
            axios.get('/api/articles/' + self.$i18n.locale + '/')
                .then(function (response) {
                    self.articleText = response.data.article;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
</script>

Answer 1

在 Vue 中，您通过 API 向 Laravel 发送一个获取请求。 self.$i18n.locale 变量保存库语言环境。

let self = this;

axios.get('/articles/' + self.$i18n.locale + '/' + article.id)
  .then(function (response) {
    self.articleText = response.data.article
  })
  .catch(function (error) {
    // Do something with the error
    console.log(error)
  });

你的 Laravel 路由看起来像这样：

use App\AppArticle;
Route::get('articles/{language}/{id}', function ($language, $id) {
        return App\ArticleLanguage::where('article_id', $id)->where('lang', $language)->firstOrFail();
});