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