<p><code></p> <p>本项目是在之前一个<a href="https://segmentfault.com/a/1190000010105596">vue项目</a>基础上,用react技术栈重写的一个书城项目</p> <blockquote> <p><a href="https://github.com/tgxhx/vue-reader" rel="nofollow noreferrer" target="_blank">vue版本地址</a></p> <p><a href="https://github.com/tgxhx/react-reader" rel="nofollow noreferrer" target="_blank">本项目地址</a></p> <p><a href="http://tgxhx.xyz/book" rel="nofollow noreferrer" target="_blank">预览地址</a></p> </blockquote> <h3 id="articleHeader0">项目说明</h3> <p>本项目是一个react + <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js + mysql构建的移动书城项目,数据是通过<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>js爬虫爬取,存储在mysql中,项目api通过express构建,前端部分是react技术栈。关于爬虫和api的详情请参考vue版本的说明,<a href="https://github.com/tgxhx/vue-reader" rel="nofollow noreferrer" target="_blank">地址</a>。</p> <p>在写这个之前对于vue算是比较熟练了,转到react,jsx的语法研究了两天,然后研究了一下redux,发现跟vuex是类似的东西,上手起来也比较快。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>然后开始用react全家桶重写这个项目,利用空余时间前后花了大概不到一个星期的样子,再之后花了一两天新增了vue版本没有的书架功能。</p> <p>项目是基于create-react-app构建的,增加了sass的支持,组件热重载还未支持,加入了react-router和redux。</p> <p>总结一下,vue和react的理念我认为是差不多的,重点都是组件化,state、props也是类似的作用,vuex和redux也有一定程度的类似,二者区别可能就是语法不一样了,vue写起来更像传统的html、js、css开发方式,jsx的写法有的人可能难以接受,但是也不难掌握,另外可能react对于js的掌握程度要求更高一些。</p> <p>所以我认为,vue和react如果你熟悉其中之一,我相信上手另一个是很快的,因为核心理念你已经掌握了,剩下了就是语法了,vuex和redux也是一样。</p> <p>本项目难点我认为是书架功能,也都写了注释,有类似想法的可以相互印证。</p> <h2 id="articleHeader1">功能</h2> <ul> <li> <p>[x] 首页推荐</p> </li> <li> <p>[x] 书籍详情</p> </li> <li> <p>[x] 相似推荐</p> </li> <li> <p>[x] 分类查看</p> </li> <li> <p>[x] 阅读器</p> </li> <li> <p>[x] 章节跳转</p> </li> <li> <p>[x] 更改字体</p> </li> <li> <p>[x] 更换主题</p> </li> <li> <p>[x] 夜间模式</p> </li> <li> <p>[x] 翻页浏览</p> </li> <li> <p>[x] 本地存储(存储每本书的阅读进度)</p> </li> <li> <p>[x] 书架</p> </li> </ul> <h4>项目截图</h4> <p><span class="img-wrap"><img data-src="/img/remote/1460000010110203" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/remote/1460000010110204" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/remote/1460000010110205" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/remote/1460000010110206" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/remote/1460000010110207" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/remote/1460000010729126" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25188.html