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
(Opsional) Mengonfigurasi Cross-Origin Resource Sharing (CORS)
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_OrdersHubungkan 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_OrdersSeperti 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
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(); } _0memberikan
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(); } _1Mengonfigurasi 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(); } _2Setelah 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(); } _3
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(); } _4Saat 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