实现简单数据交接
前端部分(vue)
1.控制台输入 vue ui,,,创建项目
2.idea打开vue项目
3.idea Terminal输入 nmp run serve 启动该工程
前后端分离图解:
前端:
//template下只能有一个根节点,即只能有一个div
//template下只能有一个根节点,即只能有一个div//创建表格
图书编号 图书名字 图书数量 //遍历book数组(增强for循环) {{item.bookID}} {{item.bookName}} {{item.bookCounts}}
将book.vue配置到路由当中
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Book from '../views/Book.vue' //引入book
Vue.use(VueRouter)
//配置映射
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
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( '../views/about.vue')
},
{
path: '/book',
component: Book
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.base_URL,
routes
})
export default router
此时npm run serve访问前端页面,发现数据已经加载进去
后端: 连接数据库 编写配置文件application.ymal
spring:
datasource:
username: root
password: 123456
url: jdbc:mysql://localhost:3306/mybatis?useSSL=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
type-aliases-package: com.zhao.pojo
mapper-locations: classpath:mybatis/mapper/BooksMapper.xml
server:
port: 8181//后端端口为8181
可在测试类中测试是否链接数据库成功
package com.zhao;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import javax.sql.DataSource;
import java.sql.SQLException;
@SpringBootTest
class ZhaoApplicationTests {
@Autowired
DataSource dataSource;
@Test
void contextLoads() throws SQLException {
System.out.println(dataSource.getClass());
System.out.println(dataSource.getConnection());
}
}
创建实体类pojo
package com.zhao.pojo;
public class Books {
private int bookID;
private String bookName;
private int bookCounts;
public Books() {
}
public Books(int bookID, String bookName, int bookCounts) {
this.bookID = bookID;
this.bookName = bookName;
this.bookCounts = bookCounts;
}
public int getBookID() {
return bookID;
}
public void setBookID(int bookID) {
this.bookID = bookID;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}
public int getBookCounts() {
return bookCounts;
}
public void setBookCounts(int bookCounts) {
this.bookCounts = bookCounts;
}
}
接下来写mapper层(对数据库进行持久化操作)
在mapper接口中写方法用于对数据库进行操作
package com.zhao.Mapper;
import com.zhao.pojo.Books;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface BooksMapper {
List querryAllBooks();
}
接下来写mapper.xml
写在
控制层:select * from Books ;
package com.zhao.Controller;
import com.zhao.Mapper.BooksMapper;
import com.zhao.pojo.Books;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@CrossOrigin
@RestController//返回数据而不是页面
@ResponseBody
public class BooksController {
@Autowired
private BooksMapper booksMapper;
@GetMapping("/books")
public List querryAllBooks(){
List booksList=booksMapper.querryAllBooks();
for (Books books : booksList) {
System.out.println(books);
}
return booksMapper.querryAllBooks();
}
}
访问localhost:8181 看数据是否显示
前后端交互:
前端:
图书编号 图书名字 图书数量 {{item.bookID}} {{item.bookName}} {{item.bookCounts}}
此时发现无法获得数据(跨域问题)
需在后端配置
后端:创建Config文件:
package com.zhao.Config;
//解决跨域问题
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Bean
public WebMvcConfigurer corsConfigurer(){
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOrigins("*");
}
};
}
}



