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方式。这里遭遇的跨域请求已经在上面解释过了。

效果图

看看效果图

已经成功的从后台获取了数据，其实很简单，获取数据的接口已经完成了，那么接下来的删除，增长也很简单。

待续

待续...

我忽然发现vue-resource已经不被官方推荐了....官方推荐的是axios.....

这篇文章我仍是按照vue-resource来一个完整的增删改查，而后axios也来一版吧

防盗连接：本博客由蜀云泉发表