测试项目(一):前后端新建项目 后端连接数据库
好家伙,本项目是用来练习前后端数据连接
这次我们不用vscode了,我们用idea
IDEA要写vue,装个插件先:
1.新建一个vue3项目
vue新建项目,这个不用多说了吧
第六十八篇:vue-cli新建项目 - 养肥胖虎 - 博客园 (cnblogs.com)
发现了vue3路由的新写法:
{
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')
}
下面是旧写法:
import Home from '../views/Home.vue'
{
path: '/',
name: 'Home',
component: Home
},
发生了一点小插曲,idea的终端用不了,解决方法如下:
(6条消息) IDEA打开终端报错Cannot open Local Terminal_EmmaChuan的博客-CSDN博客_idea的terminal打不开
(小问题)
(新建好了)
2.我们去开一个新的springboot 项目
然后去选一些配置项
SQL的服务也选上
3.前端制作视图
我们先用一些假数据来弄一些表格出来
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
{{msg}}
</div>
</template>
<script>
export default {
name:"Book",
data(){
return {
msg:'Hello Vue',
books:[
{
id:1,
name:'三体1',
author:'刘慈欣'
},
{
id:2,
name:'黑暗丛林法则',
author:'刘慈欣'
},
{
id:3,
name:'死神永生',
author:'刘慈欣'
},
]
}
}
}
</script>
来看看
大概这样
随后,我们处理后端
4.后端处理数据
来到我们的后端
创建好的spring项目目录
4.1.其中的数据库配置文件已替换
其内容如下:
spring:
datasource:
url: spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test //按你数据库的url来
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8181
注意:
端口8080已经被前端那边用了这边用8181
4.2.新建Book类:
Book.java
package com.southwind.springboottest.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
@Data
public class Book {
@Id
private Integer id;
private String name;
private String author;
}
4.3.随后我们去添加BookHandler类:
package com.southwind.springboottest.controller;
import com.southwind.springboottest.entity.Book;
import com.southwind.springboottest.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/book")
public class BookHandler {
@Autowired
private BookRepository bookRepository;
@GetMapping("/findAll/{page}/{size}")
public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
PageRequest request = PageRequest.of(page,size);
return bookRepository.findAll(request);
}
@PostMapping("/save")
public String save(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
@GetMapping("/findById/{id}")
public Book findById(@PathVariable("id") Integer id){
return bookRepository.findById(id).get();
}
@PutMapping("/update")
public String update(@RequestBody Book book){
Book result = bookRepository.save(book);
if(result != null){
return "success";
}else{
return "error";
}
}
@DeleteMapping("/deleteById/{id}")
public void deleteById(@PathVariable("id") Integer id){
bookRepository.deleteById(id);
}
}
4.4.然后添加接口类:BookRepository
package com.southwind.springboottest.repository;
import com.southwind.springboottest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
public interface BookRepository extends JpaRepository<Book,Integer> {
}
然后打开 localhost:8181/book/findAll
不出意外应该是在可以在网页中看到数据的
![](https://img2022.cnblogs.com/blog/2501855/202210/2501855-20221012225020118-110431441.png)
(大概是这样的页面)
然而不出意外的话,总是要出意外的