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` .