Mongodb lưu trữ dữ liệu từ phản ứng như thế nào?
|
React là một thư viện JavaScript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng. CData Connect cho phép bạn tạo API REST cho hàng chục nguồn dữ liệu SaaS, Dữ liệu lớn và NoQuery. Bài viết này hướng dẫn cách thiết lập Máy chủ kết nối CData để tạo API OData cho MongoDB và tạo một ứng dụng web React đơn giản có quyền truy cập trực tiếp vào dữ liệu MongoDB. Ứng dụng React tự động xây dựng và điền vào bảng HTML dựa trên dữ liệu MongoDB. Trong khi bài viết trình bày hầu hết các mã, bạn có thể tải xuống dự án React mẫu để xem toàn bộ mã nguồn và tự mình kiểm tra chức năng Show
Cấu hình máy chủ kết nốiĐể làm việc với dữ liệu MongoDB trực tiếp trong ứng dụng React của chúng tôi, chúng tôi cần kết nối với MongoDB từ Connect, cung cấp cho người dùng quyền truy cập vào cơ sở dữ liệu ảo mới và tạo điểm cuối OData cho dữ liệu MongoDB Thêm người dùng kết nốiTạo Người dùng để kết nối với MongoDB từ Reveal qua Connect
Kết nối với MongoDB từ ConnectCData Connect sử dụng giao diện trỏ và nhấp đơn giản để kết nối với các nguồn dữ liệu và tạo API
Thêm các điểm cuối OData MongoDB trong Kết nốiSau khi kết nối với MongoDB, hãy tạo Điểm cuối OData cho (các) bảng mong muốn
(Tùy chọn) Định cấu hình Chia sẻ tài nguyên gốc chéo (CORS)Khi truy cập và kết nối với nhiều miền khác nhau từ một ứng dụng như Ajax, có khả năng vi phạm các giới hạn của cross-site scripting. Trong trường hợp đó, hãy định cấu hình cài đặt CORS trong OData -> Cài đặt
Lưu các thay đổi vào cài đặt URL mẫu cho nguồn cấp dữ liệu ODataKhi bạn đã định cấu hình kết nối với MongoDB, tạo người dùng và tạo điểm cuối OData trong Connect Server, bạn có thể truy cập nguồn cấp dữ liệu OData cho dữ liệu MongoDB. Dưới đây, bạn sẽ thấy các URL để truy cập các bảng và danh sách các bảng. Để biết thông tin về cách truy cập các bảng, bạn có thể điều hướng đến trang API cho Connect (nhấp vào liên kết API ở trên cùng bên phải của trang web Connect Server). Đối với các URL, bạn sẽ cần URL của phiên bản Kết nối, có thể ở dạng. https. //www. cdatacloud. net/myinstance/ hoặc http. //máy chủ cục bộ. 8080. Vì chúng tôi đang làm việc với React, chúng tôi sẽ thêm tham số @json vào cuối các URL không trả về dữ liệu JSON theo mặc định Kết nối URL máy chủTableURLDanh sách thực thể (bảng)https. //www. cdatacloud. net/myinstance/api. rsc/Siêu dữ liệu cho các nhà hàng trên bànhttps. //www. cdatacloud. net/myinstance/api. rsc/restaurants/$metadata?@jsonrestaurantshttps. //www. cdatacloud. net/myinstance/api. rsc/MongoDB_restaurantsKết nối URL tại chỗ (máy chủ)TableURLEntity (bảng) Listhttp. //máy chủ cục bộ. 8080/dữ liệu. rsc/Siêu dữ liệu cho bảng nhà hànghttp. //máy chủ cục bộ. 8080/dữ liệu. rsc/nhà hàng/$metadata?@jsonrestaurantshttp. //máy chủ cục bộ. 8080/dữ liệu. rsc/MongoDB_restaurantNhư với các nguồn cấp dữ liệu OData tiêu chuẩn, nếu bạn muốn giới hạn các trường được trả về, bạn có thể thêm tham số $select vào truy vấn, cùng với các tham số URL OData tiêu chuẩn khác, chẳng hạn như $filter, $orderby, $skip và $top. Xem tài liệu trợ giúp để biết thêm thông tin về các truy vấn OData được hỗ trợ Xây dựng ứng dụng web ReactSau khi thiết lập Connect Server hoàn tất, bạn đã sẵn sàng xây dựng ứng dụng React mẫu. Các bước sau đây sẽ xem qua các tệp nguồn cho ứng dụng React có trong. zip, ghi chú mọi phần mã có liên quan mục lục. htmlĐây là trang chủ của ứng dụng web React mẫu. Nó bổ sung phần đầu và phần thân HTML, đồng thời xác định vùng chứa và tập lệnh để hiển thị ứng dụng web chủ yếu. jsTệp TypeScript này nhập các thư viện, mô-đun và lớp React cần thiết. Các thuộc tính hoặc props cho lớp React chính cũng được định nghĩa ở đây bưu kiện. jsonTệp JSON này chứa các thuộc tính, bao gồm các phần phụ thuộc, của ứng dụng React. Tệp này được tạo tự động gói web. cấu hình. jsTệp JavaScript này xác định các cấu hình khác nhau cho ứng dụng React Ứng dụng. jsxTệp XML JavaScript này chứa mã cần thiết để xây dựng ứng dụng React. Lớp Ứng dụng chứa tất cả các chức năng cần thiết để truy xuất dữ liệu từ Connect Server và hiển thị các phần khác nhau của ứng dụng React. Các phương pháp được mô tả dưới đây người xây dựngHàm tạo của lớp Ứng dụng. Trong đó, state chứa dữ liệu động dùng để build web app. Bạn cũng có thể liên kết các phương thức khác với điều này để bạn có thể sửa đổi trạng thái trong các phương thức đó 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);
}
thành phầnDidMountTheo đặc tả React, phương thức componentDidMount được gọi trước phương thức kết xuất và có thể được sử dụng để cập nhật các biến trạng thái của ứng dụng, sau khi hàm tạo đã chạy. Trong phương pháp này, bạn có thể gửi yêu cầu HTTP đến Connect Server để biết danh sách các bảng và đặt các bảng cũng như các biến trạng thái của Bảng đã chọn Trong mẫu, lệnh gọi phương thức getColumnList sẽ truy xuất danh sách các cột có sẵn cho bảng đầu tiên (và hiện được chọn) 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();
}
getColumnListHàm này truy xuất danh sách các cột có sẵn cho tham số đã chọnTable (hoặc bảng hiện được chọn trong giao diện người dùng nếu tham số không được xác định). Nó thực hiện yêu cầu HTTP và phân tích cú pháp phản hồi, thiết lập các cột và trạng thái SelectColumns 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);
}
});
}
kết xuấtTableListHàm này sử dụng biến trạng thái bảng để xây dựng các tùy chọn cho trình đơn thả xuống HTML chọn để chọn bảng renderTableList() {
let tablesHTML = [];
for (let i = 0; i < this.state.tables.length; i++) {
let table = this.state.tables[i];
tablesHTML.push();
}
return tablesHTML;
}
kết xuấtColumnListHàm này sử dụng biến trạng thái cột để xây dựng các tùy chọn cho đa lựa chọn HTML để chọn cột
renderColumnList() {
let columnsHTML = [];
for (let i = 0; i < this.state.columns.length; i++){
let column = this.state.columns[i];
columnsHTML.push();
}
return columnsHTML;
}
kết xuấtBảngChức năng này cung cấp khung cơ bản cho bảng HTML dựa trên dữ liệu được lấy từ Connect Server. Nó sử dụng hai hàm trợ giúp, renderTableHeaders() và renderTableBody(), để xây dựng tiêu đề bảng và hàng dữ liệu
renderTable() {
return (
{ this.renderTableHeaders() }
{ this.renderTableBody() }
);
}
renderTableHeadersHàm này sử dụng biến trạng thái SelectedColumns để xây dựng các tiêu đề cho bảng HTML được sử dụng để hiển thị dữ liệu từ 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});
}
kết xuấtTableBodyHàm này sử dụng các biến trạng thái tableData và selectColumns để xây dựng các hàng dữ liệu cho bảng HTML được sử dụng để hiển thị dữ liệu từ Connect Server
renderTableBody() {
let rows = [];
this.state.tableData.forEach(function(row) {
rows.push(
{this.state.selectedColumns.map(col =>
{row[col]}
)}
)
}.bind(this));
return ({rows});
}
lấy dữ liệuHàm này truy xuất dữ liệu từ Connect Server, xây dựng danh sách cho tham số $select dựa trên biến trạng thái được chọnColumns và sử dụng biến trạng thái được chọnBảng để xác định bảng nào sẽ yêu cầu dữ liệu từ đó. Dữ liệu do Connect Server trả về được lưu trữ trong biến trạng thái tableData ________số 8onTableChangeChức năng này xử lý sự kiện thay đổi trên trình đơn thả xuống HTML chọn để chọn bảng. Trong hàm, biến trạng thái selectTable được đặt thành giá trị đã chọn và biến trạng thái tableData bị xóa tất cả các giá trị. Ngoài ra, lệnh gọi hàm getColumnList cập nhật phần tử đa lựa chọn HTML để chọn cột onTableChange(event) {
const selectedTable = event.target.value;
this.setState({
selectedTable,
tableData: [],
});
this.getColumnList(selectedTable);
}
onColumnChangeChức năng này xử lý sự kiện thay đổi trên đa lựa chọn HTML để chọn các cột để truy xuất và hiển thị. Sau khi xác định cột nào được chọn, biến trạng thái SelectColumns được cập nhật và biến trạng thái tableData bị xóa 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();
}
0kết xuấtChức năng này là chức năng kiểm soát bố cục và hiển thị của các phần tử HTML khác nhau. Nó chứa tất cả các tính năng HTML tĩnh, cũng như các lời gọi hàm đến các hàm đó để hiển thị các phần tử động. 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();
}
1Định cấu hình ứng dụng ReactSau khi kết nối với dữ liệu được định cấu hình và các tệp nguồn cho ứng dụng React đã được xem xét, giờ đây bạn đã sẵn sàng để chạy ứng dụng web React. Bạn cần phải có nút. js được cài đặt trên máy của bạn để chạy ứng dụng React. Có một số mô-đun mà bạn cũng cần cài đặt trước khi có thể chạy ứng dụng Mô-đun toàn cầuĐể chạy Ứng dụng React, hãy cài đặt các mô-đun babel và babel-cli trên toàn cầu từ dòng lệnh
Thiết lập dự ánTrong các bước tiếp theo, bạn sẽ thiết lập dự án React của mình, tạo và điền vào gói của bạn. tập tin json
Chạy ứng dụng ReactBây giờ bạn đã tạo gói của mình. json và cài đặt các mô-đun cần thiết, bạn đã sẵn sàng chạy ứng dụng React. Để làm như vậy, bạn chỉ cần điều hướng đến thư mục cho ứng dụng React trong giao diện dòng lệnh và thực hiện lệnh sau 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();
}
4Khi ứng dụng React khởi chạy, tiêu đề và menu thả xuống để chọn bảng sẽ hiển thị. Danh sách các bảng được truy xuất từ Máy chủ kết nối và bao gồm tất cả các bảng bạn đã thêm làm điểm cuối OData khi định cấu hình Máy chủ kết nối Khi bạn chọn một bảng, menu thả xuống, nhiều lựa chọn cho các cột sẽ xuất hiện và sau đó bạn có thể chọn các cột bạn muốn xem trong bảng của mình. Khi bạn chọn cột, tiêu đề bảng sẽ xuất hiện Sau khi chọn bảng và cột, bạn có thể nhấp vào nút Lấy dữ liệu [nhà hàng] để truy xuất dữ liệu từ cơ sở dữ liệu của mình qua Máy chủ API. Bảng HTML sẽ được điền dữ liệu dựa trên bảng và cột bạn đã chọn trước khi nhấp vào nút Dùng thử miễn phí và biết thêm thông tinBây giờ bạn đã hoàn thành các bước cần thiết để kết nối với dữ liệu cơ sở dữ liệu của mình trong các trang web động, hãy đăng ký dùng thử Connect Server để bắt đầu xây dựng các trang web động bằng cách sử dụng dữ liệu trực tiếp từ các nguồn SaaS, Dữ liệu lớn và NoSQL dựa trên đám mây của bạn, bao gồm cả MongoDB. Như mọi khi, nhóm hỗ trợ đẳng cấp thế giới của chúng tôi sẵn sàng trả lời bất kỳ câu hỏi nào của bạn Làm cách nào để đăng dữ liệu trong MongoDB bằng ReactJS?Làm cách nào để gửi dữ liệu từ React tới MongoDB? . ứng dụng. post('/stored', (req, res) => { bảng điều khiển. nhật ký (yêu cầu. thân thể); db. bộ sưu tập ('dấu ngoặc kép'). insertOne(req. nội dung, (lỗi, dữ liệu) => { if(err) trả lại bảng điều khiển. nhật ký (err); độ phân giải. gửi(('đã lưu vào db. ' + dữ liệu)); MongoDB có hoạt động với React không?Trước hết, chúng tôi không thể kết nối React JS với MongoDB vì mọi thứ không hoạt động như thế này. Đầu tiên, chúng tôi tạo một ứng dụng phản ứng, sau đó để bảo trì phụ trợ, chúng tôi tạo API trong nút. js và thể hiện. js đang chạy ở một cổng khác và ứng dụng phản ứng của chúng tôi đang chạy ở một cổng khác.
React lưu trữ dữ liệu trong cơ sở dữ liệu như thế nào?Bằng cách điều hướng đến Ứng dụng React của mình, chúng ta có thể chạy đoạn mã sau trong bảng điều khiển dành cho nhà phát triển để xem liệu có thể gửi yêu cầu thành công tới máy chủ hay không. const addRecordEndpoint = "http. //máy chủ cục bộ. 5000/postData"; tùy chọn const = { phương thức. 'POST', tiêu đề. { 'Loại nội dung'. 'ứng dụng/json' }, nội dung. JSON .
MongoDB lưu trữ dữ liệu như thế nào?MongoDB lưu trữ các đối tượng dữ liệu trong các bộ sưu tập và tài liệu thay vì các bảng và hàng được sử dụng trong cơ sở dữ liệu quan hệ truyền thống. Bộ sưu tập bao gồm các bộ tài liệu, tương đương với các bảng trong cơ sở dữ liệu quan hệ. Tài liệu bao gồm các cặp khóa-giá trị, là đơn vị dữ liệu cơ bản trong MongoDB. |
