基于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 = true1
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
&Pooldirectly anywhere anExecutoris 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,也方便后端对代码复用




