手把手带你快速搭建一个SpringBoot+Vue前后端分离项目 |
您所在的位置:网站首页 › 一个简单的vue项目前端 › 手把手带你快速搭建一个SpringBoot+Vue前后端分离项目 |
开发环境
IDEA,MySQL,Navicat 1.创建数据库并添加一些数据1.cmd 创建项目,注意这里需要Vue3或者以上,不是的同学可以用其它方式创建前端项目,或者更新到Vue3以上也行。 进入到如下页面:
8.进入App.vue添加如下代码 Person
10.运行程序(需要有npm),终端输入如下代码: npm run serve
2.创建实体 代码如下: package com.sadhu.entity; import lombok.Data; import javax.persistence.Entity; import javax.persistence.Id; /** * @author wang */ //与数据库表绑定 @Entity //自动生成setter 和getter @Data public class Person { @Id private Long id; private String name; private String sex; private int age; }
3.创建repository 文件结构: 4.创建controller 文件结构: 5.创建yml文件 先删掉Application.properties 需要再pom.xml中添加依赖 mysql mysql-connector-java runtime运行一下: 现在后端的也写好了 4.前后端连再一起1.先在前端中添加如下代码 代码: 这是Person {{persons[0].id}} {{persons[0].name}} {{persons[0].sex}} {{persons[0].age}} {{item.id}} {{item.name}} {{item.sex}} {{item.age}} export default { name: "Person", data() { return { persons: [ { id: 1, name: 'wang', sex: '男', age: 18 } ] } }, created() { const _this = this; axios.get('http://localhost:8182/person/findAll').then(function (resp){ _this.persons=resp.data; console.log(resp.data) }) } }
他会自动安装 2.然后去配置后端 新建如下文件并添加代码: 代码如下: package com.sadhu.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry){ WebMvcConfigurer.super.addCorsMappings(registry); registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "HEAD" ,"POST","PUT" , "DELETE") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }
这是我学习是做的笔记,按照步骤来能跑通,中途会遇到一些问题,通常百度就能解决。冲冲冲!!! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |