前后端分离-crud&svn

前后端分离-crud&svn

1. 跨域

1.1 什么是跨域

请求方与服务方的源不同，即跨域，包括：

1. 协议不同

2. 域名不同

3. 端口不同

1.2 跨域不一定存在跨域问题

什么情况下存在跨域问题:

<a href="www.jd.com">

跨域问题: 浏览器 针对ajax请求的时候,如果不同的服务,存在跨域

浏览器机制: 同源策略拦截跨域的访问

1.3 解决跨域的方法

(1) jsonp方式 --json变种

localhost/department/list -- > <scprit src="/localhost/department/list">

缺点:

需要服务支持

只能发起GET请求

(2) nginx 反向代理

(3)方案3 -- 服务器允许cors这些请求

什么是cors?

同源（相同协议，相同域名，相同端口）

cors: 一个w3c标准 跨域资源共享"(Cross-origin resource sharing)

服务器怎么允许这些 / get/post/delete/put/options /patch

cors解决跨域方案:

(1)写一个配置类(针对spring4.2以下版本)

package cn.itsource.crud.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //1) 允许的域,不要写*，否则cookie就无法使用了
        config.addAllowedOrigin("http://127.0.0.1:8080/");
config.addAllowedOrigin("http://localhost:8080/");

        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4）允许的头信息
        config.addAllowedHeader("*");
        //2.添加映射路径，我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new
                UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

　　或者

(2)spring通过注解支持

CrossOrigin 注意: 4.2版本以后支持

一个注解解决(可以加在类或者方法上面)

@CrossOrigin

　　

2. 前端crud主要代码

2.1 新增

addSubmit: function () {
   this.$refs.addForm.validate((valid) => {
      if (valid) {
         this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true;
            let para = Object.assign({}, this.addForm);
            this.$http.put("/department/save", para).then(res => {
               this.addLoading = false;
                             let {success, msg} = res.data;
                             if (success) {
                                 this.$message({
                                     message: msg,
                                     type: 'success'
                                 });
                             } else {
                                 this.$message({
                                     message: msg,
                                     type: 'error'
                                 });
                             }

               this.$refs['addForm'].resetFields();
               this.addFormVisible = false;
               this.getDepartments();
            });
         });
      }
   });
}

新增关键js代码

2.2 修改

editSubmit: function () {
   this.$refs.editForm.validate((valid) => {
      if (valid) {
         this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            let para = Object.assign({}, this.editForm);
            // editUser(para).then((res) => {
                         this.$http.post("/department/save", para).then(res => {
                             let {success, msg} = res.data;
                             if (success) {
                                 this.$message({
                                     message: msg,
                                     type: 'success'
                                 });
                             } else {
                                 this.$message({
                                     message: msg,
                                     type: 'error'
                                 });
                             }
               this.editLoading = false;
               this.$refs['editForm'].resetFields();
               this.editFormVisible = false;
               this.getDepartments();
            });
         });
      }
   });
}

修改关键js代码

2.3 删除

handleDel: function (index, row) {
   this.$confirm('确认删除该记录吗?', '提示', {
      type: 'warning'
   }).then(() => {
      this.listLoading = true;
                 this.$http.delete("/department/" + row.id).then(res => {
         this.listLoading = false;
         let {success, msg} = res.data;
                     if (success) {
                         this.$message({
                             message: msg,
                             type: 'success'
                         });
                     } else {
                         this.$message({
                             message: msg,
                             type: 'error'
                         });
                     }
         this.getDepartments();
      });
   }).catch(() => {

   });
}

删除关键js代码

2.4 查询

getDepartments() {
   let para = {
      page: this.page,
      name: this.filters.name
   };
   this.listLoading = true;
   this.$http.patch("/department/list").then(res => {
      this.total = res.data.length;
      this.departments = res.data;
      this.listLoading = false;
   });
}

查询列表关键js代码

3. svn

3.1 安装svn

首先我们需要下载一个 svn的客户端

我们用的是TortoiseSVN(小乌龟)，下载后安装 ，然后记住安装路径

官网下载地址：https://tortoisesvn.net/downloads.html

3.2 安装svn客户端

在安装svn客户端的时候一定要勾选，否则在idea上集成svn的时候会找不到 svn.exe 而报错。

如果安装时忘记勾选了的话，安装包重新运行，选择modify，然后勾选command line client tools项就行了。

3.3 操作svn

1)创建仓库

2)检出

代码

3)提交/更新

4)处理冲突

什么情况 会存在冲突?

多个人在去修改同一个文件的,如果修改的版本号不一致 就可以出现

5)idea操作svn

import

check out