idea怎样将java和前端结合 idea写前端

目录

• 一、新建项目
• 二、使用idea编写前端
• 三、新建数据库
• 四、使用idea编写后端
• 五、前、后端结合

一、新建项目

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
    }
    )
  }

前端再次查看，已经将数据呈现出来

前端gitee：https://gitee.com/zhaoxuangit/vue_2022_03_24.git 后端gitee：https://gitee.com/zhaoxuangit/vue_back.git