目录
- 一、新建项目
- 二、使用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