前后端分离

解决跨域问题 1. 什么是跨域 　　1.1.不同域名的资源访问，存在跨域 　　1.2.同一个域名不同端口的资源访问，也属于跨域 　　1.3二级域名不同的资源访问，也属于跨域 只要域名（ip ）和端口号有一样不同，那么都是跨域 http://localhost:8080 前端系统 发送 Ajax 取后端系统获取数据 http://localhost:80 后端系统 以上的两个地址也是跨域 2.跨域问题 跨域不一定会有跨域问题。 因为跨域问题是浏览器对于ajax请求的一种安全限制， 也可以说是浏览器的同源策略 同源策略 限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 虽然说同源策略有效的防止了跨站攻击，但是给我们开发带来了不便。 3.跨域解决方案 目前比较常用的跨域解决方案有3 种： 3.1，Jsonp（json的变种 ） 3.2 ，nginx反向代理(部署) 3.3， CORS 规范化的跨域请求解决方案，安全可靠 。 优势： - 在服务端进行控制是否允许跨域，可自定义规则 - 支持各种请求方式 缺点： - 会产生额外的请求 , 要做询问 我们这里会采用cors 的跨域方案。 注意 spring 版本 修改 4.2.5 <spring.version>4.2.5.RELEASE</spring.version> 来源：

文章目录 前文 解决 总结 前文   接手同事项目很久，由于没认真看项目配置，在接到从http升到https的需求后，自己搞了很久，在2天后找到原因却哭笑不得，就是一个非常简单的原因，在这里记录下，当碰到这个问题的时候一定要从ALLOWED_HOSTS入手，而不是绕一大圈排查前端、https、跨域等等问题，当然如果你确认了非ALLOWED_HOSTS可以从这些入手。   一切前提当然首先得先配对https，也就是说你要有证书，证书如果是自研项目就去申请；如果是公司项目就让运维同事分配到对应的主机上，然后指定ssl到指定目录即可。 解决   原项目是Django+Vue的http方式，在确认了nginx配置无误(即ssl证书正常配置以及80端口强制转443端口，且能telnet通的情况下)，浏览器报了两个错误： Mixed Content和OPTIONS ERR_CONNECTION_CLOSED 。   解决这两个错误就是相对应的改2行代码即可，分别对应的前端和后端，针对前端： 原先是直接在一台机子上访问ip和端口，所以prod.env.js是： BASE_API: '"http://127.0.0.1:8000"',   因为这个原因在转为https后浏览器即报Mixed Content，即浏览器请求前端是https，但前端请求后端接口却是http

为什么要前后端分离？ 作者：偏头痛杨 来源：https://blog.csdn.net/piantoutongyang 一、前戏 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的 必经之路 。 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。 在互联网架构中， 名词解释： Web服务器 ：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器 ：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。 一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。 二、术业有专攻（开发人员分离） 以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端，又搞后端。 随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。

既要低头赶路，又要抬头望天，科技是为人服务的，任何技术背后都有更深层次的考量，在本系列的第一篇文章中我们聊了微服务的本质，它是一种可以加速分工、促进合作的新协作机制。知其然，知其所以然，在第二篇文章中我们剖析了微服务为什么可以加速分工、促进合作，今天我们再接着来聊聊怎样开启微服务架构之旅。 微服务到底改变了什么，你知道吗？ 微服务，为什么可以加速分工、促进合作？ 1. 从前后端分离开启微服务改造 现在我们对微服务有了更深入的了解，也准备在构建新系统时采用这套新架构了，但它还是有些复杂度的，包括服务注册中心、统一配置中心、微服务网关、接入层网关、服务治理中心、调用链路追踪、分布式事务和分布式调度等众多组件。一口吃成胖子仅仅是一个美好的愿望，从单体式架构直接升级至全微服务架构，需要掌握这套全新的技术栈，对于缺乏前期铺垫的团队来说，学习曲线还是比较陡的，真正遇到的挑战往往超出想象的。 心理学对此有专门的研究，我们探索陌生世界的动力源于兴趣，而兴趣就是好奇心和正向反馈。如果我们刚开始就把目标设定的太高太远，在坚持努力了一段时间之后，还无法达成目标的话，那我们就接收不到正向反馈。久而久之，好奇心就会消磨殆尽，兴趣也就随之消失了。最靠谱的方式就是段带式进阶，将一个非常宏大的目标拆解成多个阶段性目标。在当前能力水平下，最近的阶段性目标只需要我们稍作努力跳跳脚就可以完成的

一、起源 （故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Designer, ... Skills: Linux, MySQL, JAVA, JavaScript, HTML, CSS, ... Tools: phpmyadmin, photoshop, powerpoint, ... 我们用 express 应用生成器来模拟一下传统开发（因为本人早已忘记java是怎么写的了，这里只是为了方便演示） $ npm install express-generator -g # 安装 express-generator $ express progressive # 初始化项目 $ cd progressive # 进入目录 $ npm install # 安装依赖 $ npm start # 启动项目 然后我们愉快的打开了 localhost:3000 看到了我们的页面: 接着，我看是研究代码： 发现我的模板引擎用的是 jade 是通过 nodejs 服务端进行动态渲染： // app.js app.set('view engine', 'jade'); 然后当我访问 localhost:3000 的时候，开始了界面渲染：

一、大前端 　　简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。 　　由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样，代码无法复用，非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢？大前端应运而生，其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。 　　目前的主流跨平台方案：Cordova/phoneGap、React Native、Weex、微信小程序、PWA和Flutter等，根据其原理性，可以分为四大类。 H5+原生（Cordova、Ionic、微信小程序） JavaScript开发+原生渲染 （React Native、Weex、快应用） 自绘UI+原生(Flutter)

关注「 IT老兵哥 」，赋能程序人生！既要低头赶路，又要抬头望天，科技是为人服务的，任何技术背后都有更深层次的考量，在本系列的第一篇文章中我们聊了微服务的本质，它是一种可以加速分工、促进合作的新协作机制。知其然，知其所以然，在第二篇文章中我们剖析了微服务为什么可以加速分工、促进合作，今天我们再接着来聊聊怎样开启微服务架构之旅。 微服务到底改变了什么，你知道吗？ 微服务，为什么可以加速分工、促进合作？ 1. 从前后端分离开启微服务改造 现在我们对微服务有了更深入的了解，也准备在构建新系统时采用这套新架构了，但它还是有些复杂度的，包括服务注册中心、统一配置中心、微服务网关、接入层网关、服务治理中心、调用链路追踪、分布式事务和分布式调度等众多组件。一口吃成胖子仅仅是一个美好的愿望，从单体式架构直接升级至全微服务架构，需要掌握这套全新的技术栈，对于缺乏前期铺垫的团队来说，学习曲线还是比较陡的，真正遇到的挑战往往超出想象的。 心理学对此有专门的研究，我们探索陌生世界的动力源于兴趣，而兴趣就是好奇心和正向反馈。如果我们刚开始就把目标设定的太高太远，在坚持努力了一段时间之后，还无法达成目标的话，那我们就接收不到正向反馈。久而久之，好奇心就会消磨殆尽，兴趣也就随之消失了。最靠谱的方式就是段带式进阶，将一个非常宏大的目标拆解成多个阶段性目标。在当前能力水平下

一、背景 书接上文， 浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发任务。联调的时候，按照之前定义的开发规范进行数据联调便可以了。前后端的职能更加清晰： 后端 前端 提供数据 接收数据，返回数据 处理业务逻辑 处理渲染逻辑 Server-side MVC架构 Client-side MV* 架构 代码跑在服务器上 代码跑在浏览器上 这里分离干净了，分工也很明确了，看似一切都那么美好，but...我们也很容易发现问题的所在： Client-side Model 是 Server-side Model 的加工 Client-side View 跟 Server-side是 不同层次的东西 Client-side的Controller 跟 Sever-side的Controller 各搞各的 Client-side的Route 但是 Server-side 可能没有 也就是说服务端和客户端各层职责重叠，大家各搞各的，很难统一具体要做的事情。并且可能会伴随着一些性能上的问题。最具体的表现就是我们常用的SPA应用： 渲染，取值都在客户端进行，有性能的问题 需要等待资源到齐才能进行，会有短暂白屏与闪动 在移动设备低速网路的体验奇差无比 渲染都在客户端，模版无法重用，SEO实现 麻烦 紧接着

前面部署了后端，现在开始部署前端。 首先依然是打包vue文件，npm run build 然后在vue的项目目录下多出了一个 dist文件夹。 然后依旧是在linux中创建新的一个文件夹 这里的要说的就是这个nginx，由于我还没学nginx，所以暂时只知道nginx的作用大概就是可以做到反向代理，总之这个nginx文件夹中只有一个 default.conf配置文件，这个配置文件中的内容为 server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}

内容回顾 - 过滤器 - 局部的过滤器 // 只能在当前组件内部使用 filters : function ( val , a , b ) { // 执行过滤处理逻辑,(添油加醋的内容) return xxx ; } - 全局的过滤器 // 声明+创建 在任何组件中都能使用 Vue . filter ( "myTime" , function ( ) { // 添油加醋的处理 return xxxx ; } ) - 生命周期-钩子函数 beforeCreate这个方法不常用 create 组件创建完成, 可以发起ajax(XMLHTTPRequest 简称 XHR axios fetch $.ajax())请求 实现数据驱动视图思想 beforeMount 挂载 mounted DOM挂载完成 beforeUpdate 获取原始的DOM updated 后去更新之后的DOM beforeDestroy 组件销毁之前 destroyed 组件销毁之后 actived 激活当前组件 Vue提供的内置组件 <keep-alive></keep-alive> deactivated 停用当前组件 vue-router 核心插件 主要作用: 实现单页面应用,为了用户体验,后端资源过多,可能会出现白屏的现象 现在都用前后端分离,甚至现在有些后端里面的前后台管理都分离了 模板引擎: node