帮我写一个可查询的前后端可视化页面代码

好的，由于您没有说明具体的需求和技术栈，我可以为您提供一个简单的示例，使用React作为前端框架，Node.js和Express作为后端技术。

前端代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://localhost:5000/api/data?query=${query}`
      );
      setData(result.data);
    };
    fetchData();
  }, [query]);

  const handleChange = event => {
    setQuery(event.target.value);
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

后端代码：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Jim' }
];

app.get('/api/data', (req, res) => {
  const query = req.query.query;
  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );
  res.send(filteredData);
});

app.listen(5000, () => {
  console.log('Server listening on port 5000');
});

这个示例实现了一个简单的可查询列表页面，用户可以在文本框中输入查询条件，前端应用程序将使用Axios库向后端API发送请求，并将查询结果显示为一个列表。后端API将从一个硬编码的数据数组中过滤出符合查询条件的项，并将结果返回给前端应用程序。

注意，这只是一个简单的示例，实际应用程序可能需要更复杂的查询逻辑、分页和排序功能，以及更严格的数据验证和安全性措施。