Frontend FAQ · Gitlab 中文文檔

# Frontend FAQ > 原文：[https://docs.gitlab.com/ee/development/fe_guide/frontend_faq.html](https://docs.gitlab.com/ee/development/fe_guide/frontend_faq.html) * [Rules of Frontend FAQ](#rules-of-frontend-faq) * [FAQ](#faq) * [1\. How do I find the Rails route for a page?](#1-how-do-i-find-the-rails-route-for-a-page) * [Check the ‘page’ data attribute](#check-the-page-data-attribute) * [Rails routes](#rails-routes) * [2\. `modal_copy_button` vs `clipboard_button`](#2-modal_copy_button-vs-clipboard_button) * [3\. A `gitlab-ui` component not conforming to Pajamas Design System](#3-a-gitlab-ui-component-not-conforming-to-pajamas-design-system) * [4\. My submit form button becomes disabled after submitting](#4-my-submit-form-button-becomes-disabled-after-submitting) * [5\. Should I use a full URL (i.e. `gon.gitlab_url`) or a full path (i.e. `gon.relative_url_root`) when referencing backend endpoints?](#5-should-i-use-a-full-url-ie-gongitlab_url-or-a-full-path-ie-gonrelative_url_root-when-referencing-backend-endpoints) * [6\. How should the Frontend reference Backend paths?](#6-how-should-the-frontend-reference-backend-paths) * [7\. How can I test the production build locally?](#7-how-can-i-test-the-production-build-locally) # Frontend FAQ[](#frontend-faq "Permalink") ## Rules of Frontend FAQ[](#rules-of-frontend-faq "Permalink") 1. **您談論前端常見問題解答.** 請在適當的情況下共享指向它的鏈接，以便在內容過時時引起更多關注. 2. **保持簡短和簡單.** 只要答案需要兩個以上的句子，它就不屬于這里. 3. **盡可能提供背景.** 鏈接到相關的源代碼，問題/史詩或其他文檔有助于理解答案. 4. **如果您看到某些內容，請執行某些操作.** 看到后，請刪除或更新任何過時的內容. ## FAQ[](#faq "Permalink") ### 1\. How do I find the Rails route for a page?[](#1-how-do-i-find-the-rails-route-for-a-page "Permalink") #### Check the ‘page’ data attribute[](#check-the-page-data-attribute "Permalink") 最簡單的方法是在相關頁面上的瀏覽器中鍵入以下內容： ``` document.body.dataset.page ``` 在此處找到[設置屬性](https://gitlab.com/gitlab-org/gitlab/blob/cc5095edfce2b4d4083a4fb1cdc7c0a1898b9921/app/views/layouts/application.html.haml#L4)的[源代碼](https://gitlab.com/gitlab-org/gitlab/blob/cc5095edfce2b4d4083a4fb1cdc7c0a1898b9921/app/views/layouts/application.html.haml#L4) . #### Rails routes[](#rails-routes "Permalink") The `rake routes` command can be used to list all the routes available in the application, piping the output into `grep`, we can perform a search through the list of available routes. The output includes the request types available, route parameters and the relevant controller. ``` bundle exec rake routes | grep "issues" ``` ### 2\. `modal_copy_button` vs `clipboard_button`[](#2-modal_copy_button-vs-clipboard_button "Permalink") 該`clipboard_button`使用`copy_to_clipboard.js`行為，這是在頁面加載初始化，所以如果有不會在頁面加載存在（如那些在基于 VUE 剪貼板按鈕`GlModal` ），他們沒有相關的點擊處理程序與剪貼板包. 添加了`modal_copy_button` ，用于管理特定于該組件實例的[`clipboard`插件](https://s0www0npmjs0com.icopy.site/package/clipboard)的實例，這意味著剪貼板事件在安裝時綁定并在按鈕按下時銷毀，從而減輕了上述問題. 它還具有綁定到可用的特定容器或模式 ID 的功能，以與我們的 GlModal 創建的焦點陷阱一起使用. ### 3\. A `gitlab-ui` component not conforming to [Pajamas Design System](https://design.gitlab.com/)[](#3-a-gitlab-ui-component-not-conforming-to-pajamas-design-system "Permalink") `gitlab-ui`實現的某些[睡衣設計系統](https://design.gitlab.com/)組件不符合設計系統規范，因為它們缺少某些計劃的功能或樣式尚未正確. 在睡衣網站上，組件示例頂部的標語指示： > 該組件尚未符合我們設計系統中定義的正確樣式. 引用此組件的外觀時，請參考 Design System 文檔. 例如，在撰寫本文時，可以針對[所有表單組件](https://design.gitlab.com/components/forms/)觀察到這種類型的警告. 但是，這并不意味著不應使用該組件. 只要有合適的組件，GitLab 都會要求使用`<gl-*>`組件. 它使代碼庫變得統一，并且將來可以更輕松地進行維護/重構. 確保[產品設計師](https://about.gitlab.com/company/team/?department=ux-department)在 MR 審查中審查不合格組件的使用. 提出后續問題，并將其附加到" [睡衣設計系統組件"](https://gitlab.com/groups/gitlab-org/-/epics/973)史詩中的組件實現[史詩中](https://gitlab.com/groups/gitlab-org/-/epics/973) . ### 4\. My submit form button becomes disabled after submitting[](#4-my-submit-form-button-becomes-disabled-after-submitting "Permalink") 如果在表單內使用提交按鈕，并且在表單元素上附加了`onSubmit`事件偵聽器，則[這段代碼](https://gitlab.com/gitlab-org/gitlab/blob/794c247a910e2759ce9b401356432a38a4535d49/app/assets/javascripts/main.js#L225)將在提交表單時向提交按鈕添加一個`disabled`類選擇器. 為避免這種情況，請將`js-no-auto-disable`類添加到按鈕. ### 5\. Should I use a full URL (i.e. `gon.gitlab_url`) or a full path (i.e. `gon.relative_url_root`) when referencing backend endpoints?[](#5-should-i-use-a-full-url-ie-gongitlab_url-or-a-full-path-ie-gonrelative_url_root-when-referencing-backend-endpoints "Permalink") 最好在**完整 URL**上使用**完整路徑** ，因為 URL 將使用通過 GitLab 配置的主機名，該主機名可能與請求不匹配. 這將導致[像 Web IDE 這樣的 CORS 問題](https://gitlab.com/gitlab-org/gitlab/-/issues/36810) . Example: ``` // bad :( // If gitlab is configured with hostname `0.0.0.0` // This will cause CORS issues if I request from `localhost` axios.get(joinPaths(gon.gitlab_url, '-', 'foo')) // good :) axios.get(joinPaths(gon.relative_url_root, '-', 'foo')) ``` 另外，請盡量不要在前端中對路徑進行硬編碼，而應從后端接收它們（請參閱下一節）. 引用后端導軌路徑時，請避免使用`*_url` ，而應使用`*_path` . Example: ``` -# Bad :( #js-foo{ data: { foo_url: some_rails_foo_url } } -# Good :) #js-foo{ data: { foo_path: some_rails_foo_path } } ``` ### 6\. How should the Frontend reference Backend paths?[](#6-how-should-the-frontend-reference-backend-paths "Permalink") 我們不希望通過硬編碼路徑添加額外的耦合. 如果可能，請將這些路徑作為數據屬性添加到 JavaScript 中引用的 DOM 元素. Example: ``` // Bad :( // Here's a Vuex action that hardcodes a path :( export const fetchFoos = ({ state }) => { return axios.get(joinPaths(gon.relative_url_root, '-', 'foo')); }; // Good :) function initFoo() { const el = document.getElementById('js-foo'); // Path comes from our root element's data which is used to initialize the store :) const store = createStore({ fooPath: el.dataset.fooPath }); Vue.extend({ store, el, render(h) { return h(Component); }, }); } // Vuex action can now reference the path from its state :) export const fetchFoos = ({ state }) => { return axios.get(state.settings.fooPath); }; ``` ### 7\. How can I test the production build locally?[](#7-how-can-i-test-the-production-build-locally "Permalink") 有時有必要在本地測試前端生產版本將產生什么，為此，步驟如下： 1. 停止 webpack： `gdk stop webpack` . 2. 打開`gitlab.yaml`位于您`gitlab`安裝文件夾，向下滾動到`webpack`部分和變化`dev_server`到`enabled: false` . 3. Run `yarn webpack-prod && gdk restart rails-web`. 生產構建需要幾分鐘才能完成；僅在再次執行上面的第 3 項后，此時才會顯示任何代碼更改. 要返回正常的開發模式： 1. 打開`gitlab.yaml`位于您`gitlab`安裝文件夾，向下滾動到`webpack`部分和變回`dev_server`到`enabled: true` . 2. `yarn clean`以除去生產資產并釋放一些空間（可選）. 3. 重新啟動 webpack： `gdk start webpack` . 4. 重新啟動 GDK： `gdk-restart rails-web` .