Flask实现Web应用（二）

书接上回，这篇博文主要是要讲一讲前端页面以及相应的css的变化，虽然是一个简单的web应用，但是在一定程度上还是需要符合人的审美。

基础页面

由于我需要实现两个功能，调用本地麦克风录制和上传录音文件，最开始我是想把这两个功能放在同一个页面，但是最后觉得为了美观和页面逻辑，我就决定设计一个主页面，包含了这两个功能的可选项，之后再通过选择重定向至另一个页面。

因此在基础页面中就有了如下的HTML代码

<body style="background-size: 100%; background-image:url({{ url_for('static', filename='cool-background.png') }})">
    <div class="items">
        <p>选择语音识别方式</p>
        <div class="item">
            <input type="button" id="choose_btn1" value="上传文件"  class="choose_btn">
        </div>
        <div class="item">
            <input type="button" id="choose_btn2" value="麦克风录音" class="choose_btn">
        </div>
    </div>
</body>
</html>

当然一个网页好看的背景是不可缺少的，在这里可以给各位有前端需求的朋友推荐一个网站炫酷背景，这个网站可以在线生成一些简单的可以用作网页背景的图片并提供免费下载。

当你使用Flask框架并打算引用外部文件时，你只能将文件放在static文件夹下，并采用url_for函数来作为引用的链接。

按钮链接

可以看见在这个基础页面中有两个按钮，通过这两个按钮的点击重定向至其他页面。这时候需要用到jQuery来判断被点击的是哪个按钮（最开始想用JS实现，但是发现略微麻烦）。

我们可以通过attr来获取相应HTML标签的属性值，通过属性值实现判断和重定向。判断条件满足时使用window.location.href将url导向至其他页面。并将这个函数绑定到按钮的点击事件上。

window.onload = function () {
	$(".choose_btn").click(function () {
        const text = $(this).attr("value");
        if (text === "上传文件") {
            window.location.href = 'upload';
        }
        else {
            window.location.href = 'microphone';
        }
    });
}

通过上面的JS，当点击某个按钮，浏览器的url将会改变，因此我们需要将将相应的url在Flask后端进行渲染。

@app.route('/upload')
def upload():
    return render_template('upload.html')

@app.route('/microphone')
def microphone():
    return render_template('microphone.html')

背景CSS样式

段落字体

这一块其实没什么好说的，就是将网站的默认字体修改了一下，设置了字体间距和文字居中

p {
    color: white;
    font-family: "Microsoft YaHei UI Light";
    font-size: 20px; 
    letter-spacing: 3px;  /*文字间间距*/
    text-align: center; /* 居中 */
}

卡片样式

我希望能够将两个功能的选择放在一个卡片上，这样不会显得一个页面上的元素过少，只有两个按钮元素毕竟难以撑起整个页面。同时修改了卡片的样式。

通过background: rgba(0, 0, 0, .5)修改卡片的背景
利用属性border-radius来改变卡片四周的角
利用box-shadow属性来使卡片显得更立体
通过transform属性来让卡片位于居中位置

相应的CSS文件属性如下

.items {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
    border-radius: 20px;
}

卡片动画效果

通过以上的CSS打开网页时，卡片将会直接出现在页面上。这样显然是不是很美观的，在好友的帮助下实现了卡片的淡出效果。首先我们需要在CSS上设置opacity属性为透明，并设置相关的transition过渡。最后就是通过jQuery来修改网页加载后的CSS属性（之前不知到jQuery能操作CSS一直觉得没有逻辑可以实现这样的动态效果）。

按钮悬停样式

为了能够让按钮在鼠标悬停的时候有一定的反应，就在按钮上加上一些鼠标悬停时的动态效果。

悬停效果其实和上面的卡片动画效果异曲同工，只不过动画的最后效果采用CSS中的hover伪元素进行修改，而非采用JS进行修改。