Nguyễn Hữu Kim

Viblo có API mở đó bác. https://api.viblo.asia/users/khangnd/posts. Bác có thể gọi API này lấy dữ liệu rồi hiển thị lên trang bên kia chẳng hạn. Có lẽ có thêm chức năng embed bài viết thì ngon bác nhỉ? RSS của author đúng là Viblo cũng chưa hỗ trợ.

Có vẻ là đúng là do bên Nuxt.js bạn đang chạy ssr nên ko dùng được đó. Nếu hệ thống bạn không cần đến ssr thì bạn có thể đổi mode từ universal sang spa là sẽ được. Còn nếu cần ssr thì có lẽ bạn nên chuyển qua phương án khác xem sao.

Thực ra mình câu hỏi này khá máy móc. Nó sẽ hình thành tư duy rằng chỉ những trường hợp này thì sử dụng expressjs, trường hợp kia thì sử dụng laravel... Như vậy mình thấy không tốt lắm, nhất là đối với fresher.

Đúng như bạn nói, bản thân expressjs và laravel cũng có thể làm ra một website đầy đủ rồi. Mình nghĩ việc sử dụng cái này, cái kia hay kết hợp cả hai sẽ là tùy như cầu và hoàn cảnh thực tế?!!

Mình sẽ lấy ví dụ như này. Chẳng hạn, website của bạn làm mới từ con số 0%, team bạn mạnh laravel nên quyết định sẽ sử dụng Laravel. Do dự án là trang dashboard thông thường, không cần thiết về SEO mà team lại không muốn dùng Blade view nên lúc này sẽ sinh ra việc sử dụng Laravel + Reactjs/Vue.., Tất nhiên lúc này bạn dùng Laravel + Blade view cũng chả sao cả. Khi đó laravel làm web server cũng cấp session, API, còn react/vue... sẽ chỉ là phần frontend. Sau một thời gian phát triển, cái web ban đầu vừa nãy lại cần SEO, nhưng frontend lại đang code hoàn toàn theo react, lúc này có thể tách biệt phần frontend react/vue thành web server riêng để kết hợp với framework như nextjs/nuxtjs, còn laravel biết thành stateless api...

Như bạn thấy tùy từng giai đoạn, từng hoàn cảnh và nhu cầu của dự án mà sẽ chọn ngôn ngữ/framework hợp lý chứ không bó buộc.

@bacode Bên nhớ không nhầm thì vue-router ko có shallow giống bên next.js. Việc dùng $router.replace như ở dưới mình chia sẻ mà không được thì bạn thử dùng cách này xem:

window.history.pushState(
  null,
  null,
  `/new-url`
)

Mình giả định là khi click nút EXPAND FULL STORY thì bạn sẽ lấy full nội dung của bài viết đó qua API, hoặc bằng một cách nào đó khác sau đó hiển thị nội dung full này thay thế đoạn nội dung ngắn. Lúc này bạn đang cần đổi cái URL nữa thôi. Trường hợp này bạn thử dùng hàm replace có lẽ là phù hợp, khi đó nội dung trang vẫn giữ nguyên được và URL sẽ thay đổi:

this.$router.replace()

https://router.vuejs.org/guide/essentials/navigation.html#router-replace-location-oncomplete-onabort

Nếu không dùng Vuex thì bạn làm như này:

// Chú ý, $event là biến implicit của Vue, nó là cục data mà bạn bắn kèm event `request-edit`
<ItemComponent v-for="item in data" ... @request-edit="openModal($event)" />

<Modal item="currentItem" @submit="handleSubmit" />

<script>
...,

data: () => ({ visible: false, currentItem: null }),

methods: {
  openModal(item) {
    this.currentItem = item
    this.visible = true
  },

  handleSubmit(item, formData) {
    console.log('Updated', { item, formData }},
  }
},
</script>

Mình chưa dùng Direct Admin bao giờ nhưng nếu bạn ssh vào được VPS mà có quyền sudo thì vẫn chạy được lệnh như này chứ:

sudo su kim_dep_trai

Phần emoji này bản chất là chúng ta sẽ đánh dấu trong văn bản bằng các từ khóa nhất định hoặc ký tự với Unicode nhất định Sau đó sẽ có một bộ Content Parser để chuyển các từ khóa hoặc ký tự trên về thành output như bạn thấy: có thể là font icon, html image...

Phần icon của facebook cũng có trong gói này https://www.npmjs.com/package/emoji-datasource-facebook và được sử dụng để implement trên khá nhiều ngôn ngữ như JavaScript, PHP, TypeScript...

• https://github.com/iamcal/js-emoji - JavaScript emoji library
• https://github.com/iamcal/php-emoji - PHP emoji library
• https://github.com/mroth/emoji-data-js - NodeJS emoji library
• https://github.com/mroth/emoji_data.rb - Ruby emoji library
• https://github.com/mroth/exmoji - Elixir/Erlang emoji library
• https://github.com/needim/wdt-emoji-bundle - a Slack-style JavaScript emoji picker
• https://github.com/mroth/emojistatic - emoji image CDN
• https://github.com/juanfran/emoji-data-css - emoji css files
• https://github.com/afeld/emoji-css/ - an easy way to include emoji in your HTML
• https://github.com/alexmick/emoji-data-python - Python emoji library
• https://github.com/nulab/emoji-data-ts - TypeScript emoji library

Bạn có thể tham khảo để sử dụng luôn những package đã được opensource trên nhé.

Khi browser tạo XHR request tới API ở domain khác thì request sẽ bị trình duyệt block nhằm tránh các đoạn JS giả mạo.

Khi đang develop thì bạn có thể cài extension https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc để browser không block XHR request. Tuy nhiên, khi deploy lên production thì server của bạn cần whitelist cho domain có chạy Vue.js bằng cách response kèm header:

Access-Control-Allow-Origin: https://foo.example

Với foo.example là domain của website chạy ứng dụng Vue.js của bạn.

Bạn nên đọc thêm về nó để hiểu hơn nhé https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.

Mình chưa nhìn được toàn bộ code nên cũng chưa biết có chỗ nào trong code gây n+1 query nữa không nhưng hiện tại theo code trên thì có đoạn khai báo relations:

public function childrenCategories()
{
    return $this->hasMany('App\DaiLy', 'nguoigt', 'affID')
        ->with('childrenCategories')
        ->select('id','affID','nguoigt');
}

Khi code Laravel bạn nên lưu ý không dùng query sql hoặc eager loading trong getter / accessor, hoặc trong các class có nhiệm vụ transform dữ liệu trước khi response... nó sẽ là nguyên nhân gây ra vấn đề n+1 query. Bạn nên bỏ cái with('childrenCategories') này đi.

Mình đọc comment phía dưới, có vẻ bạn muốn truy vấn danh sách danh mục đa cấp. Bạn thử chuyển đổi code qua các cách dưới đây xem sao nhé:

• Cách 1: Trả về danh sách danh mục gốc, Web UI sẽ có nút chức năng tải chi tiết các danh mục con của danh mục tương ứng. Khi click vào thì bạn sẽ gọi api để lấy ra danh các danh mục con.
• Cách 2: Thêm một trường danh string để lưu đường dẫn đa cấp của một danh mục nested_path - là chuỗi các ID của danh mục mà nó kế thừa (id của danh mục cha). VD:

__ ID 1 - Category 1=> nested_path = null
    |__ ID 3 - Category 1.1 => nested_path = "1"
    |     |__ ID 5 - Category 1.1.1 => nested_path = "1_3"
    |     |__ ID 6 - Category 1.1.2 => nested_path = "1_3"
    |
    |__ ID 4 - Category 1.2 => nested_path = "1"

Khi muốn lấy danh mục con của Category 1, bạn sử dụng regex trong SQL để query nested_path ^= "1_", khi đó chỉ mất 1 truy vấn có thể lấy được toàn bộ children, bây giờ dùng code để sắp xếp nó thành dạng đệ quy nếu bạn cần. Do ít query nên nó cũng sẽ nhanh hơn đó.

Bạn tham khảo nhé.

Đúng rồi đó bạn, bạn làm từng bước upgrade lên từng version Laravel một. Đầu tiên, bạn chỉnh sửa trực tiếp file composer.json như trên bạn chia sẻ ở trên, trong guideline của Laravel cũng nói vậy đó. Ngoài laravel/framework nếu bạn biết package khác cần phải sửa version thì mới tương thích với Laravel ver mới thì bạn có thể sửa luôn một thể hoặc không thì bạn sửa mỗi laravel/framework thôi cũng được.

Tiếp theo bạn chạy lệnh composer update để nó update dependencies, nếu có package không tương thích thì nó sẽ có báo lỗi ra màn hình về việc conflict, bạn chỉ cần quan tâm tên của package nào bị conflict rồi lên repo của package đó coi có version tương thích với Laravel ver mới hay chưa. Nếu có thì bạn tiếp tục sửa version của nó trong file composer.json. Lặp lại quá trình composer update này cho tới khi không còn conflict dependencies thì dừng và thực hiện tiếp các bước trong guideline của Laravel.

Trường hợp bạn dùng một package mà không tương thích với Laravel version mới thì bạn xem xét chuyển qua package khác thay thế hoặc sửa package giúp họ để support Laravel version mới hoặc là dừng việc upgrade Laravel lại - đợi khi package kia không còn conflict nữa thì tiến hành upgrade.

Bạn có thể sử dụng Firebase Dynamic Links trong trường hợp này để khi nhấn vào liên kết trong email thì app sẽ mở ra. Tài liệu hướng dẫn sử dụng bạn xem tại đây: https://firebase.google.com/docs/dynamic-links Các bước tạo được Firebase hướng dẫn rất chi tiết theo từng step. Bạn thử xem sao nhé.

Bạn thử kiểm tra lại version của PHP xem version bạn đang chạy có support PThread không nhé. Thực sự là PHP trước giờ không mạnh về việc xử lý Thread và hầu hết các website đều dùng Queue-Worker. Giống như trong Question hôm trước bạn hỏi minh có trả lời đó. Bạn nên chuyển về dùng Queue là vấn đề được giải quyết.

@nhoxhocju Nếu bạn muốn lấy danh sách Ứng Dụng và khi truy vấn thì lấy kèm luôn cả danh sách Quyền của ứng dụng đó, bạn có thể viết một trong các cách như này:

$ungDungs = Ungdung::with(['quyens'])->get();
$ungDungs = Ungdung::query()->with('quyens')->get();
$ungDungs = Ungdung::select(...)->where(...)->with('quyens')->get();

Nếu bạn đã truy vấn ra Ứng Dụng được lưu vào biến $ungDung hoặc có một danh sách lưu vào biến $ungDungs và bây giờ muốn lấy thêm Quyền của $ungDung hoặc $ungDungs thì bạn có thể dùng lệnh như này:

$ungDung->load('quyens');
$ungDungs->load('quyens');

dd($ungDung->quyens);

Có nhé em, hầu hết các hệ thống web đều có hệ thống queue-job. Và rất may Laravel cũng đã support các chức năng giúp xử lý queue-job giúp mình rồi nha. Khái niệm Queue - tạm hiểu là một hàng đợi, chạy ngầm trên server và độc lập so với main process của web-app. Hệ thống Queue sẽ lấy các job trong cái hàng đợi ra và thực hiện nó.

Các job tốn nhiều thời gian như gửi Mail, Push notification... thì chúng ta sẽ đẩy job đấy vào trong Queue rồi return HTTP Response lại cho người dùng luôn, còn job đấy trong queue sẽ được chạy ngầm trên server.

Em có thể đọc thêm về queue của Laravel ở tài liệu gốc nhé: https://laravel.com/docs/7.x/queues

@hieuhumg Nếu dùng thẻ audio đơn thuần như kia thôi thì khó mà có giao diện như bạn mong muốn. Bạn cần build lại một cái audio player khác bằng tạo UI bằng HTML/CSS như bình thường, sau đó gọi các JavaScript API để play/pause... khi click vào các element tương ứng. Với thẻ audio thì tùy vào browser bạn dùng là gì mà UI lại khác nhau nên hầu hết các website như Zing MP3, Nhaccuatui, SoundCloud... đều tự build player riêng.

Hoặc bạn có thể sử dụng những player đã được build sẵn mà vẫn cho phép bạn customize lại giao diện, như vậy sẽ đỡn tốn công hơn là phải build từ đầu. Một số player khá đẹp mà mình tìm được như:

• https://catswhocode.com/html5-audio-player/
• https://playerjs.com/
• https://plyr.io/#audio
• http://kolber.github.io/audiojs/
• ...

Bạn tham khảo nhé.

Mỗi cái redirect thôi mà cũng phải mua dịch vụ cơ hả bạn?!!

Đấy là mình đang nghĩ là bạn có server rồi nhé

Thực ra, bạn chỉ cần vào trang dashboard của Mắt Bão rồi trỏ subdomain về server là được thôi bạn ạ. Làm giống như maindomain ấy.

• Nếu bạn trỏ nhiều subdomain vào cùng một server thì server của bạn phải config để nó handle đúng trang web theo đúng subdomain nữa nhé.
• Còn nếu subdomain và maindomain là 2 cái khác nhau thì bạn chỉ cần trỏ về server khác nhau là được luôn nhé

Khi đó thì subdomain và maindomain sẽ là hai cái khác nhau. Chẳng hạn như mình đang làm nè, một domain sẽ dùng cho rất nhiều dự án khác nhau phục vụ việc testing:

• https://webee.asia
• https://vegiare.webee.asia
• ...

Bạn thử check xem có Accessor getDescriptionTimeAttribute được định nghĩa trong model không? Hoặc là kiểm tra SQL query của chức năng đấy, có thể là mệnh đề SELECT có custom field có tên là description_time chăng

https://laravel.com/docs/7.x/eloquent-mutators#accessors-and-mutators

Thông thường bên server sẽ trả thêm cả expired_at để client biết. Thường sẽ tính từ lúc token được sinh ra, tức khi đăng nhập. Bạn thử trao đổi với backend team để bảo họ trả về exprired_at ý, chứ hardcode sau này lại server thay đỏi mình lại phải sửa lại

1. Vấn đề về nuxt link. Bạn cứ thử dùng v-html để render ra thẻ a. Khi render bạn hook vào mounted, beforeDestroy và triển khai theo ý tưởng sau:

const anchors = this.$el.querySelectorAll('.my-article a[href]')

_each(anchors, (anchor) => {
  anchor.addEventListener('click', this.useNuxtRouter)
})

const anchors = this.$el.querySelectorAll('.my-article a[href]')

_each(anchors, (anchor) => {
  anchor.removeEventListener('click', this.useNuxtRouter)
})

useNuxtRouter(e) {
  const path = e.getAttribute('href')
  const isNuxtSupport = path && path.startsWith('.....')

  if (isNuxtSupport) {
    e.preventDefault()
    this.$router.push(path)
  }
}

2. Về vấn đề href="#hash" thì khi click browser tự đổi URL trên address bar luôn rồi mà bạn. Bạn thử kiểm tra xem element href="#hash" có bị gắn listener vào onclick dẫn tới event bị prevent không nhé.

Update

• Code kia mình viết kiểu giả mã nên có thể sẽ có lỗi cú pháp, bạn tự điều chỉnh nhé.
• Nếu this.useNuxtRouter khi chạy bị undefined cái this thì bạn sửa thành this.useNuxtRouter.bind(this) nha.