hay anh

@tonghoangvu dạ ok e cảm ơn anh☺️

@Hatung69 Thay bằng getById chỉ cần thiết trong trường hợp cần lấy ra khóa ngoại để tạo entity thôi, performance sẽ tăng do không phải select dư thừa. Các trường hợp khác thì vẫn dùng findBy thôi.

Còn về tính dễ đọc thì mình nghĩ không ảnh hưởng gì.

việc xác thực là của fb mà bạn thì các web ứng dụng làm sao biết được tài khoản mật khẩu của user chứ.Thứ mà fb trả lại cho web ứng dụng chỉ là những thông tin như tên , avatar,...Hay nói cách khác fb cho gì thì mình dùng đấy chứ không phải mình muốn lấy gì cũng được.

@tonghoangvu À dạ cái existsBy lại chậm hơn findBy em sai em sai...cơ mà ý e là mình vẫn đang thay findById bằng việc dùng existsBy và getByid thì thật sự về performance và code đọc nó dễ hơn thì nó có chênh nhau lắm để phải dùng ko anh nhỉ? Có 1 best way nào đó ko anh

@dangcq17 Cái này e chưa làm bao giờ bác ạ có thể demo giúp e dc ko ạ? mà bác cho em xin i4 với em gửi bác cốc cf vì những đóng góp của bác cho e và cộng đồng ^^

@binchanhkun99 trong hàm change language thì bác append thêm query như dashboard?lang=en sau đó trong các component bác watch thằng query này rồi gọi hàm call api thôi

@minhtuan.nguy kiểu truy cập url: http://localhost:8765/ theo cổng thi database nó báo lỗi MySQL:SQLSTATE[HY000] [2002] php_network_getaddresses ...

Nhưng truy cập theo url dạng thư mục http://localhost/app thì được ạ.

@dangcq17 ui ngon lành bác ạ, nhưng mà với những component khác call api thì sao bác nhỉ? khi em đổi trạng thái cái dropdown thì làm sao nó load lại api ở các component khác v ạ?

đây là bài dịch chứ ko hẳn là bài viết.

cho a xem nginx config của e

@binchanhkun99

<template>
    <div id="header-top" class="header-top sticky-top">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="/">
                <img src="../assets/home/logo.svg" alt="" id="logo" /></a>
            <button class="navbar-toggler" id="btn-navbar" type="button" data-toggle="collapse"
                data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class=""><img src="../assets/home/align-right-svgrepo-com.svg" alt="GoStream Tech" /></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav" id="menu">
                    <div class="list-nav-item">
                        <li>
                            <a @click="active = null" :class="{ active: active === null }" href="/" class="nav-link">{{
                                    localised("home")
                            }}</a>
                        </li>
                        <li class="nav-item">
                            <a @click="active = 'about'" :class="{ active: active === 'about' }" href="#about"
                                class="nav-link">{{ localised("about") }}</a>
                        </li>
                        <li class="nav-item">
                            <a @click="active = 'newspaper'" :class="{ active: active === 'newspaper' }"
                                href="#Newspaper" class="nav-link">{{ localised("newspaper") }}</a>
                        </li>
                        <li class="nav-item">
                            <!-- <a class="nav-link rttr"  @click="recruitClick">
                
              {{ localised("recruit") }}</a> -->
                            <router-link class="nav-link rttr" :to="{ name: 'Recruit' }">
                                {{ localised("recruit") }}
                            </router-link>
                        </li>
                        <li class="nav-item">
                            <a @click="active = 'contact'" :class="{ active: active === 'contact' }" href="#contact"
                                class="nav-link">{{ localised("contact") }}</a>
                        </li>
                    </div>

                    <li class="nav-item dropdown" id="language">
                        <a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown"
                            aria-expanded="false">
                            <img :src="flag" alt="" />
                            <b>{{ nation }}</b>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="language-Viet row" href="/vi">
                                <div class="language-popup">
                                    <img src="../assets/home/image 18.svg" @click="changeLanguage(1)" alt="" />
                                    <b value="vi">Tiếng Việt</b>
                                </div>
                            </a>
                            <a class="language-English row" href="/en">
                                <div class="language-popup">
                                    <img src="../assets/home/image 19.svg" alt="" />
                                    <b value="en">English</b>
                                </div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</template>

<script>
import "../assets/style.css";
import "../assets/boostrap.css";
import "../views/Home/NewsPaper.vue";
export default {
    data() {
        return {
            active: null,
            activeLocale: "vi",
            dosomething: '',
            menu: {
                en: {
                    home: "Home",
                    about: "About",
                    newspaper: "Newspaper",
                    recruit: "Recruit",
                    contact: "Contact",
                },
                vi: {
                    home: "Trang chủ",
                    about: "Về chúng tôi",
                    newspaper: "Tin tức",
                    recruit: "Tuyển dụng",
                    contact: "Liên hệ",
                },
            },
        };
    },

    mounted() {
        if (localStorage.currentLanguage) {
            this.activeLocale = localStorage.currentLanguage;
        }
    },

    methods: {
        changeLanguage(language) {
            // set ngôn ngữ với key là currentLanguage
            localStorage.currentLanguage = language;
            this.activeLocale = language;
        },

        localised(key) {
            return this.menu[this.activeLocale][key];
        },
    },
    computed: {
        nation() {
            if (this.activeLocale === 'en') {
                return 'EN'
            }
            
            return 'VN';
        },

        flag() {
            if (this.activeLocale === 'en') {
                return require("../assets/home/image 19.svg");
            }

            return require("../assets/home/image 18.svg");
        },
    },
};
</script>

bác dùng thử đoạn này xem chạy chưa nhé

@dangcq17 vâng cái đó chắc e sẽ optimal lại sau nhưng mà em hỏi xí là nếu dùng thằng Storage thì thuật toán em phải đổi phải k bác nhỉ? trc e để lá cờ với cái text phía sau trong comuted load lại trang là nó đổi giờ ntn thì e phải đặt nó vào watch hay sao bác nhỉ? sao k cần load lại trang mà lá cờ nó vẫn đổi sau khi click ấy bác 😅

@binchanhkun99 em vừa thấy code của bác, em thấy code của bác đang lặp phần call api thì bác nên tách call api ra thành 1 async method xong sau đó trong mounted bác chỉ cần gọi method đó thôi

@binchanhkun99 theo em hiểu thì api đó sẽ iểu là /api/posts?locale=en thì lúc bác change language thì chỉ cần gọi lại api với ngôn ngữ tương ứng là được mà nhỉ. Sau khi call bác gán lại data cho component là content nó sẽ đổi thôi.

@dangcq17 backend thì react với nodejs bác ạ, project này sử dụng Strapi để quản lý cms với làm việc với BE luôn á bác, nó hỗ trợ 1 thằng gọi là strapi-i18 tức là nó cho phép mình tạo 1 bảng có các option đa ngôn ngữ để mình thêm data vào và quản lý đa ngôn ngữ trong bảng ấy luôn, Vâng bác code thì để em update lên bài luôn nha bác

@binchanhkun99 bac cho em xin full code của 1 component nào đó xem để em xem bác code như nào rồi em chỉ cho. Mà backend (techstack) bác đang dùng gì nhỉ.

@dangcq17 Vâng bác ơi, cơ mà em phải đổi ngôn ngữ theo api đc gọi(vì các nội dung của trang cả tiếng anh lẫn tiếng Việt đều lưu trong database) nên chắc ko load trang thì k đc rồi á bác :_) hjx

Sao existsBy lại chậm hơn findBy được nhỉ? Về lí thuyết findBy sẽ chậm hơn do phải select các field dữ liệu mới đúng chứ.

@binchanhkun99 không có gì đâu bác . Ở bất cứ component nào bác chỉ cần lấy từ localStorage như ở bên trên code em đưa ban đầu cho bác là được nhé. Không chỉ ở method mà trong computed bác cũng có thể dùng được localStorage