先建立一个前端vue项目:
然后在views下新建一个User.vue:
先手动填入一些假的数据
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>用户名</td>
<td>密码</td>
<td>权限</td>
</tr>
<tr v-for="item in user">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.pwd}}</td>
<td>{{item.perms}}</td>
</tr>
</table>
{{msg}}
</div>
</template>
<script>
export default {
name: "User",
data() {
return {
msg: 'hello vue',
user: [
{
id: 1,
name: '清欢',
pwd: 123,
perms: 1
},
{
id: 2,
name: '本体',
pwd: 456,
perms: 2
},
{
id: 3,
name: '人间',
pwd: 789,
perms: 3
}
]
}
}
}
</script>
<style scoped>
</style>
然后在路由中(index.js)进行配置:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from "../views/User";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
/* {
path: '/about',
name: 'About',
component: About
}, 下面是一种新的写法 新的写法不用在上面写 import
*/
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/user',
component: User
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
创建一个springboot项目:
配置连接:
application.yml;
spring:
datasource:
url: jdbc:mysql://localhost:3306/ssm
username: benti
password: 80238023
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
#打印SQL语句 并且 格式化 让他换行 不会全部一行显示
server:
port: 8181
创建实体类:
com.qinghuan.springboottest.entity.User:
package com.qinghuan.springboottest.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity(name = "user")
@Data
//实现和表的绑定 name默认是把类名首字母小写 对应表名
public class User {
@Id
private Integer id;
private String name;
private String pwd;
private String perms;
}
创建一个接口:
.继承JpaRepository<实体类类型,主键类型>
com.qinghuan.springboottest.repository.UserRepository:
package com.qinghuan.springboottest.repository;
import com.qinghuan.springboottest.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Integer> {
}
测试连接是否成功:
com.qinghuan.springboottest.repository.UserRepositoryTest:
@SpringBootTest
class UserRepositoryTest {
@Autowired
private UserRepository userRepository;
@Test
void findAll() {
System.out.println(userRepository.findAll());
}
}
成功后 就可以写控制类:
com.qinghuan.springboottest.controller.UserController;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping("/findAll")
public List<User> findAll() {
return userRepository.findAll();
}
}
在vue中请求ajax:
安装axios组件:
vue add axios
在use.vue中使用初始化方法created():
created()
//这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。
//一般可以在created函数中调用ajax获取页面初始化所需的数据。
<template>
<div>
<table>
..................
</table>
{{msg}}
</div>
</template>
<script>
export default {
name: "User",
data() {
return {
..............
}
},
created() {
//这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数。
//一般可以在created函数中调用ajax获取页面初始化所需的数据。
axios.get('http://localhost:8181/user/findAll').then(function (resq) {
console.log(resq);
})
}
</script>
<style scoped>
</style>
此时 console中报错 CORS 跨域问题
在springboot中添加配置类
com.qinghuan.springboottest.config.CrosConfig:
实现接口WebMvcConfigurer
重写addCorsMappings方法
//解决跨域问题 配置类
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
然后将数据赋予过去:
<template>
<div>
<table>
..................
</table>
{{msg}}
</div>
</template>
<script>
export default {
name: "User",
data() {
return {
..............
}
},
created() {
// const _this = this
//方法一: 使用定义一个_this 获取当前this(当前vue对象) 然后 下面使用
// axios.get('http://localhost:8181/user/findAll').then(function (resq) {
// console.log(resq);
// _this.user = resq.data
// //resq.data :就是我们的数据
// })
//方法二 使用箭头函数
axios.get('http://localhost:8181/user/findAll').then((resq) => {
console.log(resq);
this.user = resq.data
})
})
}
</script>
<style scoped>
</style>