Web记录

JavaScript改变html元素属性

首先获取元素对象：

const image = document.getElementById("image")

改变css属性

大致格式为对象名.style.css属性= 属性值

image.style.display = "inline"

改变块本身属性

image.setAttribute("src", "url")

删除块

const img_div = document.getElementById('imgDiv')
img_div.parentNode.removeChild(img_div)

axios使用

axios导入

最简单的方法，在需要使用axios的html页面的最前面导入：

<script src="http://cdn.suoluomei.com/common/js2.0/axios/axios.min.js"></script>

向后端传值(POST)

<script>
axios({
       method:'post',
       url:'/choose_object',
    }).then((response) =>{
        console.log(response)
    }).catch((error) =>{
        console.log(error)
    })
</script>

从后端获取值(GET)

<script>
axios({
        method:'get',
        url:'/get_track_flag',
    }).then((response) =>{
        console.log(response)
    }).catch((error) =>{
        console.log(error)
    })
</script>

Flask使用

Flask返回图片流

后端

if request.method == 'GET':
        img_stream = open(os.path.join('D:/Code/GraduationProject/web/static/background.jpg'), "rb").read()
        response = make_response(img_stream)
        # 返回的内容类型必须修改
        response.headers['Content-Type'] = 'image/png'
        return response

前端

<script>
 axios({
            method:'get',
            url:'/test',
            responseType: 'blob',
        }).then(function (response) {
            console.log(response.data);
            const imgCodeUrl=window.URL.createObjectURL(response.data) // 后端返回前端渲染
            console.log(imgCodeUrl);
            const img_play = document.getElementById("img-play");
            img_play.setAttribute("src", imgCodeUrl)
        }).catch((error) =>{
            console.log(error)
        })
</script>

Flask框架下提交表单

前端：

action控制需要传递至后端的地址，method用来选择使用post还是get方法，下面代码中是利用下拉框选取单个值提交给后端，前端需要对每个传递的值都设置一个name，确保后端能够根据name获取指定的值

<form class="choose-tracker" action="/choose_tracker", method="post">
        <select name="tracker" class="select-style">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
        </select>
        <input type="submit" value="S T A R T" class="submit-button">
</form>

后端

后端根据前端提交的的关键词来获取需要的值

@app.route("/choose_tracker", methods=['POST'])
def choose_tracker():
    if request.method == 'POST':
        parm = request.form.get('tracker')
        return