创建vue工程node 版本太低安装https://nodejs.org/zh-cn/download一直点击下一步在 app.vue配置 导航 p1 路径template{{students}}/templatescriptimportaxiosfromaxiosexportdefault{name:P1View,data(){return{students:[]}},created(){const_thisthis// vue 的 this 对象 赋值给 _this 避免被回调函数的 this 覆盖axios.get(http://localhost:8080/p1).then(function(resp){// console.log(resp)_this.studentsresp.data})}}/scriptstyle scoped/style数据库后端跨域配置类packagecom.example.student1.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * Author: yanyu666_508200729qq.com * Date 2026/3/17 23:51 * description: */ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**)// 只允许 /** 任意 开头的路径.allowedOriginPatterns(*)// 只允许前端地址.allowedMethods(GET,POST,PUT,DELETE,OPTIONS).allowedHeaders(*).allowCredentials(true).maxAge(3600);}}application.propertiesspring.application.namestudent1 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/school spring.datasource.usernameroot spring.datasource.passwordyanyu666packagecom.example.student1.pojo;importjava.util.Objects;/** * Author: yanyu666_508200729qq.com * Date 2026/3/17 23:29 * description: */publicclassStudent1{privateStringname;privateStringstuid;privateStringmajor;OverridepublicStringtoString(){returnStudent1{namename\, stuidstuid\, majormajor\};}Overridepublicbooleanequals(Objecto){if(thiso)returntrue;if(onull||getClass()!o.getClass())returnfalse;Student1student1(Student1)o;returnObjects.equals(name,student1.name)Objects.equals(stuid,student1.stuid)Objects.equals(major,student1.major);}OverridepublicinthashCode(){returnObjects.hash(name,stuid,major);}publicStringgetName(){returnname;}publicvoidsetName(Stringname){this.namename;}publicStringgetStuid(){returnstuid;}publicvoidsetStuid(Stringstuid){this.stuidstuid;}publicStringgetMajor(){returnmajor;}publicvoidsetMajor(Stringmajor){this.majormajor;}publicStudent1(Stringname,Stringstuid,Stringmajor){this.namename;this.stuidstuid;this.majormajor;}}数据库持久化层控制器测试结果
第一个前后端分离项目
创建vue工程node 版本太低安装https://nodejs.org/zh-cn/download一直点击下一步在 app.vue配置 导航 p1 路径template{{students}}/templatescriptimportaxiosfromaxiosexportdefault{name:P1View,data(){return{students:[]}},created(){const_thisthis// vue 的 this 对象 赋值给 _this 避免被回调函数的 this 覆盖axios.get(http://localhost:8080/p1).then(function(resp){// console.log(resp)_this.studentsresp.data})}}/scriptstyle scoped/style数据库后端跨域配置类packagecom.example.student1.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * Author: yanyu666_508200729qq.com * Date 2026/3/17 23:51 * description: */ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**)// 只允许 /** 任意 开头的路径.allowedOriginPatterns(*)// 只允许前端地址.allowedMethods(GET,POST,PUT,DELETE,OPTIONS).allowedHeaders(*).allowCredentials(true).maxAge(3600);}}application.propertiesspring.application.namestudent1 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/school spring.datasource.usernameroot spring.datasource.passwordyanyu666packagecom.example.student1.pojo;importjava.util.Objects;/** * Author: yanyu666_508200729qq.com * Date 2026/3/17 23:29 * description: */publicclassStudent1{privateStringname;privateStringstuid;privateStringmajor;OverridepublicStringtoString(){returnStudent1{namename\, stuidstuid\, majormajor\};}Overridepublicbooleanequals(Objecto){if(thiso)returntrue;if(onull||getClass()!o.getClass())returnfalse;Student1student1(Student1)o;returnObjects.equals(name,student1.name)Objects.equals(stuid,student1.stuid)Objects.equals(major,student1.major);}OverridepublicinthashCode(){returnObjects.hash(name,stuid,major);}publicStringgetName(){returnname;}publicvoidsetName(Stringname){this.namename;}publicStringgetStuid(){returnstuid;}publicvoidsetStuid(Stringstuid){this.stuidstuid;}publicStringgetMajor(){returnmajor;}publicvoidsetMajor(Stringmajor){this.majormajor;}publicStudent1(Stringname,Stringstuid,Stringmajor){this.namename;this.stuidstuid;this.majormajor;}}数据库持久化层控制器测试结果
