首页 > 数据库 >测试项目(一):前后端新建项目 后端连接数据库

测试项目(一):前后端新建项目 后端连接数据库

时间:2022-10-12 23:13:57浏览次数:80  
标签:测试项目 新建 数据库 public Book import com id name

好家伙,本项目是用来练习前后端数据连接

 

这次我们不用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 

不出意外应该是在可以在网页中看到数据的

 

 

 

 

(大概是这样的页面)

 

然而不出意外的话,总是要出意外的

标签:测试项目,新建,数据库,public,Book,import,com,id,name
From: https://www.cnblogs.com/FatTiger4399/p/16774264.html

相关文章

  • 海量数据库的查询优化及分页算法方案
     随着“金盾工程”建设的逐步深入和公安信息化的高速发展,公安计算机应用系统被广泛应用在各警种、各部门。与此同时,应用系统体系的核心、系统数据的存放地――数据库也随着......
  • 【Vegas改编】SQL2005设置维护计划进行数据库每日备份
    例:每天1次完全备份,周日凌晨4点。超过4周清空之前的备份。 1,启用维护计划任务。在“管理”->“维护计划”上右键弹出菜单,选“维护计划向导”。​​​​ 2、“下一步”,设置......
  • Flask学习笔记(十二)-Flask-Migrate实现数据库迁移详解
    一、定义flask-migrate是基于Alembic的一个封装,并集成到Flask中所有的迁移操作其实都是Alembic做的,能跟踪模型的变化,并将变化映射到数据库中。二、Flask-Migrate安装......
  • 如何保证缓存与数据库的双写一致性?
    一般来说,如果允许缓存可以稍微的跟数据库偶尔有不一致的情况,也就是说如果你的系统不是严格要求“缓存+数据库”必须保持一致性的话,最好不要做这个方案,即:读请求和写请求......
  • mysql数据库新增用户只有读写权限
    CREATEUSER'pcms'@'%'IDENTIFIEDBY'123456';  --创建用户pcms,密码为123456GRANTSELECT,INSERT,UPDATE,DELETEONdatabase1.*TO'pcms';--赋予pcms账号,datab......
  • 数据库优化学习笔记_主从分离(主改从查)
    查询分离适用场景:1.数据量大2.所有数据都需要写3.无法分离冷热数据4.即使是冷数据,依然要读写保持更新因此没法冷热分离查询分离从三个方式去建设:1)同步建立2)异步建......
  • 【C++从入门到熟练练习题】000 VS2015新建程序及输出Hello World
    一、前言大学很多计算机相关专业的基础课都会有C++,C++是比较经典的编程语言,编程语言一定不是看出来的,而是敲代码敲出来的。所以会给大家不定期分享一些C++练习题。在下一次......
  • 数据库
    创建数据库指令备份和恢复数据库备份表......
  • SqlServer 2008R2数据库日志损坏后数据库恢复
    详细的恢复方法:1、停止数据库服务。2、将需要恢复的数据库文件复制到另外的位置。3、启动数据库服务。4、确认要恢复的数据库文件已经成功复制到另外的位置,然后在SQLS......
  • DDL-操作数据库创建&查询以及修改&删除&使用
    DDL-操作数据库创建&查询以及修改&删除&使用1.操作数据库:CRUD1.C(Create):创建创建数据库createdatabase数据库名称;创建数据库,判断不存在,再创建createdatabase......