Frontend FAQ

原文：https://docs.gitlab.com/ee/development/fe_guide/frontend_faq.html

• Rules of Frontend FAQ
• FAQ
  • 1. How do I find the Rails route for a page?
    • Check the ‘page’ data attribute
    • Rails routes
  • 2. modal_copy_button vs clipboard_button
  • 3. A gitlab-ui component not conforming to Pajamas Design System
  • 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?
  • 6. How should the Frontend reference Backend paths?
  • 7. How can I test the production build locally?

Frontend FAQ

Rules of Frontend FAQ

1. 您谈论前端常见问题解答. 请在适当的情况下共享指向它的链接，以便在内容过时时引起更多关注.
2. 保持简短和简单. 只要答案需要两个以上的句子，它就不属于这里.
3. 尽可能提供背景. 链接到相关的源代码，问题/史诗或其他文档有助于理解答案.
4. 如果您看到某些内容，请执行某些操作. 看到后，请删除或更新任何过时的内容.

FAQ

1. How do I find the Rails route for a page?

Check the ‘page’ data attribute

最简单的方法是在相关页面上的浏览器中键入以下内容：

document.body.dataset.page

在此处找到设置属性的源代码 .

Rails routes

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

该clipboard_button使用copy_to_clipboard.js行为，这是在页面加载初始化，所以如果有不会在页面加载存在（如那些在基于 VUE 剪贴板按钮GlModal ），他们没有相关的点击处理程序与剪贴板包.

添加了modal_copy_button ，用于管理特定于该组件实例的clipboard插件的实例，这意味着剪贴板事件在安装时绑定并在按钮按下时销毁，从而减轻了上述问题. 它还具有绑定到可用的特定容器或模式 ID 的功能，以与我们的 GlModal 创建的焦点陷阱一起使用.

3. A gitlab-ui component not conforming to Pajamas Design System

gitlab-ui实现的某些睡衣设计系统组件不符合设计系统规范，因为它们缺少某些计划的功能或样式尚未正确. 在睡衣网站上，组件示例顶部的标语指示：

该组件尚未符合我们设计系统中定义的正确样式. 引用此组件的外观时，请参考 Design System 文档.

例如，在撰写本文时，可以针对所有表单组件观察到这种类型的警告. 但是，这并不意味着不应使用该组件.

只要有合适的组件，GitLab 都会要求使用<gl-*>组件. 它使代码库变得统一，并且将来可以更轻松地进行维护/重构.

确保产品设计师在 MR 审查中审查不合格组件的使用. 提出后续问题，并将其附加到” 睡衣设计系统组件”史诗中的组件实现史诗中 .

4. My submit form button becomes disabled after submitting

如果在表单内使用提交按钮，并且在表单元素上附加了onSubmit事件侦听器，则这段代码将在提交表单时向提交按钮添加一个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?

最好在完整 URL上使用完整路径 ，因为 URL 将使用通过 GitLab 配置的主机名，该主机名可能与请求不匹配. 这将导致像 Web IDE 这样的 CORS 问题 .

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?

我们不希望通过硬编码路径添加额外的耦合. 如果可能，请将这些路径作为数据属性添加到 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?

有时有必要在本地测试前端生产版本将产生什么，为此，步骤如下：

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 .