文享日志

项目前后端分离初探

Nodejs Vue.js 爬虫

发表于2018年08月07日10:53:19

更新于2018年08月16日01:21:27

0条评论 138次阅读

为什么要进行前后端分离?

    1、便于构建大型应用。随着Web应用越来越复杂,以往前后端混合开发的模式不满足构建大型Web应用的需求。

    2、减轻服务器压力,将计算任务交到用户计算机手里。

    3、降低前后端耦合。使前后端开发人员各司其职。

    4、我想我喜欢


怎样进行前后端分离?

      刚开始尝试的时候,也是困惑了几分钟,因为不知道在Vue前端使用一个端口,后端使用一个端口的情况下,怎么将Vue和koa整合到一个项目里。后来想了想,为什么要整合到一起?Vue前端使用koa提供的API不就可以了?

      实际写的过程,也是磕磕绊绊。Vue官网并没有实际使用vue-cli构建项目的案例,网上的相关书籍与视频又太旧(我使用的是2018年7月30日更新的vue 3.0.0-rc.10 )。未进行前后端分离的WebSplider项目是我第一次尝试用Vue,我直接将Vue引用到HTML标签中,尽可能的使用Vue各种特性。进行前后端分离的Vue使用vue-cli,也是我第一次尝试在Node环境下写前端。在详细看了官方文档,和领悟vue-cli初始生成的HelloWorld项目,其实就能够大概的了解这东西怎么用了。在后来引入Vuex和VueRouter后,简单配置一下就可以。

    

      在前后端两部分域相同的情况下使用两个端口,也会产生跨域问题。

这里使用CORS解决跨域问题,要对前后端进行跨域配置。最简单的解决跨域问题的设置响应头

"Access-Control-Allow-Origin":"*"

表示接受任意域名的跨域请求。


在跨域请求的情况下,Cookie默认不会被后台接受,所以不进行配置的情况下,使用Cookie的场景都会受到影响,解决方法就是添加响应头

"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Origin": "http://localhost:8080"

这里注意"Access-Control-Allow-Origin"字段不再是"*"任意来源


在跨域请求的情况下,默认能拿到六个请求头字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。要获得其他字段还需要配置请求头.

"Access-Control-Expose-Headers":"允许得到的字段"


前后端分离的优缺点

        搜索爬虫引擎基本都是从服务器爬取成品网页,前后端分离方案中,后端服务器只提供API,爬虫引擎分析不来API中的数据。不过现在又有SSR这种服务端预处理的方案用来解决这种问题。。选用何种开发方案要具体问题具体分析。如果你的网站对SEO非常看重,那最好还是使用传统的开发方案。




WebSpliderPanel项目地址:

https://github.com/LuckyHH/WebSpliderPanel

WebSplider在线爬虫可以单独使用,也可以配合该Panel共同使用。


实例地址:

https://splider.herokuapp.com

 API使用的是Heroku上的WebSplider



👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广