### Django 和 Vue3 中实现带查询结果跳转的功能 在 Django 和 Vue3 的组合中，要实现带有查询结果的页面跳转功能，通常涉及前端发送请求、后端处理逻辑以及返回数据的过程。以下是具体的解决方案和示例代码。 #### 后端 (Django) 后端主要负责接收来自前端的查询参数，并根据这些参数从数据库中检索相应的数据。以下是一个简单的 Django 视图函数示例： ```python from django.http import JsonResponse from .models import StockInfo # 假设有一个名为StockInfo的模型 def search_stock(request): query_param = request.GET.get('query', '') # 获取查询参数 if not query_param: return JsonResponse({'error': 'Query parameter is required'}, status=400) results = list(StockInfo.objects.filter(stock_code__icontains=query_param).values()) # 查询匹配的数据 return JsonResponse({'results': results}) # 返回JSON响应 ``` 此视图会接受一个 `GET` 请求，并从中提取查询参数 `query` 来过滤数据库中的股票信息[^1]。 #### 前端 (Vue3) 前端则需要构建一个表单供用户输入查询条件，并通过 Axios 发送 HTTP 请求至后端 API 接口。当接收到查询结果时，可以将其渲染到页面上或者触发页面跳转。 下面是一段完整的 Vue3 组件代码示例： ```vue <template> <div> <input type="text" v-model="searchTerm" placeholder="Enter stock code..." /> <button @click="handleSearch">Search</button> <!-- 显示搜索结果 --> <ul v-if="stockResults.length"> <li v-for="(result, index) in stockResults" :key="index"> {{ result.stock_code }} - {{ result.company_name }} <router-link :to="{ name: 'DetailPage', params: { id: result.id } }">View Details</router-link> </li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { searchTerm: '', stockResults: [] }; }, methods: { async handleSearch() { try { const response = await axios.get('/api/search-stock/', { params: { query: this.searchTerm } }); this.stockResults = response.data.results; } catch (error) { console.error('Error fetching stock information:', error); } } } }; </script> ``` 在此组件中，用户可以在文本框中输入想要查询的内容，点击按钮之后调用方法向服务器发起请求并解析返回的结果。如果存在多个符合条件的条目，则会在下方逐一列出；每一条都附有链接指向详情页[^2]。 #### 页面路由配置 为了使上述 `<router-link>` 正常工作，还需要定义好应用内的路由规则。假设使用的是 Vue Router，在其配置文件里应加入如下片段： ```javascript const routes = [ { path: '/detail/:id', name: 'DetailPage', component: () => import('./components/Detail.vue') // 动态加载目标组件 } ]; ``` 这样就可以确保点击任意一项后的超链都能正确导航至对应的详细资料界面[^3]。 --- ###