re.findall('<script id="RENDER_DATA" type="application/json">(.*?)</script>', response)[0]
时间: 2023-12-20 18:04:18 浏览: 10
这段代码使用了正则表达式模块的 re.findall() 函数来匹配 HTML 页面中与给定正则表达式相匹配的所有子字符串,并返回一个列表。在这个例子中,正则表达式用于匹配包含特定 ID 的 script 标签,并提取其中的 JSON 数据。由于返回的是一个列表,因此我们需要使用 [0] 来获取第一个匹配项,也就是我们需要的 JSON 数据。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/BookShopSystem_war/layui/css/layui.css"> <link rel="stylesheet" href="/BookShopSystem_war/static/css/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div class="layui-container"> <div class="hot-sell" v-if="bookAll.length > 0"> <div class="layui-row layui-col-space20"> <table> <tr> <td v-for="(bk,index) in currentBookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px"> <a :href="'detail?id='+bk.bookId" class="text"> <div><img :src="'/BookShopSystem_war/' + bk.image1"></div> <p>{{bk.bookName}}</p> <p class="price">¥{{bk.bookPrice}}</p> </a> </td> </tr> </table> </div> </div> </div> <div id="houseList"></div> </div> <!-- 引入尾部footer.html --> <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> </div> <script src="/BookShopSystem_war/layui/layui.js"></script>这是完整的html代码,请结合你给出的分页功能整合出完整的代码
好的,以下是结合分页功能的完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书商城-图书列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/BookShopSystem_war/layui/css/layui.css">
<link rel="stylesheet" href="/BookShopSystem_war/static/css/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="layui-container">
<div class="hot-sell" v-if="bookAll.length > 0">
<div class="layui-row layui-col-space20">
<table>
<tr>
<td v-for="(bk,index) in currentBookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px">
<a :href="'detail?id='+bk.bookId" class="text">
<div><img :src="'/BookShopSystem_war/' + bk.image1"></div>
<p>{{bk.bookName}}</p>
<p class="price">¥{{bk.bookPrice}}</p>
</a>
</td>
</tr>
</table>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<div id="pagination"></div>
</div>
</div>
</div>
<div id="houseList"></div>
<!-- 引入尾部footer.html -->
<iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe>
</div>
<script src="/BookShopSystem_war/layui/layui.js"></script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
var vm = new Vue({
el: '#app',
data: {
bookAll: [],
current: 1,
totalPage: 1,
currentBookAll: []
},
mounted: function() {
var _this = this;
axios.get('/BookShopSystem_war/book/all')
.then(function(response) {
_this.bookAll = response.data;
_this.totalPage = Math.ceil(_this.bookAll.length / 10);
_this.currentBookAll = _this.bookAll.slice(0, 10);
laypage.render({
elem: 'pagination',
count: _this.bookAll.length,
curr: _this.current,
limit: 10,
layout: ['prev', 'page', 'next', 'skip'],
jump: function(obj, first){
if(!first){
_this.currentBookAll = _this.bookAll.slice((obj.curr-1)*obj.limit, obj.curr*obj.limit);
}
}
});
})
.catch(function(error) {
console.log(error);
});
}
});
});
</script>
</body>
</html>
注意:这里的分页功能使用了 layui 的 laypage 组件,需要在页面中引入 layui.js 和 layui.css,并且需要在 Vue 的 mounted 钩子函数中调用 laypage.render() 方法来渲染分页组件。同时,需要注意在分页回调函数中更新当前显示的数据。
const Container: React.FC<{}> = () => { return ( <> <HashRouter> <Routes> <Route path="/" element={ <Suspense fallback={<div />}> <Entry /> </Suspense> } /> <Route path="*" element={<Navigate to="/" />} /> </Routes> </HashRouter> <Toaster /> </> ); }; createRoot(document.getElementById("root")).render(<Container />);
根据你提供的代码,出现这个错误的原因可能是因为 `document.getElementById("root")` 返回了 null,导致 `createRoot()` 方法找不到有效的 DOM 元素来渲染。
你可以在调用 `createRoot()` 方法之前,先确保 "root" 元素已经被正确挂载到了 DOM 树上。例如,在 HTML 文件中添加一个 `<div id="root"></div>` 元素,然后再使用 `createRoot()` 方法进行渲染。
如果你已经确认 "root" 元素已经被正确挂载到了 DOM 树上,那么你可以尝试使用 `ReactDOM.render()` 方法来替代 `createRoot()` 方法,看看是否能够解决这个问题。例如,可以将 `createRoot(document.getElementById("root")).render(<Container />)` 替换为 `ReactDOM.render(<Container />, document.getElementById("root"))`。
希望这些方法可以帮助你解决问题。