Vue3+TypeScript+Element-Plus+Flask开发记录_vue3+typescript el-cascader 懒加载案例

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

1. 跨域

Flask后端解决

/pip install flask-cors

全局配置

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)
1
2
3
4
5

使用 @cross_origin 配置单行路由

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!'
1
2
3
4
5
6
7
8
9
10

配置参数

前端解决

根目录下添加vue.config.js

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就可以
        }
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Nginx 配置跨域

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;
    }
} 
1
2
3
4
5
6
7
8
9

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

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

chrome 和Safari

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

IE 10+

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

Firefox

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

3. 修改Element样式

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

  <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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• 使用deep修改样式

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

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

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

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)
1
2
3
4
5
6
7
8

6. SQLAlchemy 中的 QueuePool 出现 TimeoutError

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

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

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

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

参考此文

参考

• 利用Python | Flask 解决跨域问题
• Nginx配置跨域
• 跨域问题
• 实现CSS隐藏滚动条并可以滚动内容
• 修改ElementUI样式的几种方式
• vue-cli3.0深度选择器/deep/报错
• SQLAlchemy 中的 QueuePool 出现 TimeoutError