前后端分离技术+跨域问题+Idea集成svn

绝地灬酷狼 2023-06-19 15:23 56阅读 0赞

## 前后端分离技术+跨域问题+Idea集成svn ##

## 1.前后端分离技术 ##

**1.1：什么是前后端分离？**

前后端分离是一种架构模式,前后端项目分开开发,测试,部署.  
并行开发:前后端并行开发,测试,再联调.  
一个人做 … 后端先行:后端先开发好接口,前端使用真是数据,省去写mock过程。

**1.2：前后端分离的优势：**  
（1）为优质产品打造精益团队  
（2）提升开发效率  
（3）完美应对复杂多变的前端需求  
（4）增强代码可维护性

## 2.Restfull风格 ##

**2.1什么是Restfull风格：**

Restfull是http协议的扩展,它以资源为核心,通过url定位资源,以http协议不同请求方式表示操作(PUT,POST,GET,DELETE,PATCH,HEAD,OPTION)

**2.2操作：**  
添加:

> PUT /employee @RequestBody \{ \}

删除:

> DELETE /employee/id RequestMapping(value=”\{id\}”) @PathVirable(“id”)  
> Long id

修改:

> POST /employee/id RequestMapping(value=”\{id\}”) @PathVirable(“id”) Long  
> id @RequestBody \{ \}

查询一个:

> GET /employee/id RequestMapping(value=”\{id\}”) @PathVirable(“id”)

批量查询

> PATCH/employee

高级查询

> GET /employee

## 3.跨域问题： ##

**3.1什么是跨域：**

跨域是值跨域名.域名:记忆网络电脑ip很难记,就给它取了一个名字来记忆,这个名字就要域名,域名最终要被转换为ip.

例如：www.csdn.net 185.21.7.162  
或者是 www.baidu.com 155.65.7.254  
跨域是指跨域名的访问，以下情况都属于跨域：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70]  
一个系统访问另一个系统才会存在跨域,同系统访问不存在跨.  
跨域原因说明 示例  
域名不同 www.jd.com 与 www.taobao.com  
域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081  
二级域名不同 item.jd.com 与 miaosha.jd.com  
www.baidu.wenku.com www.baid.tieba.com  
如果域名和端口都相同，但是请求路径不同，不属于跨域，如：  
www.jd.com/item  
www.jd.com/goods  
只要域名（ip）和端口号有一样不同，那么都是跨域  
http://localhost:8080 前端系统 发送Ajax取后端系统获取数据  
http://localhost:80 后端系统

**3.2跨域不一定会有跨域问题：**

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。  
因此：跨域问题 是针对ajax的一种限制。  
但是这却给我们的开发带来了不变，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

**3.3跨域解决方案：**

目前常用的解决方案有三种：

（1）- Jsonp-- json变种  
最早的解决方案，利用动态去填充script标签可以跨域的原理实现。

限制：

*  需要服务的支持
 *  只能发起GET请求

（2）- nginx反向代理(部署)

思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式

缺点：需要在nginx进行额外配置，语义不清晰 –  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 1]  
（3）- CORS(都可以使用-采纳)

规范化的跨域请求解决方案，安全可靠。  
优势：

*  在服务端进行控制是否允许跨域，可自定义规则
 *  支持各种请求方式  
    缺点：
 *  会产生额外的请求,要做询问

我们这里会采用cors的跨域方案。注意spring版本 修改 4.2.5  
注解支持 spring controller

<spring.version>4.2.5.RELEASE</spring.version>

（4）CORS跨域解决方案分析

这个分析比较复杂，术语一太冗长了，不易看懂，我这里直接简单说明，跨域解决方案实现，事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。在控制层写上注解：@@CrossOrigin 即可

## 4.Idea集成svn ##

**4.1：下载svn客户端**

首先我们需要下载一个 svn的客户端  
我们用的是TortoiseSVN(小乌龟)，下载后安装 ，然后记住安装路径  
官网下载地址：[https://tortoisesvn.net/downloads.html][https_tortoisesvn.net_downloads.html]  
![在这里插入图片描述][20191207092930997.png]

**4.2：安装svn客户端**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 3]  
**4.3：配置idea的svn插件**

安装好svn客户端后，想启用idea的SVN插件还需要在idea配置一下，file - setting 按钮打开设置界面 或者（Ctrl + Alt + S）快捷键 ，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 4]  
**4.4：Idea使用svn插件**  
![在这里插入图片描述][20191207093111365.png]  
**4.5：从svn库中检出项目**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 5]  
输入公司的svn的地址check 出你想要的项目，就OK了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 6]  
**4.6：上传代码**

选中项目中需要上传的文件和文件夹，注意，不要提交整个项目，首次提交一定要提交自己写的代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 7]  
如果无法提交，建议使用TortoiseSVN客户端进行提交

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 8]  
**4.7：更新代码**

选中要跟新的目录和文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 9]  
或者使用TortoiseSVN客户端进行更新  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 10]  
总结：在公司的时候，很多时候做项目都需要使用svn，刚开始使用的时候会不熟悉，多用几次之后就好了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207091744932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191207092136519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[https_tortoisesvn.net_downloads.html]: https://tortoisesvn.net/downloads.html
[20191207092930997.png]: https://img-blog.csdnimg.cn/20191207092930997.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191207092958481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191207093016107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191207093049754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[20191207093111365.png]: https://img-blog.csdnimg.cn/20191207093111365.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191207093135142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191207093155371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191207093440347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191207093528804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191207093600858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191207093610515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o1ODMyNDg3NTY=,size_16,color_FFFFFF,t_70