Bisakah kita menghubungkan mysql dengan reactjs?

React adalah pustaka JavaScript yang deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna. CData Connect memungkinkan Anda membuat REST API untuk lusinan sumber data SaaS, Big Data, dan NoSQL. Artikel ini menjelaskan pengaturan CData Connect Server untuk membuat API OData untuk MySQL dan membuat aplikasi web React sederhana yang memiliki akses langsung ke data MySQL. Aplikasi React secara dinamis membangun dan mengisi tabel HTML berdasarkan data MySQL. Sementara artikel ini menelusuri sebagian besar kode, Anda dapat mengunduh proyek sampel React untuk melihat kode sumber lengkap dan menguji fungsionalitasnya sendiri

Konfigurasi Connect Server

Untuk bekerja dengan data MySQL langsung di aplikasi React kami, kami perlu terhubung ke MySQL dari Connect, memberikan akses pengguna ke database virtual baru, dan membuat titik akhir OData untuk data MySQL

Tambahkan Pengguna Terhubung

Buat Pengguna untuk terhubung ke MySQL dari Reveal melalui Connect

Klik Pengguna -> Tambah
Konfigurasikan Pengguna
Klik Simpan Perubahan dan catat Authtoken untuk pengguna baru

Hubungkan ke MySQL dari Connect

CData Connect menggunakan antarmuka langsung, tunjuk-dan-klik untuk terhubung ke sumber data dan menghasilkan API

Buka Connect dan klik Database
Pilih "MySQL" dari Sumber Data yang Tersedia
Masukkan properti otentikasi yang diperlukan untuk terhubung ke MySQL
Properti Server dan Port harus diatur ke server MySQL. Jika IntegratedSecurity disetel ke false, maka Pengguna dan Kata Sandi harus disetel ke kredensial pengguna yang valid. Opsional, Database dapat diatur untuk terhubung ke database tertentu. Jika tidak disetel, tabel dari semua database akan dikembalikan
Klik Uji Basis Data
Klik Privileges -> Tambah dan tambahkan pengguna baru (atau pengguna yang sudah ada) dengan izin yang sesuai (PILIH adalah semua yang diperlukan untuk Reveal)

Tambahkan MySQL OData Endpoints di Connect

Setelah terhubung ke MySQL, buat Titik Akhir OData untuk tabel yang diinginkan

Klik OData -> Tabel -> Tambahkan Tabel
Pilih database MySQL
Pilih tabel yang ingin Anda kerjakan dan klik Berikutnya
(Opsional) Edit definisi tabel untuk memilih kolom tertentu dan lainnya
Simpan pengaturan

Saat mengakses dan menghubungkan ke beberapa domain berbeda dari aplikasi seperti Ajax, ada kemungkinan melanggar batasan skrip lintas situs. Dalam hal ini, konfigurasikan pengaturan CORS di OData -> Pengaturan

Aktifkan berbagi sumber daya lintas asal (CORS). PADA
Izinkan semua domain tanpa '*'. PADA
Access-Control-Allow-Methods. DAPATKAN, PUT, POSTING, PILIHAN
Akses-Kontrol-Izinkan-Header. Otorisasi

Simpan perubahan ke pengaturan

Contoh URL untuk Umpan OData

Setelah Anda mengonfigurasi koneksi ke MySQL, membuat pengguna, dan membuat titik akhir OData di Connect Server, Anda dapat mengakses umpan OData untuk data MySQL. Di bawah, Anda akan melihat URL untuk mengakses tabel dan daftar tabel. Untuk informasi tentang mengakses tabel, Anda dapat membuka halaman API untuk Connect (klik tautan API di kanan atas halaman web Connect Server). Untuk URL, Anda memerlukan URL instance Connect, kemungkinan besar dalam formulir. https. // www. cdatacloud. net/myinstance/ atau http. // localhost. 8080. Karena kita bekerja dengan React, kita akan menambahkan parameter @json ke akhir URL yang tidak mengembalikan data JSON secara default

Hubungkan URL Server

TableURLEntity (tabel) Daftarhttps. // www. cdatacloud. net/myinstance/api. rsc/Metadata untuk Pesanan tabelhttps. // www. cdatacloud. net/myinstance/api. rsc/Orders/$metadata?@jsonOrdershttps. // www. cdatacloud. net/myinstance/api. rsc/MySQL_Orders

Hubungkan URL On-Prem (Server).

TableURLEntity (tabel) Daftarhttp. // localhost. 8080/odata. rsc/Metadata untuk tabel Pesananhttp. // localhost. 8080/odata. rsc/Orders/$metadata?@jsonOrdershttp. // localhost. 8080/odata. rsc/MySQL_Orders

Seperti umpan OData standar, jika Anda ingin membatasi bidang yang dikembalikan, Anda dapat menambahkan parameter $pilih ke kueri, bersama dengan parameter URL OData standar lainnya, seperti $filter, $orderby, $skip, dan $top. Lihat dokumentasi bantuan untuk informasi selengkapnya tentang kueri OData yang didukung

Membangun Aplikasi Web Bereaksi

Dengan selesainya pengaturan Connect Server, Anda siap untuk membuat contoh aplikasi React. Langkah-langkah berikut menelusuri file sumber untuk aplikasi React yang ada di dalam. zip, mencatat setiap bagian kode yang relevan

indeks. html

Ini adalah halaman beranda aplikasi web React sampel. Itu menyempurnakan kepala dan badan HTML dan mengidentifikasi wadah dan skrip untuk menampilkan aplikasi web

utama. js

File TypeScript ini mengimpor pustaka, modul, dan kelas React yang diperlukan. Properti, atau props, untuk kelas React utama juga ditentukan di sini

kemasan. json

File JSON ini berisi properti, termasuk dependensi, dari aplikasi React. File ini dihasilkan secara otomatis

webpack. config. js

File JavaScript ini menentukan berbagai konfigurasi untuk aplikasi React

Aplikasi. jsx

File XML JavaScript ini berisi kode yang diperlukan untuk membangun aplikasi React. Aplikasi kelas berisi semua fungsi yang diperlukan untuk mengambil data dari Connect Server dan merender berbagai bagian aplikasi React. Metode dijelaskan di bawah ini

konstruktor

Konstruktor kelas Aplikasi. Di dalamnya, state berisi data dinamis yang digunakan untuk membangun aplikasi web. Anda juga dapat mengikat metode lain pada ini sehingga Anda dapat memodifikasi status di dalam metode tersebut

  constructor(props) {
    super(props);

    this.state = {
      selectedTable: '',
      selectedColumns: [],
      tables: [],
      columns: [],
      tableData: [],
      auth: 'Basic ' + btoa(props.user + ':' + props.pass),
    };
    
    this.onTableChange = this.onTableChange.bind(this);
    this.onColumnChange = this.onColumnChange.bind(this);
    this.renderTableHeaders = this.renderTableHeaders.bind(this);
    this.renderTableBody = this.renderTableBody.bind(this);
    this.getColumnList = this.getColumnList.bind(this);
    this.getData = this.getData.bind(this);    
    
  }

componentDidMount

Sesuai spesifikasi React, metode componentDidMount dipanggil sebelum metode render dan dapat digunakan untuk memperbarui variabel status aplikasi, setelah konstruktor dijalankan. Dalam metode ini, Anda dapat mengirim permintaan HTTP ke Connect Server untuk daftar tabel dan mengatur tabel dan variabel status SelectTable

Dalam contoh, panggilan ke metode getColumnList mengambil daftar kolom yang tersedia untuk tabel pertama (dan saat ini dipilih)

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

getColumnList

Fungsi ini mengambil daftar kolom yang tersedia untuk parameter selectedTable (atau tabel yang saat ini dipilih di UI jika parameter tidak ditentukan). Itu melakukan permintaan HTTP dan mem-parsing respons, menyetel kolom dan status Kolom yang dipilih

  getColumnList(selectedTable) {
    if (!selectedTable) {
      selectedTable = this.state.selectedTable;
    }
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}/${selectedTable}/$metadata?@json`)
      .then(res => {
        let columns = res.data.items[0]["odata:cname"];
        this.setState({ 
          columns,
          selectedColumns: [], 
        });
      })
      .catch(error => {
        if (error.response) {
          alert('Code: '
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
  }

renderTableList

Fungsi ini menggunakan variabel status tabel untuk membangun opsi untuk pilihan drop-down HTML untuk memilih tabel

  renderTableList() {
    let tablesHTML = [];
    for (let i = 0; i < this.state.tables.length; i++) {
      let table = this.state.tables[i];
      tablesHTML.push();
    }
    return tablesHTML;
  }

renderColumnList

Fungsi ini menggunakan variabel status kolom untuk membangun opsi HTML multi-pilih untuk memilih kolom

  
  renderColumnList() {
    let columnsHTML = [];
    for (let i = 0; i < this.state.columns.length; i++){
      let column = this.state.columns[i];
      columnsHTML.push();
    }
    return columnsHTML;
  }

renderTable

Fungsi ini menyediakan kerangka kerja dasar untuk tabel HTML berdasarkan data yang diambil dari Connect Server. Ini menggunakan dua fungsi pembantu, renderTableHeaders() dan renderTableBody(), untuk membuat header tabel dan baris data

  

  renderTable() {
    return (
      
          { this.renderTableHeaders() }
        
        { this.renderTableBody() }
      
        
    );
  }

renderTableHeaders

Fungsi ini menggunakan variabel status SelectColumns untuk membangun header untuk tabel HTML yang digunakan untuk menampilkan data dari Connect Server

  renderTableHeaders() {
    let headers = [];
    for (let i = 0; i < this.state.selectedColumns.length; i++) {
      let col = this.state.selectedColumns[i];
      headers.push({col})
    }
    return ({headers});
  }

renderTableBody

Fungsi ini menggunakan variabel status tableData dan selectedColumns untuk membangun baris data untuk tabel HTML yang digunakan untuk menampilkan data dari Connect Server

  renderTableBody() {
    let rows = [];
    this.state.tableData.forEach(function(row) {
      rows.push(
        
          {this.state.selectedColumns.map(col =>
            {row[col]}
          )}
        
      )
    }.bind(this));
    return ({rows});
  }

getData

Fungsi ini mengambil data dari Connect Server, membuat daftar untuk parameter $select berdasarkan variabel status SelectColumns dan menggunakan variabel status SelectTable untuk menentukan dari tabel mana data diminta. Data yang dikembalikan oleh Connect Server disimpan dalam variabel status tableData

  getData() {
    let columnList = '';
    columnList = this.state.selectedColumns.join(',');
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}/${this.state.selectedTable}/?$select=${columnList}`)
      .then(res => {
        const tableData = res.data.value;
        this.setState({ tableData });
      })
      .catch(error => {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
  }

onTableChange

Fungsi ini menangani acara perubahan pada pemilihan tarik-turun HTML untuk memilih tabel. Dalam fungsi, variabel status SelectTable diatur ke nilai yang dipilih dan variabel status tableData dihapus dari semua nilai. Juga, panggilan ke fungsi getColumnList memperbarui elemen multi-pilihan HTML untuk memilih kolom

  onTableChange(event) {
    const selectedTable = event.target.value;
    this.setState({
      selectedTable,
      tableData: [],
    });
    this.getColumnList(selectedTable);
  }

onColumnChange

Fungsi ini menangani acara perubahan pada multi-pilihan HTML untuk memilih kolom yang akan diambil dan ditampilkan. Setelah menentukan kolom mana yang dipilih, variabel status SelectColumns diperbarui dan variabel status tableData dihapus

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

memberikan

Fungsi ini adalah fungsi yang mengontrol tata letak dan tampilan berbagai elemen HTML. Ini berisi semua fitur HTML statis, serta pemanggilan fungsi ke fungsi-fungsi yang merender elemen dinamis

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

Mengonfigurasi Aplikasi React

Dengan koneksi ke data yang dikonfigurasi dan file sumber untuk aplikasi React telah ditinjau, Anda sekarang siap untuk menjalankan aplikasi web React. Anda harus memiliki simpul. js diinstal pada mesin Anda untuk menjalankan aplikasi React. Ada beberapa modul yang juga harus Anda instal sebelum Anda dapat menjalankan aplikasi

Modul Global

Untuk menjalankan Aplikasi React, instal modul babel dan babel-cli secara global dari baris perintah

npm install -g babel
npm install -g babel-cli

Menyiapkan Proyek

Pada langkah selanjutnya, Anda akan mengatur proyek React Anda, membuat dan mengisi paket Anda. file json

Di baris perintah, navigasikan ke direktori dengan file sumber

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

Setelah berada di direktori, instal modul yang diperlukan menggunakan paket yang telah dikonfigurasi sebelumnya. file json

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

Menjalankan Aplikasi React

Sekarang Anda telah membuat paket Anda. json dan menginstal modul yang diperlukan, Anda siap menjalankan aplikasi React. Untuk melakukannya, Anda cukup menavigasi ke direktori untuk aplikasi React di antarmuka baris perintah dan menjalankan perintah berikut

  componentDidMount() {
    Object.assign(axios.defaults, {headers: {"x-cdata-authtoken": this.state.auth}});
    axios.get(`${this.props.baseUrl}`)
      .then(res => {
        const tables = res.data.value;
        this.setState({ tables });
        this.setState({ selectedTable: tables[0].name});
      })
      .catch(function (error) {
        if (error.response) {
          alert('Code: ' 
            + error.response.data.error.code 
            + '\r\nMessage: ' 
            + error.response.data.error.message);
        } else {
          console.log('Error', error.message);
        }
      });
    this.getColumnList();
  }

Saat aplikasi React diluncurkan, judul dan menu drop-down untuk memilih tabel ditampilkan. Daftar tabel diambil dari Connect Server dan menyertakan semua tabel yang Anda tambahkan sebagai titik akhir OData saat mengonfigurasi Connect Server

Saat Anda memilih tabel, menu drop-down, multi-pilih untuk kolom muncul, dan Anda kemudian dapat memilih kolom yang ingin Anda lihat di tabel Anda. Saat Anda memilih kolom, header tabel akan muncul

Setelah Anda memilih tabel dan kolom, Anda dapat mengklik tombol Get [Orders] Data untuk mengambil data dari database Anda melalui API Server. Tabel HTML akan diisi dengan data berdasarkan tabel dan kolom yang Anda pilih sebelum mengklik tombol

Uji Coba Gratis & Informasi Lebih Lanjut

Sekarang setelah Anda menyelesaikan langkah-langkah yang diperlukan untuk terhubung ke data database Anda di halaman web dinamis, daftar uji coba Connect Server untuk mulai membuat halaman web dinamis menggunakan data langsung dari sumber SaaS, Big Data, dan NoSQL berbasis cloud Anda, termasuk MySQL. Seperti biasa, tim dukungan kelas dunia kami siap menjawab pertanyaan apa pun yang mungkin Anda miliki

Bagaimana cara menghubungkan MySQL dengan React JS?

Cara mengimplementasikan server untuk aplikasi ReactJS dan MySQL .

Buat database untuk menyimpan catatan kami

Buat koneksi server ke DB

Tentukan endpoint untuk aplikasi CRUD

Buat aplikasi reaksi dan tentukan frontend

Integrasikan ujung depan dan ujung belakang

Bisakah kita menghubungkan React JS dengan database?

Backendless SDK untuk JavaScript memberi Anda semua yang Anda butuhkan untuk membuat backend untuk aplikasi React JS Anda. Anda dapat terhubung ke database waktu nyata dan mengelola akun pengguna. Anda bahkan dapat mengirim pemberitahuan push ke pengguna Anda.

Bisakah Anda menggunakan SQL dengan Bereaksi?

Aplikasi React secara dinamis membuat dan mengisi tabel HTML berdasarkan data SQL Analysis Services . Sementara artikel ini menelusuri sebagian besar kode, Anda dapat mengunduh proyek sampel React untuk melihat kode sumber lengkap dan menguji fungsionalitasnya sendiri.