axios獲取資料增刪改查

阿新 • • 發佈：2018-12-26

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./vue.js"></script>
  <!-- 1. 引入axios檔案 -->
  <script src="./axios.js" 
></script>
  <style>

    #app{
            width:600px;
                margin:10px auto;
        }
          .tb{
              border-collapse:collapse;
              width: 100%;
          }
          .tb th{
              background-color: #0094ff;
              color:white;
          }
  
          .tb td,.tb th 
{
              padding:5px;
              border:1px solid black;
              text-align: center;
          }
  
          .add{
              padding: 5px;
              border:1px solid black;
              margin-bottom: 10px;
          }
      </style>
</head>

<body>
  <div 
 id="app">
    <div class="add">
      編號:<input type="text" v-model="newId" id="myIdInput" ref="idRef">
      品牌名稱:<input type="text" v-model="newName" ref="nameRef">
      <input type="button" value="新增" @click="addData">
    </div>

    <div class="add">
      品牌名稱:<input type="text" placeholder="請輸入搜尋條件" v-model="searchName" @keydown.enter="search">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th>編號</th>
          <th>品牌名稱</th>
          <th>創立時間</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click="deleteData(item.id)">刪除</button>
          </td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="4">沒有品牌資料</td>
        </tr>
      </table>
    </div>
  </div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      newId: '',
      newName: '',
      list: [],
      searchName: '' //獲取搜尋的名字
    },
    methods: {
      // 新增資料
      addData() {
       let url = 'http://list'
       axios.post(url, {id: this.newId, name: this.newName, ctime: new Date()})
        .then(res => {
          // console.log(res);
          if(res.status === 201) {
            // 重新重新整理一下列表資料
            this.getList()
          }
        })
      },
      // 獲取列表資料方法
      getList() {
        let url = 'http://19st'
        // 呼叫axios的get方法，獲取資料
        axios.get(url)
          .then(res => {
            console.log(res);
            // 將獲取回來的資料賦值給list
            this.list = res.data
          })
          .catch(err => {
            console.log(err);
          })
      },
      // 搜尋方法
      search() {
        let url = 'http://1list'
        axios.get(url,{params: {name: this.searchName}})
          .then(res => {
            if (res.status === 200) {
              this.list = res.data
              this.searchName = ''
            }
          })
      },
      // 刪除方法
      deleteData(id) {
        let url = `http://19list/${id}`
        axios.delete(url)
          .then(res => {
            this.getList()
          })
      }
    },
    mounted () {
      this.getList()
    }
  })
</script>

</html>

axios獲取資料增刪改查

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport"

layui進行分頁處理，後端返回資料沒有count欄位，需要單獨獲取再新增到資料中，再進行項渲染，另有layui表格資料增刪改查前後端互動

整體效果圖如下：（1）分頁前端介面處理（2）分頁後端的資料處理具體程式碼如下：前端介面程式碼：包括分頁，增刪改查，重新整理（搜尋功能還沒做，後端是java程式碼） <!DOCTYPE html> <html> <hea

npm 安裝axios和使用增刪改查

del rom port import ole ror 功能 delet nbsp 1：安裝axios（建議安裝淘寶鏡像） npm install axios 2：項目導入 npm install --save axios vue-axios 3：頁面導入 import

MongoDB 資料庫建立刪除、表（集合）建立刪除、資料增刪改查

使用資料庫、建立資料庫 use student 如果真的想把這個資料庫建立成功，那麼必須插入一個數據。資料庫中不能直接插入資料，只能往集合(collections)中插入資料。不需要專門建立集合，只需要寫點語法插入資料就會建立集合插入資料： db.student.insert({“name”:”x

mysql筆記二之資料增刪改查

-- 資料增刪改查(curd) 1. -- 增加 insert -- 全列插入值和表的欄位的順序一一對應 -- insert [

spring data jpa之資料增刪改查程式碼優化

Spring data jpa為減少查詢資料庫次數,先將符合條件的資料查出來，返回的是一個list集合，遍歷集合將資料裝入map中，根據需要設定key,value,然後判斷map是否包含某個key或者value以此判斷資料是否在資料庫中已經存在。這樣減少了訪問資料庫的次數，減小了伺服器壓力，將大部分

Mybatis 學習筆記——原生DAO實現資料增刪改查

一、開發環境 JDK java version “1.8.0_171” Java™ SE Runtime Environment (build 1.8.0_171-b11) Java HotSpot™ 64-Bit Server VM (build 25.1

Mybatis 學習筆記（三）——使用Mapper代理的方式實現資料增刪改查

一、介紹 Mapper代理的方式只需要程式設計師編寫 Mapper.xml 檔案及 Mapper介面。本文是基於上一篇文章：Mybatis 學習筆記——原生DAO實現資料增刪改查，所以接下來的內容是以其為基礎的，如果有什麼不懂的請留言或檢視上一篇。所

jquery的資料增刪改查（全選，反選，全不選，批量刪除，新增資訊）

效果圖如下： html程式碼如下： <body> <div class="btn"> <button class="seleAll">全選</button> <button class="allDe

MongoDB 資料庫建立刪除、表（集合）建立刪除、資料增刪改查

資料庫使用開啟 mongodb 服務：要管理資料庫，必須先開啟服務，開啟服務使用 mongod --dbpath D:\mongodb 管理 mongodb 資料庫：mongo (一定要在新的 cmd 中輸入) 清屏： cls

node+express+mysql實現簡單的資料增刪改查

安裝node mysql 就不說了，自己查一下資料， 1.安裝express命令如下： $ npm install -g express-generator #需先安裝express-generator $ npm install -g express $ ex

php簡單的資料增刪改查

列表頁程式碼： <?php //連線資料庫 $db = new MySQLi('localhost','root','','z_1032'); !mysql_connect_error() or die('連線失敗'); $db->query('set names utf8'); //

資料庫連線：操作資料增刪改查

<?php $db = new MySQLi("localhost","root","12345678","heiheihei"); //連線資料庫 $sql = "select * from student "; //寫sql語句 $r = $db->query($sql); //執行sql語

jeesite應用實戰（資料增刪改查），認真讀完後10分鐘就能開發一個模組

jeesite配置指南（官方文件有坑，我把坑填了！）這篇文章裡，我主要把jeesite官方給出的幫助文件的坑填了，按照裡面的方法可以搭建起來jeesite的站點。系統可以執行以後，就可以進入開發模組了，我們先從資料的增刪改查做起。一、頁面效果很

SpringMVC表單資料增刪改查簡易梳理（含例項程式碼）

使用SpringMVC建立表單進行資料的增刪改查是javaEE開發的基本功，本人根據自己最近開發的基於jeecms框架的網站平臺來梳理資料增刪改查的思路。首先根據所需表單頁面設計資料庫，定義不同欄位的資料型別和長度，若存在多張資料表，還需設計不同表間的

使用CoreData進行資料增刪改查（附Demo）

本文主要介紹簡單CoreData的使用，從建立工程到進行資料的增刪改查，關於CoreData中的名詞解釋什麼的不做過多介紹。首先，建立一個CoreData工程，在建立工程的選項處勾選Use CoreData，建立成功後，會在AppDelegat

安卓備忘錄，資料增刪改查

1AddActivity.java package com.example.administrator.myapplication_s; import android.app.Activity; import android.content.Intent;

【PostgreSQL】PostgreSQL hstore型別資料增刪改查

1、登陸資料庫 psql -U postgres -d postgres 2、建立資料庫hstore，並安裝extensio

Android實戰——第三方服務之Bmob後端雲的增刪改查、上傳文件、獲取文件、修改密碼（二）

tid blank 生成 src 上傳圖片放置第三方 b數 net 第三方服務之Bmob後端雲的增刪改查、上傳文件、獲取文件、修改密碼（二）事先說明：這裏的一切操作都是在集成了BmobSDK之後實現的，如果對Bmob還不了解的話，請關註我第一篇Bmob文章步

mysql-3 資料表的建立、增刪改查

建立資料表通用語法：CREATE TABLE table_name (column_name column_type); CREATE TABLE IF NOT EXISTS `csj_tbl`( `csj_id` INT UNSIGNED AUTO_INCREMENT, `csj_ti

axios獲取資料 增刪改查

相關推薦

axios獲取資料增刪改查