国产片侵犯亲女视频播放_亚洲精品二区_在线免费国产视频_欧美精品一区二区三区在线_少妇久久久_在线观看av不卡

服務器之家：專注于服務器技術及軟件下載分享
分類導航

PHP教程|ASP.NET教程|Java教程|ASP教程|編程技術|正則表達式|C/C++|IOS|C#|Swift|Android|VB|R語言|JavaScript|易語言|vb.net|

服務器之家 - 編程語言 - Java教程 - springboot結合vue實現增刪改查及分頁查詢

springboot結合vue實現增刪改查及分頁查詢

2022-01-11 00:50夜色架構師 Java教程

本文主要介紹了springboot結合vue實現增刪改查及分頁查詢，文中通過示例代碼介紹的非常詳細,具有一定的參考價值，感興趣的小伙伴們可以參考一下

1：首先。創建一個springboot項目，這里我使用以及構建好基本框架的腳手架，打開是這個樣子：

springboot結合vue實現增刪改查及分頁查詢

Result類：已經封裝好了三種返回類型的包裝類：code，msg，data

2：創建數據庫叫mytest(可以自己取名字)

CREATE TABLE `user` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT "序號",
  `name` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT "姓名?",
  `age` int(11) DEFAULT NULL COMMENT "年齡",
  `sex` varchar(1) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT "性別",
  `adderss` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT "地址",
  `phone` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT "電話",
  `creat_time` varchar(20) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

springboot結合vue實現增刪改查及分頁查詢

3：編寫實體類：entity->User類

**首先加@Table注解告訴我們要哪個表，然后加@Entity標注這個User是一個entity，@Data生成getset方法
**

package com.example.entity;

import lombok.Data;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;

@Table(name="user")
@Entity
@Data
public class User {
    private  Long id;
    private  String name;
    private  Integer age;
    private  String sex;
    private  String adderss;
    private  String phone;
    @Column(name = "creat_time")    
    private  String creatTime;

}

這里可以自己添加get和set方法，我這里是直接在pom里面添加了lombok注解

  <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

springboot結合vue實現增刪改查及分頁查詢

這里user報錯不要怕 在下面加上

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)  //表示ID是主見并且自動遞增

4：編寫UserDao層：寫數據庫接口

package com.example.dao;

import com.example.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;


@Repository
public interface UserDao extends JpaRepository<User,Long> {
}

springboot結合vue實現增刪改查及分頁查詢

5：編寫service層，編寫增刪改查方法（使用了springdataJPA）

package com.example.service;

import com.example.dao.UserDao;
import com.example.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.Optional;

@Service
public class UserService {

    //1:導入數據庫接口  (JPA幫助我們編寫了大量的接口，我們只需要調用就好)
    @Resource
    private UserDao userDao;

//   這兩個方法合并成了一個，因為都是調用的save,區別就是新增的時候不會傳ID進來，更新的時候會,框架會幫我們區分
//    // 增加
//    public void add(User user){
//        userDao.save(user);
//    }
//
//    //修改
//    public  void  updata(User user){
//        userDao.save(user);
//
    //新增+修改
    public void save(User user){
            userDao.save(user);
        }


    

    //刪除
    public  void  del(Long id){
    userDao.deleteById(id);

    }

    //查找
    public User findById(Long id){
        return userDao.findById(id).orElse(null);  //沒有數據則返回null

    }

    //分頁查詢
    public Page<User> findPage(Integer pageNum, Integer pageSize,String name){
        Sort sort = Sort.by(Sort.Direction.DESC,"creat_time");
        Pageable request = PageRequest.of(pageNum-1,pageSize,sort);
        return userDao.findNameLike(name,request);
    }
}

中途需要在UserDao層編寫分頁查詢語句

package com.example.dao;

import com.example.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;


@Repository
public interface UserDao extends JpaRepository<User,Long> {
    @Query(value = "select * from  user where  name like %?1%",nativeQuery = true)
    Page<User> findNameLike(String name, Pageable pageRequest);
}

springboot結合vue實現增刪改查及分頁查詢

springboot結合vue實現增刪改查及分頁查詢

6：編寫UserController作為接口訪問層

package com.example.controller;

import com.example.common.Result;
import com.example.entity.User;
import com.example.service.UserService;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * @author ${范濤之}
 * @Description
 * @create 2021-09-20 12:19
 */
@RestController     //表明所有方法都是返回json數據
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserService userService;

    // 新增
    @PostMapping
    public Result add(@RequestBody User user){
        userService.save(user);
        return  Result.success();
    }

    //更新
    @PutMapping
    public Result update(@RequestBody User user){
        userService.save(user);
        return  Result.success();
    }


    //刪除用戶 ： /user/1
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long id){
        userService.del(id);
        return  Result.success();
    }

    //根據id查詢用戶
    @GetMapping("/{id}")
    public Result<User> findById(@PathVariable Long id){
        return  Result.success( userService.findById(id));
    }


    //分頁查詢

    @GetMapping
    public Result<Page<User>> findById(@RequestParam(required = false,value ="1" )Integer pageNum,
                                 @RequestParam(required = false,value ="10" )Integer PageSize,
                                 @PathVariable(required = false) String name){
        return  Result.success( userService.findPage(pageNum,PageSize,name));
    }
}

springboot結合vue實現增刪改查及分頁查詢

7：編寫前端界面，在static里面寫index.html，測試運行

springboot結合vue實現增刪改查及分頁查詢

springboot結合vue實現增刪改查及分頁查詢

8：通過使用elementui引入樣式

springboot結合vue實現增刪改查及分頁查詢

9：編寫index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶信息</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 80%; margin: 0 auto">
    <h2>用戶信息表</h2>

    <el-row>
        <el-col :span="6" style="margin-bottom: 10px">
            <el-button type="primary" @click="add">新增</el-button>
            <el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
        </el-col>
    </el-row>

    <el-table
            :data="page.content"
            stripe
            border
            style="width: 100%">
        <el-table-column
                prop="name"
                label="用戶名"
        >
        </el-table-column>
        <el-table-column
                prop="age"
                label="年齡"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性別">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="電話">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small" circle @click="edit(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" circle @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-pagination
                layout="prev, pager, next"
                :page-size="pageSize"
                :current-page="pageNum"
                @prev-click="loadTable"
                @current-change="loadTable"
                @next-click="loadTable"
                :total="page.totalElements">
        </el-pagination>
    </el-row>

    <el-dialog
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用戶名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="年齡">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="性別">
                <el-radio v-model="form.sex" label="男">男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="電話">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">確 定</el-button>
        </span>
    </el-dialog>

</div>

<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入組件庫 -->
<script src="element.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            page: {},
            name: "",
            pageNum: 1,
            pageSize: 8,
            dialogVisible: false,
            form: {}
        },
        created() {
            this.loadTable(this.pageNum);
        },
        methods: {
            loadTable(num) {
                this.pageNum = num;
                $.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
                    this.page = res.data;
                });
            },
            add() {
                this.dialogVisible = true;
                this.form = {};
            },
            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },
            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    // 編輯
                    $.ajax({
                        url: "/user",
                        type: "put",
                        contentType: "application/json",
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                } else {
                    // 新增
                    $.ajax({
                        url: "/user",
                        type: "post",
                        contentType: "application/json",
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                }
            },
            del(id) {
                $.ajax({
                    url: "/user/" + id,
                    type: "delete",
                    contentType: "application/json"
                }).then(res => {
                    this.loadTable(1);
                })
            }
        }
    })
</script>
</body>
</html>

springboot結合vue實現增刪改查及分頁查詢

完結撒花:

springboot結合vue實現增刪改查及分頁查詢

到此這篇關于springboot結合vue實現增刪改查及分頁查詢的文章就介紹到這了,更多相關springboot vue 增刪改查及分頁查詢內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://blog.csdn.net/justleavel/article/details/120389400

延伸 · 閱讀

精彩推薦
  • Java教程升級IDEA后Lombok不能使用的解決方法

    升級IDEA后Lombok不能使用的解決方法

    最近看到提示IDEA提示升級，尋思已經有好久沒有升過級了。升級完畢重啟之后，突然發現好多錯誤，本文就來介紹一下如何解決，感興趣的可以了解一下...

    程序猿DD9332021-10-08
  • Java教程Java使用SAX解析xml的示例

    Java使用SAX解析xml的示例

    這篇文章主要介紹了Java使用SAX解析xml的示例，幫助大家更好的理解和學習使用Java，感興趣的朋友可以了解下...

    大行者10067412021-08-30
  • Java教程20個非常實用的Java程序代碼片段

    20個非常實用的Java程序代碼片段

    這篇文章主要為大家分享了20個非常實用的Java程序片段，對java開發項目有所幫助，感興趣的小伙伴們可以參考一下 ...

    lijiao5352020-04-06
  • Java教程Java8中Stream使用的一個注意事項

    Java8中Stream使用的一個注意事項

    最近在工作中發現了對于集合操作轉換的神器，java8新特性 stream，但在使用中遇到了一個非常重要的注意點，所以這篇文章主要給大家介紹了關于Java8中S...

    阿杜7482021-02-04
  • Java教程小米推送Java代碼

    小米推送Java代碼

    今天小編就為大家分享一篇關于小米推送Java代碼，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧...

    富貴穩中求8032021-07-12
  • Java教程xml與Java對象的轉換詳解

    xml與Java對象的轉換詳解

    這篇文章主要介紹了xml與Java對象的轉換詳解的相關資料,需要的朋友可以參考下...

    Java教程網2942020-09-17
  • Java教程Java BufferWriter寫文件寫不進去或缺失數據的解決

    Java BufferWriter寫文件寫不進去或缺失數據的解決

    這篇文章主要介紹了Java BufferWriter寫文件寫不進去或缺失數據的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望...

    spcoder14552021-10-18
  • Java教程Java實現搶紅包功能

    Java實現搶紅包功能

    這篇文章主要為大家詳細介紹了Java實現搶紅包功能，采用多線程模擬多人同時搶紅包，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙...

    littleschemer13532021-05-16
Weibo Article 1 Weibo Article 2 Weibo Article 3 Weibo Article 4 Weibo Article 5 Weibo Article 6 Weibo Article 7 Weibo Article 8 Weibo Article 9 Weibo Article 10 Weibo Article 11 Weibo Article 12 Weibo Article 13 Weibo Article 14 Weibo Article 15 Weibo Article 16 Weibo Article 17 Weibo Article 18 Weibo Article 19 Weibo Article 20 Weibo Article 21 Weibo Article 22 Weibo Article 23 Weibo Article 24 Weibo Article 25 Weibo Article 26 Weibo Article 27 Weibo Article 28 Weibo Article 29 Weibo Article 30 Weibo Article 31 Weibo Article 32 Weibo Article 33 Weibo Article 34 Weibo Article 35 Weibo Article 36 Weibo Article 37 Weibo Article 38 Weibo Article 39 Weibo Article 40
主站蜘蛛池模板： 一级黄片毛片免费看 | 一区二区在线看 | 小情侣高清国产在线播放 | 免费av在线 | 日韩精品一区二区三区在线观看 | 国产精品污www一区二区三区 | 91免费视频观看 | 精品久久国产老人久久综合 | www.99热 | 免费午夜视频 | 精品电影 | 中文精品在线 | 一区二区三区精品 | 婷婷天堂| 欧美日韩电影一区 | 狼人狠狠干| 成人欧美一区二区三区在线播放 | 日本在线视频一区二区三区 | 亚洲区视频 | 久久99蜜桃综合影院免费观看 | 欧美视频中文字幕 | 精品日韩一区二区三区 | av一区在线 | 免费观看av电影 | 久久久国产一区二区三区 | 日韩欧美视频一区 | 天堂v在线视频 | 国产精品入口久久 | 在线观看av网站永久 | 中文字幕一区二区三区乱码图片 | 国产久| 国产一级黄色av | 日韩欧美在线看 | 99久久精品一区二区成人 | 久久精品视频免费观看 | 一区二区三区在线视频播放 | 自拍在线| 美日韩一区二区 | 欧美成人精品一区二区 | 精品一区二区三区在线观看 | 在线成人|