SpringBoot + vue2.0查詢所用功能詳解

更新時間：2023年11月21日 09:47:29 作者：YE-

這篇文章主要介紹了SpringBoot + vue2.0查詢所用功能,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

導入數(shù)據(jù)庫文件

CREATE DATABASE `springboot` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci */ /*!80016 DEFAULT ENCRYPTION='N' */
CREATE TABLE `users` (
  `id` int unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(40) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL,
  `password` varchar(40) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL,
  `email` varchar(60) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb3

后端

創(chuàng)建SpringBoot項目

第一步，導入pom.xml依賴

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <image>
                        <builder>paketobuildpacks/builder-jammy-base:latest</builder>
                    </image>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

第二步，編譯application.yml文件，連接數(shù)據(jù)庫

spring:
  datasource:
    url : jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
    username : root
    password : 123456
    driver-class-name : com.mysql.cj.jdbc.Driver
  jpa: #自動生成函數(shù)所帶的說起來語句
    show-sql: true
    properties: 
      hibernate:
        format_sql: true
server:
  port: 8181

ps.確定端口號為8181，不能是8080，這樣會與前端沖突

第三步，撰寫JavaBean

Users.java

package com.example.springboottest.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import lombok.Data;
@Entity
@Data
public class Users {
    @Id
    private Integer id;
    private String name;
    private String password;
    private String email;
    private String birthday;
}

第四步，寫一下儲存庫UsersRepository接口

UsersRepository.java

package com.example.springboottest.repository;
import com.example.springboottest.entity.Users;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UsersRepository extends JpaRepository<Users, Integer> {
}

第五步，寫一下連接層，與網(wǎng)絡連接

UserHandler.java

package com.example.springboottest.controller;
import com.example.springboottest.entity.Users;
import com.example.springboottest.repository.UsersRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserHandler {
    @Autowired
    private UsersRepository usersRepository;
    @GetMapping("/findAll")
    public List<Users> findAll() {
        return usersRepository.findAll();
    }
}

第六步，CrosConfig.java

由于前后端端口不一，需要端口配置文件，將后端的URL可以傳給前端使用，需要這個文件

package com.example.springboottest.config;
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 {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
               .allowedOrigins("*")
               .allowedMethods("GET", "POST", "PUT", "DELETE")
               .allowedHeaders("*")
               .allowCredentials(false)
               .maxAge(3600);
    }
}

第七步，運行

運行SpringBootTestApplication.java文件，則localhost:8181端口啟動

前端

創(chuàng)建一個有vuex，router路由的vue2.0前端項目

第一步，終端導入axios

輸入：vue add axios
ps.這個命令，我只在idea輸入成功，vscode不知道為什么輸入無效

src的文件出現(xiàn)了plugins文件夾就是成功標志

第二步，在views界面創(chuàng)建User.vue前端vue界面

<template>
  <div>
    <table>
      <tr>
          <td>ID</td>
          <td>name</td>
          <td>password</td>
          <td>email</td>
          <td>birthday</td>
      </tr>
      <tr v-for="item in User">
        <td>{{ item.id }}</td>
        <td>{{item.name}}</td>
        <td>{{item.password}}</td>
        <td>{{item.email}}</td>
        <td>{{item.birthday}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
      name: "User",
      data() {
        return {
            msg: "Hello User",
          User: [
            {
              id: 1,
              name: "name",
              password: "password",
              email: "email",
              birthday: "birthday"
            }]
        }
    },
    created() {
          const _this=this;
          axios.get('http://localhost:8181/user/findAll').then(function (resp){
              _this.User = resp.data;
          })
        }
} <!--寫上ajax代碼，用于查詢所有數(shù)據(jù)-->
</script>
<style>
</style>

第三步，導入剛剛寫的文件路由

在router路由文件導入User.vue路由

import User from '../views/User.vue'
  {
    path: '/user',
    component: User
  }

這樣就能在前端查看User.vue了

第四步，前端終端輸入npm run serve 啟動項目，localhost:8080啟動結果測試

測試成功

到此這篇關于SpringBoot + vue2.0查詢所用功能的文章就介紹到這了,更多相關springboot查詢功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

springBoot?啟動指定配置文件環(huán)境多種方案(最新推薦)
springBoot?啟動指定配置文件環(huán)境理論上是有多種方案的，一般都是結合我們的實際業(yè)務選擇不同的方案，比如，有pom.xml文件指定、maven命令行指定、配置文件指定、啟動jar包時指定等方案，今天我們一一分享一下,需要的朋友可以參考下
2023-09-09
idea運行java項目main方法報build failure錯誤的解決方法
當在使用 IntelliJ IDEA 運行 Java 項目的 main 方法時遇到 "Build Failure" 錯誤,這通常意味著在項目的構建過程中遇到了問題,以下是一些詳細的解決步驟,以及一個簡單的代碼示例,用于展示如何確保 Java 程序可以成功構建和運行,需要的朋友可以參考下
2024-09-09
SpringMVC開發(fā)中十大常見問題深度解析與解決方案
在Java Web開發(fā)領域,SpringMVC作為一款主流的Web框架,憑借其強大的功能和便捷的開發(fā)體驗深受開發(fā)者喜愛,然而,在實際使用過程中,開發(fā)者常常會遇到各種各樣的“坑”,本文將針對SpringMVC開發(fā)中常見的十大問題,需要的朋友可以參考下
2025-06-06
Java Math.round函數(shù)詳解
這篇文章主要介紹了Java Math.round函數(shù)詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-08-08
SpringBoot結合Swagger2自動生成api文檔的方法
這篇文章主要介紹了SpringBoot結合Swagger2自動生成api文檔的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
關于SpringMVC對Restful風格的支持詳解
Restful就是一個資源定位及資源操作的風格,不是標準也不是協(xié)議,只是一種風格,是對http協(xié)議的詮釋,下面這篇文章主要給大家介紹了關于SpringMVC對Restful風格支持的相關資料,需要的朋友可以參考下
2022-01-01
Spring Cloud @EnableFeignClients注解的屬性字段basePacka詳解
這篇文章主要介紹了Spring Cloud @EnableFeignClients注解的屬性字段basePacka詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-09-09
Spring中@PropertySource注解使用場景解析
這篇文章主要介紹了Spring中@PropertySource注解使用場景解析,@PropertySource注解就是Spring中提供的一個可以加載配置文件的注解,并且可以將配置文件中的內容存放到Spring的環(huán)境變量中,需要的朋友可以參考下
2023-11-11
Java下3中XML解析 DOM方式、SAX方式和StAX方式
目前我知道的JAVA解析XML的方式有：DOM, SAX, StAX；如果選用這幾種，感覺還是有點麻煩；如果使用：JAXB(Java Architecture for XML Binding)，個人覺得太方便了
2013-04-04
Java設計模式之享元模式(Flyweight Pattern)詳解
享元模式（Flyweight Pattern）是一種結構型設計模式，旨在減少對象的數(shù)量，以節(jié)省內存空間和提高性能，本文將詳細的給大家介紹一下Java享元模式,需要的朋友可以參考下
2023-07-07