欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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> {
}

第五步，寫一下連接層，與網絡連接

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Java DWR內存泄漏問題解決方案

    Java DWR內存泄漏問題解決方案

    這篇文章主要介紹了Java DWR內存泄漏問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-10-10
  • Spring Boot整合FTPClient線程池的實現(xiàn)示例

    Spring Boot整合FTPClient線程池的實現(xiàn)示例

    這篇文章主要介紹了Spring Boot整合FTPClient線程池的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-12
  • mybatis-plus更新策略部分字段不更新問題

    mybatis-plus更新策略部分字段不更新問題

    這篇文章主要介紹了mybatis-plus更新策略部分字段不更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • MyBatis+MyBatisPlus中遇到的一些坑及解決

    MyBatis+MyBatisPlus中遇到的一些坑及解決

    這篇文章主要介紹了MyBatis+MyBatisPlus中遇到的一些坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • Java的volatile和sychronized底層實現(xiàn)原理解析

    Java的volatile和sychronized底層實現(xiàn)原理解析

    文章詳細介紹了Java中的synchronized和volatile關鍵字的底層實現(xiàn)原理,包括字節(jié)碼層面、JVM層面的實現(xiàn)細節(jié),以及鎖的類型和MESI協(xié)議在多核處理器中的作用,文章還探討了synchronized和volatile的區(qū)別,以及如何通過Atomic類來實現(xiàn)更細粒度的原子操作,感興趣的朋友一起看看吧
    2025-03-03
  • JavaWeb中web.xml初始化加載順序詳解

    JavaWeb中web.xml初始化加載順序詳解

    本篇文章主要介紹了JavaWeb中web.xml初始化加載順序詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • Jedis對redis的五大類型操作代碼詳解

    Jedis對redis的五大類型操作代碼詳解

    這篇文章主要介紹了Jedis對redis的五大操作代碼詳解，分別是字符串、列表、散列、集合、有序集合，具有一定參考價值，需要的朋友可以了解下。
    2017-11-11
  • Java并發(fā)系列之ConcurrentHashMap源碼分析

    Java并發(fā)系列之ConcurrentHashMap源碼分析

    這篇文章主要為大家詳細分析了Java并發(fā)系列之ConcurrentHashMap源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-03-03
  • Java編程實現(xiàn)直接插入排序代碼示例

    Java編程實現(xiàn)直接插入排序代碼示例

    這篇文章主要介紹了Java編程實現(xiàn)直接插入排序代碼示例，具有一定借鑒價值，需要的朋友可以參考下。
    2017-12-12
  • 詳解Spring中接口的bean是如何注入的

    詳解Spring中接口的bean是如何注入的

    這篇文章主要介紹了詳解Spring中接口的bean是如何注入的的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Spring具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2020-06-06

最新評論