在码上掘金写python是什么体验？使用python写一个URL分析器

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
你有想过在浏览器运行 python 么？就像运行 js 那样:
<script type="text/python3">
  # 这里写python程序
</script>
现在它来了，不用安装软件，不用安装依赖，只需打开【码上掘金】就能亲身体会。我们也来体会了一把，本次使用【码上掘金】使用python写一个URL分析器。不再是使用vue，而是使用python哦，怎么样，感兴趣吧，快来看看具体实现吧。
code.juejin.cn/pen/7145288…
初始化项目
如果你已经使用过【码上掘金】，可以略过本段落，直接看下一段落。
打开码上掘金(code.juejin.cn/)，选择【新建代码片段】【新建空白片段】来新建一个空白项目。
项目新建完毕后，由于我们是使用【码上掘金】写python，所以我们得增加相应的依赖才行，我们打开Script 右侧的设置按钮。
在依赖中写下关于python的js依赖。
https://cdn.jsdelivr.net/npm/jcode-tools
https://cdn.jsdelivr.net/npm/brython@3/brython.min.js
https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js
添加完成后，我们整个项目初始化就完成了，我们写一点python运行试试。
这里，写的python代码不是放到javascript中，而是放到custom中的哦！
其中，橘黄色部分是【码上掘金】使用python的模板，而蓝色部分是我们自己编写的python程序，我们点击运行后，预期出现了欢迎语和一个列表。
由此证明我们环境设置的没问题。
关于【码上掘金】支持的后端，我们可以看其官方发布的JCode Custom Lang，其github: https://github.com/xitu/jcode-languages
关于python如何操作DOM
关键是有了后端，还不够哦，如果没有相关的库来操作DOM，如果要自己写一个的话，累也累坏了，于是乎，我们可以看【码上掘金】中python代码运行时是什么，具体信息如下:
我们可以看到，其使用的是brython，于是乎，我们在看到相关资料后，我们可以来写一个简单的操作。
我们要完成的需求是 画一个可以供用户输入的地方，用户输入后，可以将其显示在 下方。
其模型草图如下：
有了如上需求，我们就可以来编写一下这个小需求，其中html代码如下:
<div id="app">
  <!-- 写一个textarea 来供用户输入 -->
  <textarea id="txts"></textarea>
  <!-- 写一个按钮来提交数据 -->
  <button id="PythonTest">点我可以在也面上新增数据</button>
  <!-- 用户输入的数据都会呈现在这里 -->
  <div id="result"></div>
</div>
<!-- 此处省略掘金JCode调用 -->
在brython中，我们操作DOM的方法可以通过id，于是乎我们就直接给起起名id即可，例如输入框，我们id为txts，按钮我们id为PythonTest，而结果呈现我们以result来命名id。
其中python如下:
#!/jcode/lang/python https://xitu.github.io/jcode-languages/dist/lang-python.json
import browser
def addTxt(ev):
  # 获取textarea中的数据
  val = browser.document["txts"].value
  # 将数据添加到 id为result的div中
  browser.document["result"] <= browser.html.P(val)
# 给按钮绑定事件
browser.document["PythonTest"].bind("click",addTxt)
python相比于html，就简单多了，我们不用担心如何构建brython项目，【码上掘金】都给我们搭建好了的，我们仅需要导入browser库，即可操作DOM。
如上代码，我们先给按钮绑定一个时间，将其绑定到addTxt方法上，而在addTxt方法中，我们将获取输入输入框txts的内容，而后将其格式化为p标签，从而追加到id为result的容器中即可。
我们来看下具体效果:
如何实现URL分析器
既然我们已经使用python作为主要语言了，那我们可以用官网提供的库urllib.parse即可实现该功能，例如:
我们要分析的URL为: https://pdudo.juejin.cn//home/Life?id=65535&msg=%22%E4%B8%BA%E4%BA%86%E7%94%9F%E6%B4%BB%22#starts
我们使用python来写一下
短短数行代码，我们已经核心需求写完了，其中的信息为:
scheme: 协议
netloc: 域名
path: 路径
query: 查询参数
fragment: 描点
只要python库用得好，没有需求完不了。
前端页面较为简单，就只有一个输入框，一个按钮和一个展示页面，具体我们来看下:
<div id="app">
  <div id="userInputInfo">
    <label>请输入你要分析的URL: </label>
    <textarea id="userInput"></textarea>
    <button id="button_alert">分析</button>
  </div>
  <div id="displayUrlInfo">
  </div>
</div>
<!-- 省略掘金JCode调用 -->
我们定义一个textarea作为用户的输入，下面定义一个按钮。最后定义一个div容器用于显示输出。
最后在css的封装下，我们效果如下:
关于前端，这里就不再过多介绍了。
python编写
这里强调一点，若在【码上掘金】使用python，一定要选择Script类型，写在Custom下，且第一行必须要引用掘金写好的json解释器，这些在初始化项目时，都有相关解释，若跳过了，可以回去再看下。
python代码如下
在python代码中，我们引入了很多库，其中browser是brython提给我们操作页面的，document可以选择整个页面的任何组件，而browser.html下的BUTTON,LI,B,UL分别代表html中的button、li、b、ul标签，最后的urllib.parse使我们分析url的库。
来看看代码逻辑呢， 代码运行后，先将displayUrlInfo容器赋值给一个变量UrlInfo。而后document["button_alert"].bind("click",resUrl),将按钮绑定一个点击事件，目的是让用户在点击后，可以进入到resUrl方法中。
而在该方法中，urlInfo.clear()则会先清理id为displayUrlInfo的容器内容。encode_url = document["userInput"].value会获取用户输入的数据，最后在利用urllib.parse库进行解析，这里写了很多if，是判断如果该类型没有数据，则不进行显示。最后再使用for循环遍历一下查询参数。
为了演示方便，我将方法中的document["userInput"].value = ""暂时给屏蔽掉，不然我一点解析，输入框就没东西了，不好判断数据的。
解析只有协议、域名 和 路径 的url
输入有查询参数的url
若只输入一段字符串，会被作为路径展示
不得不说，【码上掘金】支持后端，真的是一个提别好的开端，如果我来宣传【码上掘金】后端功能，我应该会这样说： “兄弟，你想写出不可维护的代码么？ 你想自己在公司变得不可替代吗？ 你想抢前端的饭碗么？ 快来使用【码上掘金】学习如何利用后端语言来操作页面吧。”好了，开玩笑的了。
怎么样，觉得本章有趣么？ 快来动动你的小手指来试试吧。