Vue學習筆記十三：Vue+Bootstrap+vue-resource從接口獲取數據庫數據

時間 2019-11-16

標籤 vue 學習筆記十三 vue+bootstrap+vue bootstrap resource 接口獲取數據庫數據欄目 Bootstarp 简体版

原文原文鏈接

目錄javascript

前言

Vue學習筆記九的列表案例和Vue學習筆記十二vue-resource這兩章結合一下，不在使用假數據了，此次從後臺接口獲取json數據。css

Vue前端框架提供交互邏輯處理html

Bootstrap前端css提供美化渲染前端

SpringBoot後端提供接口vue

MySQL數據庫提供數據java

SpringBoot提供後端接口

因爲前端第九章我都寫完了，等會複製着用，因此先把後端寫好mysql

先使用Spring JPA建立Entity類和自動映射數據庫表，JPA參考個人文章Spring JPA學習筆記ios

Entity類

package com.vae.weatherforecast.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import javax.persistence.*;

@Entity
@Table(name = "person")
@AllArgsConstructor  //全參數的構造函數
@NoArgsConstructor   //無參數的構造函數
@Data              //get和set方法
@Accessors(chain = true)  //鏈式訪問，使用鏈式建立的set方法有返回值
@SuppressWarnings("serial")  //忽略黃色警告
public class test {
    @Id
    @GeneratedValue
    @Column(name="id")
    private Integer id;
    private String name;
    private String createtime;
}

JPA操做接口

package com.vae.weatherforecast.repository;

import com.vae.weatherforecast.bean.test;
import org.springframework.data.jpa.repository.JpaRepository;

public interface testRepository extends JpaRepository<test,Integer> {

}

配置文件

JPA的配置文件寫在了properties裏，其餘的寫在了yml裏spring

server:
  port: 80

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/vae?serverTimezone=UTC
    username: root
    password: 123

spring.jpa.properties.hibernate.hbm2ddl.auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.show-sql= true

數據庫表自動映射，添加數據

運行SpringBoot，會自動建立表，如今來添加一些數據，如圖sql

寫提供數據的接口

新建controller，寫幾個操做數據的接口，我先寫一個提供數據的接口，至於增刪改查的增刪改，下面再寫。

@Autowired
    testRepository testRepositorynew;

    @CrossOrigin
    @GetMapping("/getAllList")
    public List<test> getAllList() {
        List<test> lists = testRepositorynew.findAll();
        for (test testnew : lists) {
            System.out.println(testnew);
        }
        return lists;
    }

跨域問題

使用Vue訪問本身提供的接口的時候，會出現跨域問題的，解決辦法很簡單啊，SpringBoot爲咱們考慮了不少，直接在方法上加一個@CrossOrigin就能夠了，這裏注意寫@GetMapping，Vue那裏也使用get方式。至於jsonp方式我還不知道怎麼使用。

前端修改

複製第九章的代碼，修改後以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜀雲泉</title>
    
    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>
    <script type="text/javascript" src="../lib/vue-resource.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">

</head>
<body>
    
    <!-- 這個div就是MVVM中的V，View -->
    <div id="app">

        <!-- 自定義按鍵碼 -->
        <!-- Vue.config.keyCodes.F2=113 -->
        
        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">蜀雲泉的小列表</h3>
              </div>
              <!-- form-inline是文字和輸入框在同一行顯示，form-control是設置默認寬度width爲100% -->
              <div class="panel-body form-inline">
                  <label>
                      id:<input type="text" class="form-control" v-model="id">
                  </label>
                  <label>
                      name:<input type="text" class="form-control" v-model="name" @keyup.enter="add">
                  </label>

                  <input type="button" value="添加" class="btn btn-primary" @click="add">

                  <label>
                        查詢:<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
                  </label>

              </div>
        </div>
        
        
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>createtime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td v-text="item.id"></td>
                    <td v-text="item.name"></td>
                    <td v-text="item.createtime"></td>
                    <td><a href="" @click.prevent="del(item.id)" class="btn btn-danger">刪除</a></td>

                </tr>
            </tbody>
        </table>
        
        
        

    </div>


    <script>

        // 自定義全局的指令
        Vue.directive('focus',{
            // 第一個參數必定是el，el就是被綁定的js對象

            // 當指令綁定到元素上的時候，執行bind函數，執行一次
            bind:function(el){
                
            },
            // 當指令插入到DOM中的時候，執行inserted函數，執行一次
            inserted:function(el){
                el.focus()
            },
            // 當組件更新的時候，執行updated函數，可能會執行屢次
            updated:function(el){

            }
        })


        // 這個vm就是MVVM中的VM，ViewModel
        var vm=new Vue({
         el: '#app',
        //  這個data就是MVVM中的M，Model
         data: {
             id:'',
             name:'',
             keywords:'', 
             list:[]
         },
         created() {
             //在Vue加載的時候執行
             this.getAllList()
         },
         methods: {
             getAllList(){
                this.$http.get('http://localhost/getAllList').then(result=>{
                    console.log(result)
                     //成功了的回調函數
                     if(result.status===200){
                         this.list=result.body
                     }
                     else{
                         alert('獲取數據失敗！')
                     }
                })
             },
             add(){
                 this.list.push({id:this.id,name:this.name,creattime:new Date().toLocaleString()})
             },
             del(id){
                var index=this.list.findIndex(item=>{
                    if(item.id==id)
                    return true
                })
                this.list.splice(index,1)
      
             },
             search(keywords){
                return this.list.filter(item=>{
                    if(item.name.includes(keywords))
                    return item
                })
             }

         },
         directives:{
             "color":{
                 bind:function(el,binding){
                     el.style.color=binding.value
                 }
             }
         }  

        })

    </script>

</body>
</html>

能夠看到我沒有使用假數據，使用了新學的vue-resource，get方式。這裏遭遇的跨域請求已經在上面解釋過了。