Vue3+TypeScript+Element-Plus+Flask开发记录

发表于 | 分类于
字数统计: 736字 | 阅读时长 ≈ 3 分钟

Vue3+TypeScript+Element-Plus+Flask开发记录

1. 跨域

Flask后端解决

/pip install flask-cors

全局配置/

1
2
3
4
5
from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

使用 @cross_origin 配置单行路由

1
2
3
4
5
6
7
8
9
10
from flask import Flask, request
from flask_cors import cross_origin

app = Flask(__name__)


@app.route('/')
@cross_origin(supports_credentials=True)
def hello():
    return f'Hello, world!'

配置参数

img

前端解决

根目录下添加vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
  // 跨域请求
  devServer: {
    open: true,//
    host: 'localhost',
    port: 8080,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: {
      //配置跨域
      '/api': {
        target: 'http://localhost:xxxx/xx/', //填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
}

Nginx 配置跨域

1
2
3
4
5
6
7
8
9
location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

2. 实现CSS隐藏滚动条并可以滚动内容

通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar

chrome 和Safari

1
.element::-webkit-scrollbar { width: 0 !important }

IE 10+

1
.element { -ms-overflow-style: none; }

Firefox

1
.element { overflow: -moz-scrollbars-none; }

3. 修改Element样式

  • 采用定位组件的方法，通过组件外层的class或id定位，使用 >>> 进行样式穿透 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div class="dateRange">
                <el-date-picker
                  v-model="dengyouTimeValue"
                  type="daterange"
                  @change="dengyouSelectTime"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="dengyou_pickerOptions"
                ></el-date-picker>
    </div>
    <style scoped>
    /* 这里是element时间选择器的公共样式 */

    .dateRange >>> .el-date-table td {
      padding: 0;
    }
    </style>

  • 使用deep修改样式

    1
    2
    3
    4
    5
    6
    7
    // 修改级联选择框的默认宽度
    /deep/ .el-cascader {
      width: 100%;
    }
    ::v-deep .el-button{
      background: rebeccapurple;
    }

4.el-input其中v-model.number 使用修饰符.number可以将输入的数据转换为Number类型

5.Flask-Sqlalchemy 使用 session.bulk_save_objects后返回主键id

1
2
3
4
5
6
7
8
for x in y:
   obj = Post(...)
   obj_list.append(obj)
session.bulk_save_objects(obj_list,return_defaults = True)
session.commit()

for i in obj_list:
   print(i.id)

6. SQLAlchemy 中的 QueuePool 出现 TimeoutError

根本原因是因为该进程对数据库的连接池满了，且等待之前的 session 超时

添加以下代码,自动关闭所有未使用连接。特别是如果你正在使用以下语法Model.query.filter_by

1
2
3
@app.teardown_appcontext
def shutdown_session(exception=None):
  db.session.remove()

7.sqlalchemy批量插入数据（性能问题）

参考此文

参考