在码上掘金写python是什么体验？使用python写一个URL分析器你有想过在浏览器运行python么？就像运行js

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

你有想过在浏览器运行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>

  <br />
  <!-- 写一个按钮来提交数据 -->
  <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>
    <br />

    <textarea id="userInput"></textarea>
    <br />
    <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

若只输入一段字符串，会被作为路径展示

总结

不得不说，【码上掘金】支持后端，真的是一个提别好的开端，如果我来宣传【码上掘金】后端功能，我应该会这样说： “兄弟，你想写出不可维护的代码么？你想自己在公司变得不可替代吗？你想抢前端的饭碗么？快来使用【码上掘金】学习如何利用后端语言来操作页面吧。”好了，开玩笑的了。

怎么样，觉得本章有趣么？快来动动你的小手指来试试吧。

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