当前位置: 首页>编程语言>正文

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


目录

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


一、新建项目

vue ui # cmd中使用

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合,第1张

创建新的项目

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_02,第2张

选择手动配置

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_03,第3张

勾选Router、Vuex,取消勾选Linter/Formatter

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_04,第4张

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

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_spring boot_05,第5张

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

二、使用idea编写前端

idea需安装vue.js插件

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_06,第6张

npm run serve # 在idea终端中输入

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_07,第7张

新建页面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>

添加映射

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_08,第8张

同时在App.vue中添加一个链接

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_ios_09,第9张

页面效果

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_10,第10张

三、新建数据库

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_ios_11,第11张

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue.js_12,第12张

四、使用idea编写后端

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue.js_13,第13张

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue.js_14,第14张

添加实体类

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_15,第15张

添加repository

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_spring boot_16,第16张

编写application.yml

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue.js_17,第17张

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

编写测试类

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_ios_18,第18张

可以从数据库中取出数据

编写controller

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_19,第19张

在浏览器中输入

http://localhost:8181/people/findAll

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_20,第20张

五、前、后端结合

使用Axios,添加 vue add axios

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_21,第21张

如果axios无法正常使用,可能原因是axios与vue版本问题,版本参考。

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_spring boot_22,第22张

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

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

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_spring boot_23,第23张

会出现跨域问题

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_24,第24张

解决办法:在后端添加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("*");
    }
}

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_25,第25张

重启后端后,前端已经可以接收到数据

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue.js_26,第26张

再完善axios

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

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_idea怎样将java和前端结合_27,第27张

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

idea怎样将java和前端结合 idea写前端,idea怎样将java和前端结合 idea写前端_vue_28,第28张

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



https://www.xamrdz.com/lan/5gx1923089.html

相关文章: