Vue+Nestjs分库分表实现数据国际化

最新推荐文章于 2024-04-23 08:53:43 发布

被前端耽误的全能选手

最新推荐文章于 2024-04-23 08:53:43 发布

阅读量515

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45777332/article/details/135327180

版权

简介

本文介绍了如何利用Vue作为前端框架，NestJS作为后端框架，实现数据国际化，并采用分库分表的方式进行数据存储。

技术栈

Vue.js
NestJS
数据库（示例使用MySQL）
i18n（国际化）

项目结构

前端（Vue）

plaintextCopy code
my-vue-app/
|-- src/
|   |-- assets/
|   |-- components/
|   |-- i18n/
|   |-- views/
|   |-- App.vue
|   |-- main.js
|-- public/
|-- package.json
|-- ...

后端（NestJS）

plaintextCopy code
my-nest-app/
|-- src/
|   |-- modules/
|   |-- controllers/
|   |-- services/
|   |-- main.ts
|-- package.json
|-- ...

数据库设计

采用分库分表的方式，存储多语言数据。

后端实现

安装依赖

cd my-nest-app
npm install --save @nestjs/typeorm typeorm mysql2

配置TypeORM

在my-nest-app/src/app.module.ts中配置数据库连接。

import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      name: 'demo1',
      type: 'mysql',
      host: 'localhost',
      port: 3306, // default port for postgres
      username: 'root',
      password: 'root',
      database: 'demo1',
      entities: ['dist/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
    TypeOrmModule.forRoot({
      name: 'demo2',
      type: 'mysql',
      host: 'localhost',
      port: 3306, // default port for postgres
      username: 'root',
      password: 'root',
      database: 'demo2',
      entities: ['dist/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
  ],
})
export class DatabaseModule {}

实现服务

使用nest g res user来创建user模块

nest g res user

现在我们在user.entity.ts里面定义数据库实体

import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;
  @Column()
  name: string;
}

启动服务看到数据库里面表是否被创建:

数据库创建成功,现在我们要根据前端请求参数来访问对应的数据库。

我们使用postman请求路由，并设置请求头：

我们现在创建一个守卫来获取到请求头里面的语言设置：

nest g gu internationalization

在internationalization.guard.ts里面设置：

import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
import { Observable } from 'rxjs';
@Injectable()
export class InternationalizationGuard implements CanActivate {
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    // 获取请求头
    const request = context.switchToHttp().getRequest();
    const header = request.headers;
    // 获取语言
    request.lang = header.lang;
    return true;
  }
}

现在我们到user里面的user.controller.ts里面去设置：

导入并设置：

import { InjectConnection } from '@nestjs/typeorm';
import { Connection } from 'typeorm';
 constructor(
    private readonly userService: UserService,
    @InjectConnection('demo1') private conn1: Connection,
    @InjectConnection('demo2') private conn2: Connection,
  ) {}

现在我们到请求的接口里面去设置:

 @Get(':id')
  async findOne(@Param('id') id: string, @UserInfo() userInfo: any) {
    let connection: Connection;
    if (userInfo === 'zh') {
      connection = this.conn1;
    } else if (userInfo === 'en') {
      connection = this.conn2;
    } else {
      throw new Error('Invalid db parameter');
    }
    // return this.userService.findOne(+id);
    const result = await connection.getRepository(User).find({
      where: { id: +id },
    });
    return result;
  }

这里我就不进行封装了，需要使用的自行封装一下。
我们使用postman测试一下：

请求没有问题，后端就已经完成了，我们在去main.ts里面设置一下跨域就好了。

前端实现

安装依赖

vue create my-vue-app
cd my-vue-app
npm install --save vue-i18n axios element-plus

配置国际化

在my-vue-app/src/utils/i18n.js中配置国际化。

import { createI18n } from "vue-i18n";

const messages = {
  en: require("./../locales/en.json"),
  zh: require("./../locales/zh.json"),
};

const i18n = createI18n({
  locale: "en", // 默认语言
  messages,
});

export default i18n;

现在去创建locales/en.json:

{
  "message": {
    "greeting": "Hello!"
  }
}

现在去创建locales/zh.json:

{
  "message": {
  "greeting": "你好！"
  }
}

在main.js里面导入i18n.js

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import i18n from "./utils/i18n";
createApp(App).use(i18n).use(ElementPlus).mount("#app");

实现组件

在app.vue里面使用：

<template>
  <div>
    <p>{{ $t("message.greeting") }}</p>
    <el-button type="primary" @click="changeLanguage('zh')">切换中文</el-button>
    <el-button type="success" @click="changeLanguage('en')">切换英文</el-button>
  </div>
</template>

现在实现语言切换

 changeLanguage(lang) {
      localStorage.setItem("lang", lang);
      this.$i18n.locale = lang;
    },

现在按钮就可以实现语言切换了

前后端联调

现在我们来配置axios请求：

现在我们来配置请求路径以及请求头：

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:3000",
});

// 请求拦截器
api.interceptors.request.use(
  (config) => {
    const lang = localStorage.getItem("lang") || "zh";
    config.headers["lang"] = lang;
    // 在请求发送之前做一些处理
    return config;
  },
  (error) => {
    // 当请求异常时做一些处理
    return Promise.reject(error);
  }
);

export default api;

在app.vue里面导入：

import api from "./api/index.js";

并创建请求函数：

data() {
    return {
      name: "",
    };
  },
  
getUserInfo() {
      api.get("/user/1").then((res) => {
        console.log(res.data[0].name);
        this.name = res.data[0].name;
      });

并且在切换语言的时候保存到localStorage里面，

 mounted() {
    this.getUserInfo();
  },
  methods: {
    changeLanguage(lang) {
      localStorage.setItem("lang", lang);
      this.$i18n.locale = lang;
      this.getUserInfo();
    },