使用 WebStorm 连接服务器进行 Web 开发

在服务器配置好 ArcGIS JS API 后, 配合 WebStorm 就可以舒舒服服的进行撸码了.

撸码-发布-访问 一把梭

GIF.gif

先看存在的问题

直接引用api会存在跨域问题

image.png image.png

所以就要将写好的代码发布到服务器里面

配置服务器

• 如图打开配置

  
  image.png

• 点击 + 号添加服务器, 名字自己起一个, 类型我用 SFTP
  

  image.png

• 添加发布网站的目录
  去宝塔面板里面添加一个目录用于访问

  
  image.png

• 回到 WebStorm 配置服务器
  将来我们访问的应该是 http://api.happygis.com/demos/*
  用来测试
  

  image.png

配置好后 点击 Test SFTP 测试配置是否正确

image.png

点击 Mappings 设置部署路径, 在 Connection 里已经配置好, 所以加个 / 就行

image.png
点击确定即可

上传文件到服务器

如下图点击

image.png
点击后会在后台上传文件到服务器, 在下面的 File Transfer 面板可以看到
image.png

查看服务器

如下图点击

image.png
点击后会弹出连接到的服务器
可以看到刚才的 test.html 已经上传上去了
image.png

测试解决跨域问题

点击 Chrome 的图标跳转到 Chrome

image.png
可以看到跨域问题解决了
image.png

PS: 快速上传代码到服务器
配置一下 WebStorm 可以每次按下 Ctrl+S 就可以上传到服务器, 不用每次点好几下
(Automatic Upload也可以, 但是用着难受, 有时候想立刻看到写好的效果,但是没有自动上传就比较蛋疼)

image.png
如上图 打开 Options
image.png
按图上操作, 完成