之前在公司也做过一些案例,也看过很多友商的产品,阿里的DataWork,领英的Datahub, datawork的血缘图使用的是 G6,自家的产品 Datahub使用的是 爱彼邻的 可视化库 visx...该血缘图的特性如下 上下游 自定义节点 节点可点击,操作 线的样式有多种 鼠标放置线上有辅助信息 可以展开上下游 最基本的放大,缩小视图 F12 节点的源码,发现使用的是SVG 实现的 标签的类前缀都是...vx,但直接搜没有搜到,于是去项目的package.json中寻找使用的库。...使用 VISX 可以方便地将设计元素添加到 React 应用程序中。它是由 Airbnb 构建的。...提前关键词,该库具有的特征 为react 低级元素 可视化 低级元素是说它不直接提供一个个完整的图表,而且要使用多个元素组装实现,这也意味着 要使用它,还是有一点门槛的,但人家的审美确实在线。
,然后抛出一个错误。完成后将其另存为项目文件夹中的app.js。...你可以使用它通过图形界面调试 Node.js 应用程序、动态编辑代码以及使用代码完成、重构、测试等各种功能。你可以从其官方网站下载WebStorm。代价:WebStorm 具有不同的定价和许可选项。...对于此示例,我将使用一个简单的应用程序来打印“Hello, world!”然后抛出错误。...在打开的对话框中,单击 **Add** 按钮,然后从列表中选择 **Node.js**。这将为你的应用程序创建一个新的 Node.js 运行/调试配置。...对于此示例,我将使用一个简单的 Express 应用程序来打印“Hello, world!”然后抛出错误。将其保存在你的项目文件夹中。
Python有很多虚拟环境库,如pipenv和virtualenv等,这里选择virtualenv,使用命令pip install virtualenv即可安装虚拟环境库。...使用命令virtualenv envname即可创建虚拟环境,然后进入到虚拟环境目录下的Scripts目录,并执行activate.bat命令即可进入虚拟环境,进入虚拟环境后看到命令行目录前面有括号括起来的虚拟环境名称...此时再执行mkvirtualenv envname即可创建并进入虚拟环境,默认是创建到系统盘当前目录下,如果需要将虚拟环境保存到其他目录,可以在环境变量中添加系统变量,变量名为WORKON_HOME,值为虚拟环境的目标路径...五、Vue开发环境搭建 IDE可以使用WebStorm、VSCode、Sublime等,可以根据自己的需要继续选择。...Vue开发需要使用到npm,所以需要安装node.js,可以在http://nodejs.cn/download/选择合适的系统和版本下载安装即可,安装之后,新开一个命令行,执行node --version
根据我个人的试用,WebStorm 应该是配置起来最省心,用起来最顺手的选择,而且有 Android Studio 和 PyCharm 的使用经验上手毫无障碍。...但一来 WebStorm 价格不菲,二来最近刚刚被 Atom 圈粉,而 Visual Studio Code 和 Atom 又是这些编辑器里面与 Node.js 渊源最深的,所以最终决定最近在学习 Node.js...进行完这一步以后,顺利的话你应该已经能愉快地看到原生 js 和 Node.js 的自动补全了;不顺利的话,看看下面的 Q & A 一节,有我遇到的问题的记录。 最终效果: ?...我在 Windows 下按官方指南配置 atom-ternjs 倒是很顺利,按默认步骤操作完,然后在 plugins 一节添加 node 就一切 OK 了,但在 Mac 下貌似不配置 loadEagerly...Vim 也有 tern_for_vim,作为主力编辑器,为何不使用它来写 Node.js 呢? 别提了,如果没有把 .tern-project 文件配置好,打一个 .
React 的强大之处在于用一种巧妙的思想处理了 Web 页面中冗余重复代码多的问题。它能将一些可重用的代码封装成一个个组件,在另外使用的时候,只需要使用组件进行实例化即可。...官方的 create-react-app 工具,使用它可以直接创建一个 React 项目。...你安装 create-react-app 成功之后,就能直接在 WebStorm 中使用集成创建项目的方法创建一个 React 项目,创建项目的时候选择到 React App 一栏,WebStorm 会自动识别到...引入Ant-Design 当删除完成之后,我们就可以引入 Ant-Design 了,在集成终端中输入: yarn add antd 这样一来我们就在项目中引入了 Ant-Design,但是我们还不能直接使用它...,然后修改路由文件,在 Switch 中添加 path 与组件的对应关系即可。
本文将会对比 node.js 有一定开发经验的读者,简单介绍几个入门 python 开发推荐使用的相关工具。...pipenv:强烈推荐使用的包管理工具。 pipenv 将会创建一个独立的虚拟环境,所有操作都将在这个虚拟环境中进行。...首先,你必须通过 pipenv 在虚拟环境中安装一个 python 版本: pipenv --python 3.7 虚拟环境中的 python 版本与你物理机本地的 python 版本相互隔离、互不影响...四 部署 · pm2 部署应用时,在 node.js 中我们一般使用 pm2 去监控程序,让它挂了能够自动重启,而在 python 中我们同样可以使用 pm2 。...因为 pm2 的 cluster 模式是依赖于 node.js 的,无法直接在 python 中使用,但我们其实并不用对此过于在意,因为很多框架本身已经提供了多 worker 的支持,其次我们关注的重点仍在于异常重启
2、安装WebStorm:WebStorm是商业软件,可以免费试用30天,非常感谢MVP项目,从WebStorm获得了1年的License 。...下载地址:http://www.jetbrains.com/webstorm/download/ 下载并安装一个支持Node.js的集成开发环境IDE:“JetBrains WebStorm 4.0.3...Node.js开发环境安装完成就完成了,非常的方便。 使用webstorm开发,直接就可以创建NodeJs项目了: 新建一个项目,会自动帮你配置 express mvc 框架。...对你的nodejs开发文件夹进行配置,点击配置按钮对下面的对话框进行具体配置 webstorm对Node.js有很好的调试功能。调试时只要点击run按钮,软件就会自动启动控制台。...在浏览器中访问相关地址 参考文章: 前端开发利器webStorm 3.0配置使用 一个周末掌握IT前沿技术之node.js篇:Node.js与javascript nodejs+express+ejs
,但是闭源带来的问题就是一个bug千年都不见修复,很影响使用。...主要缺点: 还不够稳定,经常会崩溃,要不是经常崩溃,绝对使用它了。 插件还不是很完善,但是发展速度相当快。 debug的灵活性还不够。 对C#的支持还不够好。...享受代码补全、强大的导航功能、动态错误检测以及所有这些语言的重构。 调试、跟踪和测试 -> WebStorm提供强大的内置工具进行调试、测试和跟踪 您的客户端和Node.js应用程序。...只需很少配置和精心 集成到IDE中,WebStorm使这些任务变得更加轻松。...这个平台可以针对您的开发工作流进行微调并且能够提供高度可定制的体验。 具体详细的功能特效介绍,可以在官网浏览,?
使用 easy_installeasy_install 这应该是最古老的包安装方式了,目前基本没有人使用了。...使用 pipxpipx 是一个专门用于安装和管理 cli 应用程序的工具,使用它安装的 Python 包会单独安装到一个全新的独有虚拟环境。...由于它是一个第三方工具,因此在使用它之前,需要先安装$ python3 -m pip install --user pipx$ python3 -m userpath append ~/.local/binSuccess...使用 yumPython 包在使用 setup.py 构建的时候,对于包的发布格式有多种选项,其中有一个选项是 bdist_rpm,以这个选项发布出来的包是 rpm 的包格式。...使用 pipenv如果你在使用 pipenv 创建的虚拟环境中,可以使用下面这条命令把包安装到虚拟环境中$ pipenv install pkg7.
目前主流的前端类库/框架,包括node.js及其模块/框架都有相应的tsd文件,可以去DefinitelyTyped上找一下。 在项目中引入对应文件,就可以有智能提示了。...具体用法参考tsd用法。...从vsc发布后,我就一直用它写代码,也是用它来调试node.js代码。...最后,再赠送彩蛋一个。 Node API 查看 在写node.js代码的时候,有时会忘记某个模块中有哪些方法及其用法,经常要去官网翻一下api文档。 这里介绍下怎么使用vsc来搞定这一问题。...结语 vsc和其他编辑器(sublime text,atom,webstorm等)相比,某些方面还存在很多问题。对于一个前端工程师来说,它已经足够好了。 当然了,它在不断改进。
原因: 版本10 fs.promises的API是实验性的,webstorm不允许使用。 解决:卸载掉原有node.js,重新安装node.js 8版本。...解决:降低webpack版本 先删除node_modules目录及文件,然后在项目根目录下执行卸载命令:cnpm uninstall webpack,最后重新安装较低版本的webpack:cnpm install...方法二:在代码中使用err对象,如下: console.log('err:' + err); **(8)npm ERR!...enoent ENOENT: no such file or directory, open ‘F:\demo\path\package.json’ ** 原因:命令执行的路径有问题 解决:在项目的根路径执行...解决方法: 使用ipconfig/ifconfig查看本机IP,将webpack中index.js的 host 改成本机IP,如果本机IP是DHCP分配的,那么host每次都需要改成对应的本机IP。
然后找到你想开始项目的地方,输入下方代码: mkdir webpack3 cd webpack3 第一句是建立一个文件夹,第二句是进入这个文件夹。...网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/。...src/entery.js: document.getElementById('title').innerHTML='Hello Webpack'; 2.3 使用webpack打包 在webstorm终端中执行下面命令行...2.4 安装live-server live-server是一个具有实时重载功能的小型开发服务器。用它来热加载HTML / JavaScript / CSS文件,但不能用于部署最终的网站系统....现在我们全局安装live-server(node.js和npm的依赖),在webstorm终端进行即可,命令如下: npm install -g live-server -g:表示全局安装。
(1)如下图: [webstorm报错信息] 搭建vue项目 使用webstorm搭建vue项目,报如上错误。 本地node版本为10。...原因: 版本10 fs.promises的API是实验性的,webstorm不允许使用。 解决:卸载掉原有node.js,重新安装node.js 8版本。...解决:降低webpack版本 先删除node_modules目录及文件,然后在项目根目录下执行卸载命令:cnpm uninstall webpack,最后重新安装较低版本的webpack:cnpm install...方法二:在代码中使用err对象,如下: console.log('err:' + err); (8)npm ERR!...enoent ENOENT: no such file or directory, open ‘F:\demo\path\package.json’ 原因:命令执行的路径有问题 解决:在项目的根路径执行
虽然我们没有将数据库插件与 WebStorm 捆绑在一起,但早就有办法通过购买DataGrip或所有产品包订阅来获得里面的数据库和 SQL 支持,这将允许你安装数据库插件并在 WebStorm 中使用它...从 v2020.2 开始,你可以订阅我们的数据库插件,并在 WebStorm 中以合理的价格使用它。 如何试用该插件 要安装插件,请转至“首选项/设置” |“设置”。...单击搜索结果中“Database tools and SQL”插件旁边的“Install”按钮,然后重新启动 IDE。 接下来,系统将提示你激活许可证。如果你已经有一个,你可以在那里直接激活它。...为你在 WebStorm 中的项目提供类似的编码协助。 多种导入和导出数据选项。 如果你想了解更多有关可用功能的信息,请访问此网页,你也可以查看DataGrip 博客,以了解最新的改进和新闻。...如果你已经拥有 DataGrip 或所有产品包许可证,你可以使用它来激活插件,而无需购买任何额外的订阅。 与其他 JetBrains 产品一样,从使用的第二年开始,有一个连续性的折扣。
根据我个人的试用,WebStorm 应该是配置起来最省心,用起来最顺手的选择,而且有 Android Studio 和 PyCharm 的使用经验上手毫无障碍。...但一来 WebStorm 价格不菲,二来最近刚刚被 Atom 圈粉,而 Visual Studio Code 和 Atom 又是这些编辑器里面与 Node.js 渊源最深的,所以最终决定最近在学习 Node.js...(配合 autocomplete-plus 插件使用,Atom 默认已经安装。) 安装方法与安装其它插件无异,主要有三种选择: 图形界面。 这种方法在国内需要访问国外网站 命令行。...我在 Windows 下按官方指南配置 atom-ternjs 倒是很顺利,按默认步骤操作完,然后在 plugins 一节添加 node 就一切 OK 了,但在 Mac 下貌似不配置 loadEagerly...访问国外网站 Vim 也有 [tern_for_vim][],作为主力编辑器,为何不使用它来写 Node.js 呢? 别提了,如果没有把 .tern-project 文件配置好,打一个 .
采用单线程、异步IO与事件驱动的设计来实现高并发(异步事件也在一定程度上增加了开发和调试的难度); Node.js内建一个HTTP服务器,所以对于网站开发来说是一个好消息; 主页:http:...npm list 安装成功后,会在PATH用户环境变量和系统环境中分别添加npm和node.js路径 开发工具 WebStorm 我下载了个7.0,好像用它的不少 WebStorm...项目,如果只在Windows环境下开发,推荐用它 WebMatrix下载地址: http://www.microsoft.com/web/webmatrix/ 我最终还是选择了Sublime,可以在各平台下保持个统一个开发工具...,配置方法网上有很多 Sublime下载地址: http://www.sublimetext.com/ (软件无需注册,使用过程中时不时会弹出需要注册的窗口,取消即可) Sublime Node.js...NVM,Windows上好像不行,在www.npmjs.org中找了这个,虽然学习用不上,先装上再说) 安装命令 npm install -g nvmw 因为没有使用到它,所有就不做多的介绍
对CSS模块的Camel案例支持如果在项目中使用CSS模块,JavaScript文件中的类的代码完成现在将建议带有破折号的类名的驼峰版本。...新的调试器控制台在JavaScript和Node.js调试工具窗口中使用新的,改进的交互式调试器控制台!...改进了对短绒的支持WebStorm现在可以 在一个项目中为ESLint和TSLint运行多个进程,以确保它们在单个项目和具有多个linter配置的项目中正常工作 。...支持Docker Compose如果使用Docker测试Node.js应用程序,现在可以使用Docker Compose文件中描述的配置从IDE 轻松运行和调试应用程序。...新的UI主题您现在可以在WebStorm中使用新的丰富多彩的UI主题作为插件。选择 深紫色,灰色和 青色光主题,或创建自己的主题 。
在Python开发的世界中,正确的工具可以让你事半功倍。本文将向你介绍一些受欢迎的Python开发工具,以及如何使用它们来提高你的编程效率和代码质量。 1....包管理器 pip pip是Python的官方包管理器,用于安装和管理Python包。你可以使用它轻松安装第三方库和工具。...虚拟环境 venv venv是Python的虚拟环境工具,用于隔离项目的依赖。它允许你在不同项目中使用不同的Python版本和包。...你可以使用它来确保你的代码在不断迭代中保持稳定性。...无论你是初学者还是有经验的开发者,这些工具都是提高生产力的秘密武器,让你在Python编程的旅程中取得成功!
使用 Node.js + Express 连接 MySQL 数据库 由于本项目需要使用服务端,所以在编写客户端的同时,还要编写服务端的程序,这一部分会使用 Node.js + Express 连接 MySQL...本项目使用 WebStorm 开发,创建一个名为 service 的工程,接下来在 service 工程中创建 my_connect.js 文件,并输入下面的代码。 ?...然后在浏览器地址栏中输入 http://localhost:3000,就会在 WebStorm 的控制台看到输出结果。 5....接下来在 mysql_connect.js 文件中添加如下代码。 ? 接下来创建路由脚本文件 hnf.js,并添加下面的代码: ? 接下来在 app.js 中使用下面的代码注册 hnf 路由。...首先切换回 WebStorm,在mysql_connect.js文件中添加如下的方法,该方法用于获取商品类型,也就是导航按钮数据。有多少个商品类型,就显示多少个导航按钮。 ?
1 环境搭建 1.1 WebStorm集成Node.js Node.js入门学习笔记-IDE选择/配置之WebStorm(windows) http://www.cnblogs.com/shanyou/...3.2 新建一个工程 3.3 配置node.js.exe 路径 确定路径没错后,点击升级webstorm的支持node.js的插件 3.4 添加代码到工程 代码里面填写 console.log...有了npm,可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。...全局的安装是供命令行使用的,就好像全局安装了vmarket后,就可以在命令行中直接运行vm命令 npm install --save 安装的同时,将信息写入package.json中项目路径中如果有...,搜索结果取决于当前使用的目录中的node_modules下的内容。
领取专属 10元无门槛券
手把手带您无忧上云