VueJS项目调试(debug)
启动服务后刷新页面(刷新前先把浏览器开发者工具打开),可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后,指定到debugger处时程序就被debug了。如下图所示,剩下的大家应该都很熟悉了。可以看到,此处显示的代码就是我们组件里的实际代码,并非被我们编译混淆后的那种代码,可读性非常好。
启动服务后刷新页面(刷新前先把浏览器开发者工具打开),可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后,指定到debugger处时程序就被debug了。如下图所示,剩下的大家应该都很熟悉了。可以看到,此处显示的代码就是我们组件里的实际代码,并非被我们编译混淆后的那种代码,可读性非常好。
作为一名web程序员,不论你是前端、后端还是全栈,你肯定都会碰到http请求。如果我们只是在PC端常规的网页浏览器上发起http请求的话,通过浏览器开发者工具自带的network相关工具可以很方便的查看请求头、请求参数、请求方法、响应头、相应内容等数据。但是如果我们开发的页面是放在移动端比如微信里面使用的,有时候我们会需要可以直接在电脑上查看手机上发出的http请求和响应数据,或者至少这在很多情况下会让事情变得简单。Windows系统里我们可以用Fiddler,对于我们Mac系统用户而言,Charles这个软件可以帮你解决这个需求。
用户在支付页面点击我们页面里的支付按钮,然后前端使用微信跳转地址跳转到微信pay.example.com开头的一个后端提供的接口上去,这个时候相当于对这个后端接口发起了一个get请求,服务端根据微信在接口后面追加的code查询参数来获取微信号A的用户在微信号B中对应的openid(用户无需关注微信号B),然后服务端在响应前端get请求时进行重定向返回到用户先前访问的支付页面并在新的url后面追加openid参数参数(微信号A的用户在微信号B中的openid),然后前端页面检测url中是否带有openid来判断是否需要通过js自动触发请求到服务端查询一些微信统一支付的参数来在客户端调启微信支付控件。大概就是这么个意思,实际操作中我们会对接口追加一些诸如告诉服务端重定向要定向到的地址,支付页面所在订单的id之类的参数。下面这种吊起维系支付控件的方式是不需要经过微信JSSDK授权的,两个不是一回事,因为用的不是微信JSSDK里的支付API。
为了接下来能比较容易上手后端项目,结合目前所做项目的后端开发们使用的是spring mvc而非spring boot。决定先把基本的java开发环境配置好,先跑一个本地服务能看到页面再说。我是按着http://www.cnblogs.com/Sinte-Beuve/p/5730553.html这篇文章的教程来的,所以内容大体一致,再写一遍主要是为了加深自己的印象。 最最基础的,你需要先装好java、maven和tomcat(tomcat选装,如果用jetty等其他web容器,就用不到tomcat了,不过tomcat还是用的最广泛的,出于学习的目的,还是装下比较好),这部分内容之前有写过文章《Macbook Pro安装Maven 3 》。然后开始下面的流程:
然后我发现一个坑,就是每次我重启终端或者重启电脑后mvn变量又不能用了,这显然是不行的。我用的是zsh,参考网上的资料,打开~/.zshrc文件并在末尾添加上面那句话并重启终端后mvn命令就可以用了(每次启动终端前,会自动运行一次~/.zshrc里的命令,不需要手动去source了)。
我们的场景是前端SPA应用有两个入口,一个是我们自己的微信公众号(可以实现微信授权,调用微信JSSDK),一个是第三方的公众号(需要第三方支持才能实现微信授权),出于统一和方便的考虑,上传照片功能没有使用微信JSSDK里的选择图片和上传图片相关方法,而是用传统页面里上传图片的方式。上传图片常见的有两种方式,一种是上传图片base64数据,一种是上传文件blob对象。这里我们选择的是上传文件blob对象。现在的问题是,服务端尤其是大部分tomcat里配置的post请求允许接收的最大数据量好像是2M,现在手机的像素都很高里,很容易就会拍出来大于2M的照片的,而且就算没有服务端限制,上传2M甚至更大的图片的速度会比较慢,对用户的体验也不好。所以今天趁着有空,自己做了个图片压缩的功能上去。直接上代码吧,下面是封装的压缩图片文件(blob对象)的方法,外部调用这里的compressImage方法(该方法返回的是一个Promise对象)