项目中遇见的问题(难点)(大文件上传,权限控制,项目管理问题,webpack打包后执行流程)

大文件上传?

前端大文件上传的思路通常是将大文件分割成多个小文件,然后分别上传这些小文件,最终在 服务器端将这些小文件重新组合成完整的大文件。以下是具体的实现思路:

  1. 将大文件分割成多个小文件:可以使用File API中的slice()方法将大文件分割成多个大小相 等的小文件(块),块的大小可以根据实际情况进行设置。
  2. 上传小文件:可以使用XMLHttpRequest对象进行上传,每次上传一个小文件块。同时,需要在HTTP请求的头部添加一些信息,例如文件名、文件块编号、文件块总数等等。
  3. 在服务器端将小文件块组合成完整的大文件:在服务器端,需要将上传的小文件块进行组合,可以使用类似于文件流的方式将这些小文件块合并成一个完整的大文件。
  4. 校验文件完整性:在上传完所有小文件块后,需要校验上传的文件是否完整。可以在HTTP请求的头部添加一个校验码,服务器在接收到所有文件块后,根据校验码进行文件完整性的校验。
  5. 完成上传:当上传的所有小文件块都上传成功,并且服务器端也将它们组合成了完整的大文件,就可以完成文件上传。

需要注意的是,大文件上传的实现需要考虑网络不稳定等异常情况,例如上传失败、上传过 程中网络中断等问题,需要进行重试机制,并且在上传过程中需要给用户提供进度条等提示 信息。

前端基于路由的权限控制可以通过以下几个步骤来实现:

1.在路由配置中添加权限属性:可以在路由配置对象中添加一个权限属性,用来表示该路由需要的权限等级或权限标识。

2.在路由守卫中进行权限验证:在路由切换前,可以使用路由守卫(beforeEach)来进行权限验证。在该守卫中,可以获取当前路由的权限属性,然后根据当前用户的权限信息进行判断,如果用户没有访问该路由的权限,则可以跳转到登录页或其他错误页面,否则可以继续进行路由切换。

3.如果用户没有权限,可以跳转到登录页或其他错误页面:如果用户没有访问该路由的权限,则可以跳转到登录页或其他错误页面,提示用户当前操作需要登录或没有访问权限等信息。

 在下面的代码中,我们通过在路由配置中添加权限属性来表示需要的权限等级或权限标识,然后在路由守卫中获取当前路由的权限属性,根据当前用户的权限信息进行判断,如果用户没有访问该路由的权限,则跳转到登录页或其他错误页面。

// 路由配置
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()
  }
})

项目管理的问题:

时间规划不合理, 代码分支管理混乱,有规范但未落实执行,缺乏有效沟通,人员流动性高

webpack:执行打包命令后都发生了哪些事情( 详细执行过程 )

  1. 读取 webpack.config.js 配置文件,获取相关配置项,如入口文件、输出目录、加载器、插件等。
  2. 解析入口文件的依赖关系。Webpack 会从入口文件开始递归地解析它所依赖的所有模块,并生成一个依赖关系图。Webpack 将所有模块及其依赖打包到一个或多个 bundle 文件中。
  3. 使用配置文件中的加载器处理模块。加载器可以将模块从不同的语言(如 TypeScript、ES6、Less、Sass 等)转换为浏览器可以理解的 JavaScript 代码。
  4. 使用配置文件中的插件对 bundle 文件进行优化、压缩和其他处理。插件可以处理 bundle 文件,以满足开发者的需求,如优化压缩、生成 source map、提取公共代码等。
  5. 将处理后的模块和依赖关系图打包成 bundle 文件,并输出到指定的目录中。在输出过程中,Webpack 还会生成一些额外的文件,如 manifest 文件、hash 值文件等。
  6. 如果开启了热更新(Hot Module Replacement),Webpack 会启动一个热更新服务器,将编译后的代码通过 WebSocket 协议发送到浏览器端,实现浏览器端的实时更新。

猜你喜欢

转载自blog.csdn.net/qq_60839348/article/details/130518968