"Letters Sound"第四次修改记录

但凡浩大宏壮的工程，有如暴风骤雨般大气磅礴，向来不会屈泥于仅一人的股掌之间。而我们做的正是接续培育这样一个工程，以智慧为其骨、以心血为其体，含之以深沉意志。我本人有幸对“Letters Sound”进行了第4次的修改，诚然，它依旧不完善，唯其是娇嫩，更需要后来的开发者接续这一使命。

为了使后来的开发者能够更加快速的投入到项目中去，我将结合我的修改经历简介项目流程以及注意事项，但我本人也是零基础入手，自知水平有限，不到之处敬请谅解。祝愿后续的开发者能够借助项目具体实践提升自己的能力，也祝愿“Letters Sound”能够早日完善。

 

一、概述：

“Letters Sound”是一款基于Python微框架Flask的web应用。文件的基本结构为?

 

二、安装及运行：

我使用的IDE是PyCharm专业版（学生邮箱可以免费获取使用权限），直接就可以创建Flask项目。不需要去理会官方文档里讲得虚拟环境，命令行等等。

 

如果需要导入已有的文件，open-->Edit Configurations-->修改相应路径。

                

      

⚠图3中的FLASK DEBUG未打开，打开后如果进行浏览时程序运行出错，网页会显示出错的代码行。部署到服务器进行正式应用时绝对不能打开！

点击右上的小绿三角按钮运行（右键-->run的话运行的是所在页面的.py文件），通过出现的地址就可以访问自己的网页了。

 

三、应用的基本结构

每有一个入站请求，就会执行一个相应的处理函数。处理URL和函数之间关系的程序称为路由， 在Flask应用中定义路由最简单的方法是使用app.route修饰器。例如：

@app.route('/')
def index():
    return '<h1>Hello World!</h1>'

这就是说在请求访问127.0.0.1:5000（默认）时会执行index函数，如果将@app.route('/')替换为@app.route('/user')，意即请求访问127.0.0.1:5000/user时执行index函数。index（）这样处理入站请求的函数称为视图函数。

修饰器里的部分可以使用尖括号作为动态内容，匹配相应的入站请求。在下面示例中，如果入站请求为127.0.0.1:5000/user/zhangsan，网页即显示：Hello，zhangsan！如果入站请求为127.0.0.1:5000/user/lisi，网页即显示：Hello，lisi！均都由user函数处理。

@app.route('/user/<name>')
def user(name):
    return '<h1>Hello,{}!</h1>'.format(name)

 

当然，视图函数不止是仅能返回HTML语句。index.html、user.html称为Jinja2模板，是镶入了控制结构的.html文件，一般存于项目的template文件夹下，根据响应返回给真实前端代码的过程称为渲染。

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

@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

user.html重要部分?

{# 此符号内为注释 #}
{% if user %}            {# 此符号内可写类似于python的语句 #}
    <h3>Hello.{{ user }}!</h3>
{% else %}
    <h3>Hello,Stranger!</h3>
{% end if %}           {# for、if语句都要end #}

 

四、常见问题及已知的部分不足

①修改.css/.js文件后，打开浏览器浏览网页可能并不会发生变化，可能是由于浏览器缓存，Ctrl+F5强制刷新。

 

②此处使用<details>标签和<summary>标签配合，实现点击三角显示/隐藏内容，但是这两个标签仅被chrome等少数浏览器支持。

 

③longmanSum.py文件中包含大量的功能函数，我已简要做了标记。但弄清楚函数功能最简单的办法就是输出函数参数和返回值。

 

④我添加Pron Search界面时将longmanSum.py复制了一遍，并改名为longmanSumPronSearch.py,在浏览Pron Search界面时支持的部分功能函数就来自于此。我改动的函数有两个，listCom2和sumCom2。

listCom2是根据传入的音素和字素返回供网页显示的列表，sumCom2是根据传入的音素返回有此种发音的各种字素的数量。两个函数实现的原理类似。前期我将所有的单词拆分可能都一一列到一个csv文件（group.csv）中，两个函数都需要先将csv导入成dataframe然后再进行筛选(筛选过程已在代码中注释说明)。

 

⑤页面自适应问题。主要的实现方式有两种：

Ⅰ、在html文件开头加入

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

再在js里写（例）

function setWidth() {
    var screenWidth = document.body.offsetWidth;
    var circlepack_dom = document.getElementById("circlepack");
    circlepack_dom.setAttribute("width", screenWidth * 0.95 + 'px');
}

详细说明见https://blog.csdn.net/qq_40164190/article/details/83089459

overview界面右边的圆就是采取的这种方法。

Ⅱ、使用比例来确定div的长宽。按比例绘制div时长度单位不仅仅有%，还有

• vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
• vh：视窗高度的百分比
• vmin：当前 vw 和 vh 中较小的一个值
• vmax：当前 vw 和 vh 中较大的一个值
• %： 相对于父元素的大小设定的比率

Pron Search界面的软键盘就采取vmin为单位绘制。

 

⑥查询界面的翻页操作建议采用AJAX技术。

 

五、部署到服务器

摘自：https://blog.csdn.net/lihao21/article/details/52304119

总括来说，客户端从发送一个 HTTP 请求到 Flask 处理请求，分别经过了 web服务器层，WSGI层，web框架层，这三个层次。

 

Nginx（一种常见的web服务器）：Hey，WSGI，我刚收到了一个请求，我需要你作些准备，然后由Flask来处理这个请求。 
WSGI：OK，Nginx。我会设置好环境变量，然后将这个请求传递给Flask处理。 
Flask：Thanks WSGI！给我一些时间，我将会把请求的响应返回给你。 
WSGI：Alright，那我等你。 
Flask：Okay，我完成了，这里是请求的响应结果，请求把结果传递给Nginx。 
WSGI：Good job！Nginx，这里是响应结果，已经按照要求给你传递回来了。 
Nginx：Cool，我收到了，我把响应结果返回给客户端。大家合作愉快~

我首先Ⅰ租了阿里云，选择了Windows2016数据中心版（一般生产环境都选用Linux系统安全稳定，但windows是图形化界面?小技巧：使用Windows自带的远程桌面连接到服务器就不用每次打开阿里云了，而且流畅），Ⅱ像装新机一样装上python、pycharm，在上面运行本项目。Ⅲ然后将地址改为0.0.0.0:xxxx（⚠不是在main.py最后的app.run里面改参数，需要到Edit Configurations-->Additional options里写上--host:0.0.0.0 --port:xxxx，两段之间有空格）Ⅳ最后在阿里云上打开对应的端口，就可以使用服务器的公网访问了。

           

 

六、编后结

推荐一个问答网站-Stack Overflow，上面已经有了大量的代码修复实例（不仅仅局限于python）。如果都没有与自己的问题匹配上的话，若能清楚地描述问题及目标便可快速得到来自世界各地的解决方案。