基于Actix-Web(Rust)和Vue的Web开发记录
后端(基于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)
分析:授权问题
solution:
logger
+debug
发现是
actix-session
中设置的内容并没有在后续操作被访问,因为在
postman
中,actix-session
返回的set-cookie
会默认填充到cookie
中而浏览器并没有这个功能,需要前端实现。
这波是postman的锅bug:为了
actix-session
能够正常使用(需要将actix-session
放置于响应头中的set-cookie
,置于其他请求头中),需要使用axios
的axios.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
置于响应头中
- 后端
solution:
actix-cors
- 一种解法:
- 使用
Cors::allow_origin
来允许某个跨域源的请求 - 为了使得前端能够发出带认证的请求,例如
Vue中使用axios:withCredential
使得默认在请求头部加上后端发来的set-cookie
,需要设置使用Cors::support_credential
来支持
- 使用
- 第二种解法:直接使用
Cors::permissive()
梭哈,不当人了
- 一种解法:
导出query中
institute
对应的tuples- bug:访问
export
的请求,无法进入pub async fn get_arena_record
函数,会一直await
- 分析:可能是
pool
的问题 - Solution: 需要将
SqlitePool
在HttpServer::new
之前,以包裹在web::Data
中来定义,因为HttpServer::new
会对每个请求创建一个Thread
,而web::Data
内部使用了Arc
保证并发安全
- bug:访问
创建
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 anExecutor
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-web
的Query
- 使用
let/match expression
来简化多种情况赋值的代码
-
- 创建枚举类型来包裹DB,将错误处理提前到创建枚举,避免多处枚举时还需要处理其他情况
- 对前端Component进行复用
前端(基于Vue)
- 将records使用表格展示
- 将records分页显示
- 将内容进行排序
- records以文件形式下载
- xlsx
- db
- 前端发出带query params的Get 请求,不需要完全修改url,也方便后端对代码复用