1、服务端:
1.1、项目目录:
1.2、pom文件:
xml version="1.0" encoding="UTF-8"?>4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.5 com.xdy.springboot4vue springboot4vue 0.0.1-SNAPSHOT springboot4vue Demo project for Spring Boot 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test net.minidev json-smart 2.3.1 compile com.alibaba fastjson 1.2.40 org.springframework.boot spring-boot-maven-plugin
1.3、application.properties
server.port=3000
1.4、配置文件:WebConfig
指定请求地址:
package com.xdy.springboot4vue.config;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class WebConfig {@Beanpublic WebMvcConfigurer corsConfigurer(){return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry){// registry.addMapping("/**").allowedOrigins("http://localhost:80");// registry.addMapping("/**").allowedOrigins("http://localhost");registry.addMapping("/**").allowedOrigins("http://localhost:3000");}};}}
1.5、控制器
package com.xdy.springboot4vue.controller;import com.xdy.springboot4vue.entity.Car;import net.minidev.json.JSONObject;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;import java.util.Date;import java.util.List;@RestController//@CrossOriginpublic class HelloWorldController {@GetMapping("/hello")public String SayHello(){return "HelloWorld";}@GetMapping("/cars")public ListgetCars(){List lst=new ArrayList ();Car car=new Car(1,"奔驰", new Date());lst.add(car);car=new Car(2,"宝马", new Date());lst.add(car);return lst;}@PostMapping("/cars/post")public Car postCar(Integer id, String name){Car c=new Car(id,name,new Date());return c;}// @GetMapping("/getscript")// public String getScript(){// return "show()";// }@GetMapping("/getscript")public String getScript(String callback){JSONObject result = new JSONObject();result.put("msg","ok");result.put("mehtod","request");result.put("age",18);String resultStr=result.toJSONString();// String methodName= callback+"()";String methodName= callback+"("+resultStr+")";System.out.println(methodName);// return methodName+"()";return methodName;}}
1.6、业务类
package com.xdy.springboot4vue.entity;import java.util.Date;public class Car {private int id;private String name;private Date ctime;public Car(int id, String name, Date ctime) {this.id = id;this.name = name;this.ctime = ctime;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Date getCtime() {return ctime;}public void setCtime(Date ctime) {this.ctime = ctime;} }
2、客户端
// function show(){
// console.log('ok')
// }
// function showInfo123(){
// console.log('Info is ok')
// }
function showInfo123(data){
console.log(data)
}
3、效果图
http://localhost/06.%E5%AE%A2%E6%88%B7%E7%AB%AFJSONP%E9%A1%B5%E9%9D%A2.html