后端(基于actix-web)

login

  • 登录后,使用session存储用户的相关信息用于导出功能
  • 登录后,生成token返回给前端作为信息认证

register

  • 注册后转到登录界面

Home

export & export_in_db

  • 用户使用该功能时,需要在请求header中传回token来认证

    • bug:

      1
      GET http://localhost:8080/export/x x x 401 (Unauthorized)
    • 分析:授权问题

    • solutionlogger + debug

      • 发现是 actix-session中设置的内容并没有在后续操作被访问,

        • 因为在postman中,actix-session返回的set-cookie会默认填充到cookie

        • 而浏览器并没有这个功能,需要前端实现。

      • 这波是postman的锅

        • bug:为了actix-session能够正常使用(需要将actix-session放置于响应头中的set-cookie,置于其他请求头中),需要使用axiosaxios.defaults.withCredentials = true

          1
          Access to XMLHttpRequest at 'http://localhost:8080/export/xxx' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
          • 分析:仍然是跨域问题

            • 后端axtix-session不允许将cookie放置于跨域的响应头中
            • 为了确定权限,前端需要设置withCredentials=true:会默认将cookie放置于请求头中,但是实际上此时并没有cookie,因此会报错
            • 需要设置后端为allow access allow origin指定允许某个跨域请求的域名,便可以将cookie置于响应头中
          • solutionactix-cors

            1. 一种解法:
              1. 使用Cors::allow_origin来允许某个跨域源的请求
              2. 为了使得前端能够发出带认证的请求,例如Vue中使用axios:withCredential使得默认在请求头部加上后端发来的set-cookie,需要设置使用Cors::support_credential来支持
            2. 第二种解法:直接使用 Cors::permissive()梭哈,不当人了
  • 导出query中institute对应的tuples

    • bug:访问export的请求,无法进入pub async fn get_arena_record函数,会一直await
    • 分析:可能是pool的问题
    • Solution: 需要将SqlitePoolHttpServer::new之前,以包裹在web::Data中来定义,因为HttpServer::new会对每个请求创建一个Thread,而web::Data内部使用了Arc保证并发安全
  • 创建backend.db其他系统.db的多个连接池

    • 每次对数据库操作时只需要使用一个连接即可

    • 实际上会自动从池子中分配连接
      An asynchronous pool of SQLx database connections.

      Create a pool with Pool::connect or Pool::connect_with and then call Pool::acquire to get a connection from the pool; when the connection is dropped it will return to the pool so it can be reused.

      You can also pass &Pool directly anywhere an Executor is required; this will automatically checkout a connection for you.

      See the module documentation for examples.

  • SQLite 是一种嵌入式数据库,通常以文件形式存储在本地。

    • 访问前:需要使用scp每次连接前确保从其他服务器下载到本地

优化

  • 通过解析前端传来的查询参数(Query param),选择处理不同系统的DB,对后端代码进行复用
    • axios对于get方法有params+actin-webQuery
    • 使用let/match expression来简化多种情况赋值的代码
  • 创建枚举类型来包裹DB,将错误处理提前到创建枚举,避免多处枚举时还需要处理其他情况
  • 对前端Component进行复用

前端(基于Vue)

  • 将records使用表格展示
  • 将records分页显示
  • 将内容进行排序
  • records以文件形式下载
    • xlsx
    • db
  • 前端发出带query params的Get 请求,不需要完全修改url,也方便后端对代码复用