国际化商城站点开发陌生点记录

1、中英文语言切换

1.1 定义多语言json文件

1.2 在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n';
import en from './locals/en.js';
import zh from './locals/zh.js';
// 组合语言包对象
const messages = {
  en,
  zh
}
// 创建i18n实例
const i18n = createI18n({
  legacy: false,  // 启用 composition API 模式
  messages,
  locale: navigator.language === 'zh-CN' ? 'zh' : 'en',
})

const app = createApp(App)
app.use(i18n)

1.3 在vue组件中使用

<template>
<div class="header-right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <!-- 在模板使用多语言变量需要使用 $t() 包裹-->
          {{ $t("Head.switch") }}&nbsp;&nbsp;&nbsp;
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="changeLocale('zh')"> 中 文 </el-dropdown-item>
            <el-dropdown-item @click="changeLocale('en')">English</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
</template>

import { useI18n } from "vue-i18n";
const { t, locale } = useI18n(); //t表示翻译函数，locale表示当前语言值
// 切换语言
const changeLocale = (lang) => {
   locale.value = lang;
};
//在js中定义多语言变量，需要用 t() 包裹
const buttons = computed(() => {
      return [
        { type: "info", category: 1, text: t('Head.category.device') },
        { type: "info", category: 2, text: t('Head.category.food') },
        { type: "info", category: 3, text: t('Head.category.decoration') },
        ...
      ];
    })

2、pinia简单使用

3、按关键词和类别搜索

3.1 前端

<template>
<Box>
      <div class="operate">
        <el-col :span="4">
          <el-button type="primary" @click="batchHandling">批量处理</el-button></el-col>
        <el-col :span="6">
          <div class="checkbox-group">
            <!-- '待处理': 0,'已处理': 1 -->
            <el-checkbox-group v-model="handleType">
              <el-checkbox label="已处理" name="type" />
              <el-checkbox label="待处理" name="type" />
            </el-checkbox-group>
          </div>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="输入反馈关键词" v-model="keyword" @keyup.enter="searchFeedback" /></el-col>
        <el-button type="primary" @click="searchFeedback">
          搜索</el-button>
      </div>
    </Box>
</template>

<script>
export default {
data(){
   return{handleType: ['待处理'],}
}
computed: {
    tansformHandleType() {
      const mapping = {
        '待处理': 0,
        '已处理': 1
      };
      return this.handleType.map(item => mapping[item])
    }
  },

methods:{
    searchFeedback() {
      this.loading = true;
      const param = {
        keyword: this.keyword,
        handleType: this.tansformHandleType
      }
      service.post("/user/feedback/search", param).then((response) => {
        this.feedbacks = response;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
        this.$message({
          type: 'error',
          message: '搜索出错'
        });
      });
    },
 }
}

3.2 后端

    public List<UserFeedback> searchFeedback(String keyword, List<Integer> handleType) {
        System.out.println("keyword:" + keyword);
        System.out.println("handleType:" + handleType);
        List<UserFeedback> resFeedback = new ArrayList<>();
        if (handleType != null && !handleType.isEmpty()) {
            for (Integer type : handleType) {
                resFeedback.addAll(userMapper.searchFeedback(keyword, type));
            }
        } else {
            // 如果处理类型列表为空，则只根据关键字进行搜索
            resFeedback = userMapper.searchFeedback(keyword, null);
        }
        return resFeedback;
    }

//----------------------
Mapper.xml
 <select id="searchFeedback" resultType="com.example.mall.entity.UserFeedback">
        SELECT *
        FROM feedback
        <if test="keyword != null and keyword != ''">
            WHERE feedback LIKE CONCAT('%', #{keyword}, '%')
            <if test="type != null">
                AND status = #{type}
            </if>
        </if>
        <if test="keyword == null or keyword == ''">
            <if test="type != null">
                WHERE status = #{type}
            </if>
        </if>
    </select>