Vue+Springboot數據實現CRUD

源碼地址

github地址

效果

下面我們來看下效果

新增效果

編輯效果

很多朋友看博客也就是點進去,看幾秒鐘就關標籤了
目標就是想找自己想要的東西,直接給你看效果比較實在,想學的,不管怎麼都能學的好,不想學就像你掉進河裏面, 人家救你，你呢，還想咬人的手

一步一個腳印,沒有誰是一開始就會的

創建Springboot 項目

創建springboot項目
在創建項目的時候添加如上依賴，這裏我強調一下這裏爲什麼用Thymeleaf，這裏用Thymeleaf僅僅是返回一個視圖頁面。

首先我們在Mysql中建立一個數據庫crud，再建立一個數據表crud表

實體類代碼

@Entity
public class Crud {
    private int id;
    private String crudName;
    private int crudAge;
    private String crudHobby;
    private String crudAddr;
    private String crudSalary;
}

這裏省略了部分代碼,這裏的實體類是由SpringDataJpa幫我們自動生成的。
Dao持久層代碼

public interface CrudRepository extends JpaRepository<Crud,Integer> {
   Page<Crud> findAll(Pageable pageable);
}

dao裏面就只有一個方法，分頁查詢所有數據

控制器代碼

@Controller
public class IndexController {
    @Autowired
    private CrudRepository crudRepository;
    @GetMapping("/")
    public String indexPage() {
        return "index"; //返回一個index.html頁面
    }

    @PostMapping("/page")
    @ResponseBody
    public ResponseEntity<Object> findPageAll(@RequestBody PageVO pageVO) {

        Pageable pageable = PageRequest.of(pageVO.getStart(),pageVO.getLength(), Sort.Direction.ASC,"id");
        Page<Crud> page = crudRepository.findAll(pageable);
        return new ResponseEntity<Object>(page, HttpStatus.OK);
    }

    @DeleteMapping("/crud/{id}")
    @ResponseBody
    public ResponseEntity<Object> deleteById(@PathVariable("id") Integer id) {
        if (id.equals("")) {
            return new ResponseEntity<Object>("id不能爲空", HttpStatus.NOT_FOUND);
        }
        crudRepository.deleteById(id);
        return new ResponseEntity<Object>("恭喜你,刪除成功", HttpStatus.OK);
    }

    @PutMapping("/updateUser")
    @ResponseBody
    public ResponseEntity<Object> updateById( @RequestBody  Crud crud) {

        if (crud != null) {
            crudRepository.save(crud);
            return new ResponseEntity<Object>("恭喜你,編輯成功", HttpStatus.OK);
        }
        return new ResponseEntity<Object>("抱歉,編輯失敗", HttpStatus.OK);

    }

    @PostMapping("/addCrud")
    @ResponseBody
    public ResponseEntity<Object> addCrud( @RequestBody  Crud crud) {

        if (crud != null) {
            crudRepository.save(crud);
            return new ResponseEntity<Object>("添加成功", HttpStatus.OK);
        }
        return new ResponseEntity<Object>("添加失敗", HttpStatus.OK);

    }
}

這裏的PageVo是我自己封裝的，由於 @Data 的緣由略過封裝代碼如下

@Data
public class PagesVO {
    private Integer start = 0; //頁碼
    private Integer length = 10; //頁數
}

這裏我們連接的是 mysql8

spring:
  application:
    name: elment_crud
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/crudmock?serverTimezone=GMT%2B8
    username: root
    password: 123456

注：注意mysql5.7以上驅動是com.mysql.cj.jdbc.Driver 5.7及以下是com.mysql.jdbc.Driver

這裏使用的Vue不是單文件組件.vue的形式而是在html中引入了vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入element ui的css-->
    <link rel="stylesheet" href="../index.css"> 
</head>
<body>
<div id="app">
    <!--el開頭的是elment ui模版命令,這裏增加了一個添加的按鈕，el-row是獨佔一行 -->
    <el-row>
        <el-button type="primary" @click="handleAdd">添加</el-button>
    </el-row>
    <!--:data是渲染數據-->
    <el-table 
            :data="crud"
            style="width: 100%"
            height="250">
        <el-table-column
                fixed
                prop="id"
                label="編號"
                width="150">
        </el-table-column>
        <el-table-column
                prop="crudName"
                label="名稱"
                width="120">
        </el-table-column>
        <el-table-column
                prop="crudAge"
                label="年齡"
                width="120">
        </el-table-column>
        <el-table-column
                prop="crudSalary"
                label="薪水"
                width="120">
        </el-table-column>
        <el-table-column
                prop="crudHobby"
                label="地址"
                width="愛好">
        </el-table-column>
        <el-table-column
                prop="crudAddr"
                label="地址"
                width="120">
        </el-table-column>
           <!--    編輯 刪除按鈕    -->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row,crud)">編輯</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row,crud)">刪除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分頁 
    current-page 是當前頁數
    pageSize 改變時會觸發 這裏返回的是每頁條數
    page-sizes	每頁顯示個數選擇器的選項設置 返回的是數組 [5,10,20]
    layout 組件佈局，子組件名用逗號分隔 sizes, prev, pager, next, jumper, ->, total, slot
    total 總條目數	
     -->
    <div class="pagination">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageCode"
                :page-sizes="pageOption"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalaElemnts">
        </el-pagination>
    </div>


    <!--添加與編輯、彈出層頁面-->
    <div  v-show="show">

        <el-dialog title="用戶信息" :visible.sync="dialogFormVisible">
            <el-form>
                <el-form-item label="暱稱" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年齡" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudAge" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪水" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudSalary"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="愛好" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudHobby"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  label="地址" :label-width="formLabelWidth">
                    <el-input v-model="formCrud.crudAddr" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" >取 消</el-button>
                <el-button v-show="btn_show" type="primary" @click="handleUpdate">確 定</el-button>
                <el-button type="primary" v-show="btn2_show" @click="add">確定添加</el-button>
            </div>
        </el-dialog>
    </div>


</div>



</body>
<script src="../vue.js"></script>
<script src="../index.js"></script>
<script src="../axios.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        show: false,
        btn_show: false,
        btn2_show: false,
        crud: [],
        pageCode: 0, //默認頁
        pageSize: 10,//每頁10條
        totalPage: 10 ,//總頁數
        pageOption: [10, 50, 100],
        totalaElemnts: 100, //總記錄數
        dialogFormVisible:false,
        formCrud: {
            id: '',
            crudName: '',
            crudAge: '',
            crudHobby: '',
            crudSalary: '',
            crudAddr: '',
        },
          formLabelWidth: '120px'
      }
    },
    methods: {
      findByPage(pageCode, pageSize) {
      axios.post("http://localhost:8080/page",{
          start: pageCode,
          length: pageSize
      }).then( (res) => {
          if (res.status === 200)
          this.totalPage = res.data.totalPages //總頁數
          this.totalaElemnts = res.data.totalElements //總記錄數
          this.crud = res.data.content
      }).catch((err) => {
          console.log(err)
      })

      },
      handleSizeChange(val) {
        this.findByPage(this.pageCode, val)
      },
        handleCurrentChange(val) {
        this.findByPage(val, this.pageSize)
      },
        /**
         * 刪除
          * @param index
         * @param row
         * @param crud
         */
     handleDelete(index, row, crud) {
       var id = crud[index].id;
       axios.delete("http://localhost:8080/crud/" + id, {
       }).then((res) =>{
           this.findByPage(this.pageCode, this.pageSize)
       }).catch((err) => {
           console.log(err)
       })
     },
        /**
         * 編輯 之前回顯數據
         * @param index
         * @param row
         * @param crud
         */
    handleEdit(index, row, crud) {

      this.show = true
      this.dialogFormVisible = true
      this.btn_show = true
      this.btn2_show = false
      this.formCrud.id = crud[index].id
      this.formCrud.crudName = crud[index].crudName
      this.formCrud.crudAge = crud[index].crudAge
      this.formCrud.crudSalary = crud[index].crudSalary
      this.formCrud.crudHobby = crud[index].crudHobby
      this.formCrud.crudAddr = crud[index].crudAddr
    },

     /**
      * 編輯發送ajax請求
      */
    handleUpdate() {
      axios.put("http://localhost:8080/updateUser",{
      id: this.formCrud.id,
      crudName: this.formCrud.crudName,
      crudAge:  this.formCrud.crudAge,
      crudHobby: this.formCrud.crudHobby,
      crudSalary: this.formCrud.crudSalary,
      crudAddr: this.formCrud.crudAddr
      }).then((res) => {
      //編輯成功後刷新頁面
      this.findByPage(this.pageCode, this.pageSize)
      //關閉遮罩層
      this.show = false
      this.dialogFormVisible = false
      console.log(1, res)
      }).catch((err) => {
      console.log(2, err)
      })
    },
     /**
      * 點擊添加按鈕的時候顯示遮罩層,同時將編輯的按鈕隱藏掉
      */
    handleAdd() {
      this.show= true
      this.dialogFormVisible = true
      //將雙向綁定數據滯空
      this.formCrud.crudName= ''
      this.formCrud.crudAge = ''
      this.formCrud.crudHobby = ''
      this.formCrud.crudSalary = ''
      this.formCrud.crudAddr = ''
      //將新編輯按鈕隱藏掉
      this.btn_show = false
      //將新增按鈕顯示 v-show 其實是display：none 和black操作
      this.btn2_show  =true
    },
    /**
      *  新增
      */
    add() {
      axios.post("http://localhost:8080/addCrud",{
        crudName: this.formCrud.crudName,
        crudAge:  this.formCrud.crudAge ,
        crudHobby: this.formCrud.crudHobby,
        crudSalary: this.formCrud.crudSalary,
        crudAddr: this.formCrud.crudAddr
      }).then((res) => {
         //添加成功後從新計算總頁數
        this.findByPage(this.pageCode, this.pageSize)
        //同時關閉遮罩層
        this.show= true
        this.dialogFormVisible = false

      }).catch((err) => {
          console.log(err)
      })
    }
    },
    created() {
      this.findByPage(this.pageCode, this.pageSize)
    },
  })

</script>
</html>

這樣就完成了增刪改查和分頁，非常簡單，這裏並沒有使用單文件組件的方式, 推薦大家去使用單文件的組件方式去實現，單文件組件也是非常的簡單，這裏就不做太多的深入了，網上哪些人實現的方法太過於複雜，我按照自己的想法實現了，寫代碼一定要有思維，這樣寫代碼就很輕鬆。
element ui 框架總體來說提供來非常多多樣式，對沒有css功底的程序員來說是相當不錯的，極大的幫助了我們，不用花費很多的時間去寫樣式。

Vue+Springboot數據實現CRUD

源碼地址

創建Springboot 項目

markdown圖片換位置問題

史上最詳細Redis教程

Webpack入門到了解

CSS3彈性盒子詳解

Vue+Springboot數據實現CRUD

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結