在前面几节课，我说过这种数据构造平台，集成了各种工具，而工具按照复杂度，可以划分为很多类。于是，我们之前刚刚做了一个简单的计算加法的小工具。
本节课，我们要做一个独立的模块：页面自动获取数据
这个模块可以被工具随意调用，目的是在页面刚打开后，就自动的去动用接口获取一些基础数据，以便用户选择使用。
比如某个工具需要输入手机号，但是手机号应该有国家区号，但是国家区号和名称这些，数据量是很庞大的，你不可能写死到具体的html页面中，而且又都是一些通用数据，所以基本上都是直接通过接口获取，也就是页面一开始就自动请求的，可能通过接口，可能直接读取本地配置文件，或者数据库等方法，不管怎么样，我们做一个模块，用来存放这些工具提前要做的事即可。
首先回顾下我们的项目结构：
其中views.py 是处理平台的一些功能函数.
其中views_tool.py是具体的工具的功能函数
所以我们再创建一个文件，叫 tool_mounted.py ，用来存放页面自动获取数据的功能。
然后我们再去创建一个工具demo，例子就是，输入手机号密码然后生成用户token的功能(其中就需要用到 默认的 国家区号 数据)
让我们按照标准流程来创造：
去数据库创建一个工具：
2. 然后记录下工具的Id 为：8
3. 检查首页，确认工具已经可以看到
4. 点击使用按钮，记录下路由为：
5. 去vue前端项目创建一个对应的页面级组件：
6. 复制之前工具的布局代码，到这个新组建页面中，并设置好标题：
7. 去router.js中设置好对照路由和页面关系：
8. 用vue命令 npm run serve 进入8080的调试页面，看看能否进入工具使用页面：
9 . 回过头来仔细完善开发这个页面vue组件。
dom层：
注意，其中使用了elementui的下拉选框和vue的循环数据。
bom层：
注意，通过mounted属性，我们可以让vue自动的去执行获取数据的接口，该接口即是我们后续要放在took_mounted.py中来实现的内容。
而其中的gjqh变量即为所有国家区号的数据列表。
本节课到此结束，我们下节课继续来实现这个工具哦~
欢迎大家追看，可千万别说我水，毕竟目前公众号内容只是全部技术深度和广度的极小部分哦，一天全给你更新完，后面还有人看么？对不？
所以你安心追更就好了，一点点进步是最健康的成长方式，步子迈太大 容易扯着蛋！
进群加v: qingwanjianhua
