Skip to content

Commit

Permalink
move gif to CDN FIX issue#16
Browse files Browse the repository at this point in the history
  • Loading branch information
halfrost committed Mar 8, 2018
1 parent b87f054 commit 243e40f
Show file tree
Hide file tree
Showing 11 changed files with 20 additions and 18 deletions.
20 changes: 11 additions & 9 deletions README.md
Expand Up @@ -291,14 +291,16 @@ Finally look at Cordova's effect:

Build a Web page with Vue.js quickly.



<p align='center'>
<img src='./image/Gifs/Web.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_22.gif'>
</p>

Vuex management status is very convenient. Login status saved in the state inside, the global object will be obtained it.

<p align='center'>
<img src='./image/Gifs/Web-login.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_23.gif'>
</p>

If there is no login in information and user click the purchase button to buy an e-book, it will jump to the login page.
Expand All @@ -314,47 +316,47 @@ In HTML5 history mode, router-link will intercept the click event so that the br
When you are using the base option in HTML5 history mode, you don't need to include it in to prop's URLs.

<p align='center'>
<img src='./image/Gifs/Web-logout.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_24.gif'>
</p>

Similarly, once the user logs out, all places showing the user name will become a status to be logged in, the shopping cart on navigationBar also be disappeared. Manage status with Vuex, very exciting.

<p align='center'>
<img src='./image/Gifs/Web-email.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_25.gif'>
</p>

This is the email form validation, not too much technical content.

<p align='center'>
<img src='./image/Gifs/Web-buy.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_26.gif'>
</p>

Here is the shopping cart page and use the MVVM page binding ideas. There are four buttons on the page, clicking any one will immediately change the related total price. To iOSer, it's worthy to learn the implemention on the MVVM.

Then this is the iPhone's Safari performance, the speed is well.

<p align='center'>
<img src='./image/Gifs/Web-iPhone.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_27.gif'>
</p>

In the cross-platform of these applications, the best experience, I think, is the application of Mac.

<p align='center'>
<img src='./image/Gifs/Web-Mac.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_28.gif'>
</p>

Finally is the mobile phone app build by Cordova framework, I'm a little picky and not satificated with the unoptimized Cordova. See this showcase below:

iPhone application

<p align='center'>
<img src='./image/Gifs/Web-iPone app.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_29.gif'>
</p>

iPad application

<p align='center'>
<img src='./image/Gifs/Web-iPad app.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_30.gif'>
</p>

## 🤔 Reflection
Expand Down
18 changes: 9 additions & 9 deletions README_CN.md
Expand Up @@ -281,13 +281,13 @@ iPad 的 Web
用 Vue.js 搭建一个 Web 页面很快。

<p align='center'>
<img src='./image/Gifs/Web.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_22.gif'>
</p>

看看 Vuex 管理状态的方便。登录状态保存在 state 里面,全局都会获取到。

<p align='center'>
<img src='./image/Gifs/Web-login.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_23.gif'>
</p>

一旦用户没有登录,点击购买电子书的时候,判断没有用户登录都会跳转到登录页面。
Expand All @@ -303,47 +303,47 @@ iPad 的 Web
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。

<p align='center'>
<img src='./image/Gifs/Web-logout.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_24.gif'>
</p>

登出页面同理,一旦用户登出,所有显示用户名的地方都会变成登录,navigationBar 上的购物车也一并消失。用 Vuex 管理状态,挺好的。

<p align='center'>
<img src='./image/Gifs/Web-email.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_25.gif'>
</p>

这就是 email 的表单验证了,没有太多的技术含量。

<p align='center'>
<img src='./image/Gifs/Web-buy.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_26.gif'>
</p>

这里是购物车页面,这里用到了 MVVM 页面的绑定的思想,页面上 4 个按钮,点任意一个按钮都会立即改变下面的总价。关于 Vue.js 的 MVVM 实现思想值得 iOSer 们学习。

接下来这个是 iPhone 的 Safari 上的表现,速度还可以。

<p align='center'>
<img src='./image/Gifs/Web-iPhone.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_27.gif'>
</p>

在跨平台的这几个应用中,体验最好的,我觉得还是 Mac 的应用。使用起来满意度非常高。

<p align='center'>
<img src='./image/Gifs/Web-Mac.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_28.gif'>
</p>

最后就是 Cordova 框架搭建的 手机 app,体验度不高,具体如何,看图吧,总之不优化的 Cordova ,对于挑剔的我来说,我是不满意的。

iPhone 上的应用

<p align='center'>
<img src='./image/Gifs/Web-iPone app.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_29.gif'>
</p>

iPad 上的应用

<p align='center'>
<img src='./image/Gifs/Web-iPad app.gif'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_30.gif'>
</p>

## 🤔 项目完成之后的感想
Expand Down
Binary file removed image/Gifs/Web-Mac.gif
Binary file not shown.
Binary file removed image/Gifs/Web-buy.gif
Binary file not shown.
Binary file removed image/Gifs/Web-email.gif
Binary file not shown.
Binary file removed image/Gifs/Web-iPad app.gif
Binary file not shown.
Binary file removed image/Gifs/Web-iPhone.gif
Binary file not shown.
Binary file removed image/Gifs/Web-iPone app.gif
Binary file not shown.
Binary file removed image/Gifs/Web-login.gif
Binary file not shown.
Binary file removed image/Gifs/Web-logout.gif
Binary file not shown.
Binary file removed image/Gifs/Web.gif
Binary file not shown.

0 comments on commit 243e40f

Please sign in to comment.