vue+springboot

前言

任何零基础的人看完、操作完这个一小时的视频（或者随便找）都可以做到最基础的前后端数据库交互
https://www.bilibili.com/video/BV137411B7vB?p=1
我曾以为这很难 其实一点都不难 只要你花（最多）三天的空闲时间做这么一件小事

必要软件：IDEA编译器、nodejs（要使用npm命令）、vue3（为了vue ui） 自行百度安装

一、创建项目

（1）管理员打开cmd cd到文件夹 vue ui
（2）选项选择：1手动 2router vuex开 formatter关 3开历史记录
（3）启动terminal npm run serve启动
用默认2.x！！！！！！！

App是不变的 变的是 routerview里面的 始终是单页面

二、数据展示页面

在vue 或component新建vue
1.template 是html script是js style是css
只能有一个根节点 所以一般用div框起来 、前端可以造假数据测试 不需后端
export defult传数据 固定语法{{msg}}

data(){
            return{
                msg:'Hello Vue'
            }
        }

在index.js配置！！！{ path: '/book',component: Book}

普通

<tr><td>{{books[0].id}}</td></tr>

循环标签

  <tr v-for="x in books">
                <td>{{x.id}}</td>
                <td>{{x.name}}</td>
                <td>{{x.author}}</td>
   </tr>

三、后端与mysql数据交互

新建spring Initializr 项目
选1.lombok 2spring web 3.javadata jpa 4.mysql driver

把properties删了创一个application.yml

spring:
 datasource:
   url:  jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8
   username: root(sql的用户名)
   password: xxx(sql的密码)
   driver-class-name: com.mysql.cj.jdbc.Driver
   jpa:
     show-sql: true
     properties:
       hibernate:
        format_sql: true
server:
  port: 8181

1.springboot创建entity实体类
在com.example.springboottest目录创建一个package名字叫entity 其下建一个Book.java

@Entity
@Data
public class Book {
   @Id
   private Integer id;
   private String name;
   private String author;
}

2.建一个repository package 其下建一个interface

public interface BookRepository extends JpaRepository<Book,Integer> {//继承JPa 实体类 与 主键
}

测试 ：右键接口 goto test
注意application.yml里的jpa配置 可以看到terminal把书名打印出来
3.controller下建个class

@RestController
@RequestMapping
public class BookHandler {
    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll")
    public List<Book> findAll(){
        return bookRepository.findAll();
    }
}

前后端交互

vueui安装axios plugin
以管理员身份在idea的lterminal命令行运行 vue add axios
前端vue初始化 created和data同一层次

     created(){
            const vuethis=this
 axios.get('http://localhost:8181/book/findAll').then(function(resp){
                vuethis.books = x.data//直接写this是回调的this 这个vuethis是外面的回调里的this
                console.log(resp)
            })
        }

跨域问题config package建一个 CrosConfig.java
springboot 2.5 将.allowedOrigins替换成.allowedOriginPatterns即可。

Tip:idea ctrl+j 补齐
如main 自动生成public static void...
shift+刷新强制刷新
idea ctrl alt 0 壁纸