Separate front and rear ends -crud & svn

1. Cross-Domain

1.1 What is the cross-domain

Different sources and service requester side, i.e. cross-domain, comprising:

1. different protocols

2. The domain name different

3. Port different

1.2 cross-domain cross-domain problem does not necessarily exist

Cross-domain problems under what circumstances :

Cross-domain issues : Browser for when ajax request, if different services, there is a cross-domain

Browser mechanisms : homologous strategy to intercept cross-domain access

1.3 solution to cross-domain

(1) jsonp way --json variant

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

Disadvantages :

Support needed

Can only be initiated GET request

(2) nginx reverse proxy

(3) Scheme 3 - server allows these requests cors

What is cors?

Homologous (same protocol, the same name, the same port)

cors: a w3c standard Cross-Origin Resource Sharing "(Cross-origin resource sharing)

These allow the server how / get / post / delete / put / options / patch

cors solve cross-domain solutions :

(1) Write a configuration class ( for spring4.2 following versions )

cn.itsource.crud.config Package; 
 
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 () { 
        // add CORS. 1 configuration information. 
        CorsConfiguration new new CorsConfiguration config = (); 
        //. 1) allows the domain, do not write *, otherwise the cookie will not be used 
        config.addAllowedOrigin ( "http://127.0.0.1:8080/"); 
config.addAllowedOrigin ( "HTTP: // localhost: 8080 /");
 
        // 2) whether to transmit the Cookie information 
        config.setAllowCredentials (to true); 
        //. 3) allows the request type 
        config.addAllowedMethod ( "the OPTIONS"); 
        config.addAllowedMethod ( "the HEAD"); 
        config.addAllowedMethod ( "the GET"); 
        config.addAllowedMethod ( "the PUT"); 
        config.addAllowedMethod ( "the POST"); 
        config.addAllowedMethod ( "the DELETE"); 
        config.addAllowedMethod ( "the PATCH"); 
        //. 4) allows the header information 
        config.addAllowedHeader ( "* "); 
        // add 2 to map the path we intercept all requests 
        UrlBasedCorsConfigurationSource configSource = new new 
                UrlBasedCorsConfigurationSource (); 
        configSource.registerCorsConfiguration("/**", config);
        // returns the new 3 CorsFilter. 
        Return new new CorsFilter (the configSource); 
    } 
}

(2) spring through annotation support

CrossOrigin Note: After version 4.2 support

An annotation solution ( can be added to a class or method above )

@CrossOrigin

2. The front end of crud major code

2.1 New

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();
            });
         });
      }
   });
}

New key js code

2.2 Modify

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();
            });
         });
      }
   });
}

Modify key js code

2.3 Delete

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(() => {

   });
}

Delete key js code

2.4 Queries

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;
   });
}

The key query list js code

3. svn

3.1 Installation svn

First we need to download a svn client

We use the TortoiseSVN ( Little Turtle ) , download and install, and then remember the installation path

Download the official website: https://tortoisesvn.net/downloads.html

3.2 installed svn client

Install svn when the client must be checked, otherwise the idea integrated on svn time will not find svn.exe and error.

If you forget to check the installation, then re-run the installation package, select the Modify , and then check the command line client tools item on the list.

3.3 Operation svn

1) Create a warehouse

2) Detection

Code

3) submit / update

4) conflict

What happens there will be a conflict ?

More than one person to modify the same file in , if you modify the version number of inconsistencies can occur

5) idea operation svn

import

check out