Problemas encontrados no projeto (dificuldades) (upload de arquivos grandes, controle de permissões, problemas de gerenciamento do projeto, processo de execução após o empacotamento do webpack)

Carregar arquivo grande?

A ideia de carregar arquivos grandes no front-end geralmente é dividir o arquivo grande em vários arquivos pequenos, carregar esses arquivos pequenos separadamente e, finalmente, remontar esses arquivos pequenos em um arquivo grande completo no lado do servidor. A seguir estão as ideias de implementação específicas:

1. Dividir um arquivo grande em vários arquivos pequenos: você pode usar o método slice() na API de arquivo para dividir um arquivo grande em vários arquivos pequenos (blocos) de tamanho igual, e o tamanho do bloco pode ser definido de acordo com a situação real.
2. Carregar arquivos pequenos: você pode usar o objeto XMLHttpRequest para carregar um pequeno bloco de arquivo a cada vez. Ao mesmo tempo, algumas informações precisam ser adicionadas ao cabeçalho da solicitação HTTP, como nome do arquivo, número do bloco de arquivo, número total de blocos de arquivo e assim por diante.
3. Combine pequenos pedaços de arquivo em um arquivo grande completo no lado do servidor: No lado do servidor, pequenos pedaços de arquivo carregados precisam ser combinados, e esses pequenos pedaços de arquivo podem ser combinados em um arquivo grande completo usando um método semelhante ao streaming de arquivo.
4. Verifique a integridade do arquivo: Depois de carregar todos os blocos de arquivos pequenos, você precisa verificar se o arquivo carregado está completo. Um código de verificação pode ser adicionado ao cabeçalho da solicitação HTTP e o servidor verificará a integridade do arquivo de acordo com o código de verificação após receber todos os blocos de arquivo.
5. Carregamento completo: quando todos os pequenos pedaços de arquivo carregados são carregados com sucesso e o lado do servidor os combina em um arquivo grande completo, o upload do arquivo pode ser concluído.

Deve-se observar que a implementação do upload de arquivos grandes precisa considerar condições anormais, como instabilidade da rede, como falha no upload, interrupção da rede durante o upload, etc., um mecanismo de repetição é necessário e uma barra de progresso e outros prompts precisam ser fornecido ao usuário durante o processo de upload de informações.

O controle de acesso baseado em roteamento de front-end pode ser implementado através das seguintes etapas:

1. Adicionar atributo de permissão na configuração de rota: você pode adicionar um atributo de permissão no objeto de configuração de rota para indicar o nível de permissão ou o ID de permissão exigido pela rota.

2. Execute a verificação de permissão no guarda de rota: Antes que a rota seja trocada, você pode usar o guarda de rota (beforeEach) para executar a verificação de permissão. Neste guarda, você pode obter o atributo de permissão da rota atual e julgar de acordo com as informações de permissão do usuário atual. Se o usuário não tiver permissão para acessar a rota, você pode pular para a página de login ou outras páginas de erro , caso contrário, você pode continuar a mudar de rota.

3. Se o usuário não tiver permissão, você pode pular para a página de login ou outras páginas de erro: Se o usuário não tiver permissão para acessar a rota, você pode pular para a página de login ou outras páginas de erro, solicitando ao usuário que a operação atual requer login ou não possui direitos de acesso, etc. informações.

 No código a seguir, expressamos o nível de permissão necessário ou o ID de permissão adicionando atributos de permissão na configuração da rota e, em seguida, obtemos os atributos de permissão da rota atual no guarda de rota e julgamos de acordo com as informações de permissão do usuário atual. Se o usuário não tiver acesso Se a autoridade da rota, vá para a página de login ou outra página de erro.

// 路由配置
const routes = [
  {
    path: '/home',
    component: Home,
    meta: {
      // 添加权限属性
      requiresAuth: true // 表示需要登录才能访问
    }
  },
  {
    path: '/admin',
    component: Admin,
    meta: {
      // 添加权限属性
      requiresAdmin: true // 表示需要管理员权限才能访问
    }
  }
]
// 路由守卫
router.beforeEach((to, from, next) => {
  // 获取当前路由的权限属性
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin)
  // 判断用户是否有访问该路由的权限
  if (requiresAuth && !isLoggedIn()) {
    // 如果需要登录且用户未登录，则跳转到登录页
    next('/login')
  } else if (requiresAdmin && !isAdministrator()) {
    // 如果需要管理员权限且用户不是管理员，则跳转到错误页
    next('/error')
  } else {
    // 如果有权限，则继续进行路由切换
    next()
  }
})

Perguntas sobre gerenciamento de projetos:

O planejamento do tempo não é razoável, o gerenciamento da ramificação do código é caótico, existem especificações, mas não implementadas, falta de comunicação eficaz e alta rotatividade de pessoal

webpack: o que aconteceu depois de executar o comando de empacotamento (processo de execução detalhado)

1. Leia o arquivo de configuração webpack.config.js para obter itens de configuração relacionados, como arquivos de entrada, diretórios de saída, carregadores, plug-ins, etc.
2. Resolve as dependências do arquivo de entrada. O Webpack resolverá recursivamente todos os módulos dos quais depende a partir do arquivo de entrada e gerará um gráfico de dependência. O Webpack empacota todos os módulos e suas dependências em um ou mais arquivos de pacote.
3. Os módulos são processados ​​usando os carregadores no arquivo de configuração. Os carregadores podem converter módulos de diferentes linguagens (como TypeScript, ES6, Less, Sass, etc.) em código JavaScript que os navegadores possam entender.
4. Use plug-ins no arquivo de configuração para otimizar, compactar e processar arquivos de pacote. Os plug-ins podem processar arquivos de pacote para atender às necessidades dos desenvolvedores, como otimização de compactação, geração de mapas de origem, extração de código comum etc.
5. Empacote o módulo processado e o gráfico de dependência em um arquivo de pacote e envie-o para o diretório especificado. Durante o processo de saída, o Webpack também gerará alguns arquivos adicionais, como arquivos de manifesto, arquivos de valores de hash, etc.
6. Se a Substituição de módulo dinâmico estiver habilitada, o Webpack iniciará um servidor de atualização dinâmica e enviará o código compilado ao navegador por meio do protocolo WebSocket para implementar atualizações em tempo real no navegador.