Question

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

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

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

文章（表） article_languages（id，article_id lang content）类似这样的

并使用这些翻译以及我用json文件创建的主要翻译。怎么做到这一点？

ArticleController

<?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发送get请求。 self.$i18n.locale变量保存库语言环境让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();
});

Answer 2

也许这种方法可以帮助您在前端进行所有翻译：vue-multiple-lang

Laravel Vuejs - 数据库中的翻译商店以及lang文件夹翻译

2 个答案: