前后端分离要注意的事项

后天代码：

package com.wgc.todo.controller;

import com.google.gson.Gson;
import com.wgc.todo.entity.Todo;
import com.wgc.todo.exception.DatabaseException;
import com.wgc.todo.exception.DateValidateException;
import com.wgc.todo.service.ToDoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletResponse;
import javax.websocket.server.PathParam;
import javax.ws.rs.POST;
import java.util.List;

@RestController
/*要明确跨域的设置*/
@CrossOrigin(origins = {"http://localhost:8081"},
        methods = {RequestMethod.GET, RequestMethod.DELETE, RequestMethod.PUT, RequestMethod.POST},
        allowedHeaders = {"*"},
        maxAge = 3600)
public class ToDoController {
    @Autowired
    private ToDoService service;


    @RequestMapping(value = "/all", method = RequestMethod.GET)
    public List<Todo> selectAll() {
        List<Todo> todos = null;
        try {
           todos = service.selectAll();
           todos = null;
        } catch (DatabaseException e) {
           return null;
        } catch (Exception e) {
            return null;
        }
        return todos;
    }

    /*Todo对象传过来的是一个字符串*/
    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public void insert(@RequestBody Todo todo) {
        try {
            service.insert(todo);
        } catch (DateValidateException e) {
            e.getMessage();
        } catch (Exception e) {
            e.getLocalizedMessage();
        }
    }

    /*@RequestBody接收的都是一个字符串，如果设置int，客户端会认为，类型不一致，
    * 所以找不到此方法*/
    @RequestMapping(value = "/del", method = RequestMethod.DELETE)
    public void delete(@RequestBody String  id) {
            Integer integer = Integer.valueOf(id);
        try {
            service.deleteByPrimaryKey(integer);
        } catch (DateValidateException e) {
            e.printStackTrace();
        } catch (Exception e) {

        }
    }

    @RequestMapping(value = "/update", method = RequestMethod.PUT)
    public void update(@RequestBody  Todo todo) {
        if (todo != null) {
            service.updateByPrimaryKey(todo);
        }
    }


    @RequestMapping(value = "/state", method = RequestMethod.PUT, produces = "application/json;")
    public void updateState(@RequestBody String to) {
        Gson gson = new Gson();
        /*json字符串转为对象*/
        Todo todo = gson.fromJson(to, Todo.class);
        if (todo.getState() == null) {
            return;
        }
        service.updateState(todo);
    }

    @RequestMapping(value = "/queryState/{state}", method = RequestMethod.GET, produces = "application/json;")
    public List<Todo> selectState(@PathVariable String state) {
        List<Todo> todos = service.selectState(state);
        return todos;
    }
}

 

客无端的：

    del(e) {
                let $this = this;
                let id = e.id;
                fetch("http://localhost:8080/del",{
                    method: 'delete',
                    body: JSON.stringify(id)    
                }).then(resp => resp.json())
                .then(data => {
                    $this.$message({
                        type: 'success',
                        message: '删除成功!'
                    }).then(resp => resp.json()).then(data => {window.localhost.reload()});
                    
                }).catch((error) => {
                    $this.$message({
                        type: 'info',
                        message: '删除失败'
                    });
                });

 

详情的github中的vue-todos

package com.wgc.todo.controller;

import com.google.gson.Gson;
import com.wgc.todo.entity.Todo;
import com.wgc.todo.exception.DatabaseException;
import com.wgc.todo.exception.DateValidateException;
import com.wgc.todo.service.ToDoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletResponse;
import javax.websocket.server.PathParam;
import javax.ws.rs.POST;
import java.util.List;

@RestController
/*要明确跨域的设置*/
@CrossOrigin(origins = {"http://localhost:8081"},
methods = {RequestMethod.GET, RequestMethod.DELETE, RequestMethod.PUT, RequestMethod.POST},
allowedHeaders = {"*"},
maxAge = 3600)
public class ToDoController {
    @Autowired
private ToDoService service;


@RequestMapping(value = "/all", method = RequestMethod.GET)
    public List<Todo> selectAll() {
        List<Todo> todos = null;
        try {
           todos = service.selectAll();
todos = null;
} catch (DatabaseException e) {
           return null;
} catch (Exception e) {
            return null;
}
        return todos;
}

    /*Todo对象传过来的是一个字符串*/
@RequestMapping(value = "/add", method = RequestMethod.POST)
    public void insert(@RequestBody Todo todo) {
        try {
            service.insert(todo);
} catch (DateValidateException e) {
            e.getMessage();
} catch (Exception e) {
            e.getLocalizedMessage();
}
    }

    /*@RequestBody接收的都是一个字符串，如果设置int，客户端会认为，类型不一致，
    * 所以找不到此方法*/
@RequestMapping(value = "/del", method = RequestMethod.DELETE)
    public void delete(@RequestBody String  id) {
            Integer integer = Integer.valueOf(id);
        try {
            service.deleteByPrimaryKey(integer);
} catch (DateValidateException e) {
            e.printStackTrace();
} catch (Exception e) {

        }
    }

    @RequestMapping(value = "/update", method = RequestMethod.PUT)
    public void update(@RequestBody  Todo todo) {
        if (todo != null) {
            service.updateByPrimaryKey(todo);
}
    }


    @RequestMapping(value = "/state", method = RequestMethod.PUT, produces = "application/json;")
    public void updateState(@RequestBody String to) {
        Gson gson = new Gson();
/*json字符串转为对象*/
Todo todo = gson.fromJson(to, Todo.class);
        if (todo.getState() == null) {
            return;
}
        service.updateState(todo);
}

    @RequestMapping(value = "/queryState/{state}", method = RequestMethod.GET, produces = "application/json;")
    public List<Todo> selectState(@PathVariable String state) {
        List<Todo> todos = service.selectState(state);
        return todos;
}
}