Vue前后端基础项目

一、新建项目

vue ui # cmd中使用

在这里插入图片描述
创建新的项目

选择手动配置
在这里插入图片描述
勾选Router、Vuex，取消勾选Linter/Formatter

选择2.x，勾选Use history mode for router

选择vue.js 3.x版本使用axios存在问题，因此使用2.x版本

二、使用idea编写前端

idea需安装vue.js插件
在这里插入图片描述

npm run serve # 在idea终端中输入

在这里插入图片描述

新建页面Table.vue，且虚拟数据

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      <tr v-for="item in peoples">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Table",
  data(){
    return {
      msg: 'Hello Vue',
      peoples:[
        {
          id:1,
          name:'小明',
          age:22
        },
        {
          id:2,
          name:'小红',
          age: 23
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>

添加映射
在这里插入图片描述

同时在App.vue中添加一个链接
在这里插入图片描述

页面效果
在这里插入图片描述

三、新建数据库

在这里插入图片描述

四、使用idea编写后端

在这里插入图片描述

添加实体类

添加repository

编写application.yml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/vue3
    username: root
    password: 1234
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

编写测试类
在这里插入图片描述
可以从数据库中取出数据
编写controller

在浏览器中输入
http://localhost:8181/people/findAll

五、前、后端结合

使用Axios，添加 vue add axios
在这里插入图片描述
如果axios无法正常使用，可能原因是axios与vue版本问题，版本参考。

在Table views里使用axios接收后端的值

created() {
    axios.get('http://localhost:8181/people/findAll').then(function (resq){
      console.log(resq);
    }
    )
  }

在这里插入图片描述
会出现跨域问题

解决办法：在后端添加config配置

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

在这里插入图片描述
重启后端后，前端已经可以接收到数据

再完善axios

  created() {
    const _this = this
    axios.get('http://localhost:8181/people/findAll').then(function (resq){
      console.log(resq);
      _this.peoples = resq.data
    }
    )
  }