JSP 简单的layout例子

首先,在WEB-INF目录下新建tags目录,然后,在tags目录下新建文件mainLayout.tag

内容为:

<%@tag pageEncoding="UTF-8"%>
<%@tag trimDirectiveWhitespaces="true"%>
<%@tag body-content="scriptless"%>
<%@ attribute name="title" required="true" type="java.lang.String" %>
<c:set var="rootpath" value="${ pageContext.request.contextPath}" scope="request" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${ title}</title>
<link rel="stylesheet" type="text/css" href="${ rootpath}/res/css/cloud.css" />
<script type="text/javascript" src="${ rootpath}/res/js/cloud.js"></script>
</head>

<body>
<div class="main">
	<div class="top">this is my first layout jsp</div>
	<div class="mbody">
		<jsp:doBody></jsp:doBody>
	</div>
	<div class="bright">
		this is bottom for page
	</div>
</div>
</body>
</html>

这里还需要引入jstl的标签(PS: 这鸟博客提示有非法的uri)


使用:

在其他的jsp页面中,就可以用如下方式引用了

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ot" tagdir="/WEB-INF/tags" %>
<ot:mainLayout title="腾讯首页">
	<h1>this is layout display centent</h1>
</ot:mainLayout>




 
### 在 JSP 项目中集成和使用 ElementUI 组件 #### 创建 Vue 实例并引入 ElementUI 库 为了在传统的 Java Server Pages (JSP) 中利用现代前端框架的功能,可以采用一种混合方式。具体来说,在 JSP 页面内嵌入一个独立的 Vue.js 单页应用(SPA),并通过这种方式间接地使用 ElementUI。 首先,确保已经在 HTML 文件头部包含了必要的 JavaScript 和 CSS 资源链接: ```html <!-- 引入样式 --> <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="//unpkg.com/element-ui/lib/index.js"></script> ``` 接下来定义一个容器 div 来承载 Vue 应用实例,并设置 id 属性以便于后续挂载: ```html <div id="app"> <!-- 这里放置 Element UI 的组件模板 --> </div> ``` 随后初始化一个新的 Vue 实例并将它绑定到上述指定的选择器上;同时注册所需的 ElementUI 组件: ```javascript new Vue({ el: '#app', components: { 'el-button': ElButton, 'el-table': ElTable, 'el-pagination': ElPagination, // 注册其他所需组件... }, data() { return {}; } }); ``` 对于更复杂的场景,建议将整个 SPA 封装在一个单独的 .js 或者 .vue 文件中,再通过 `<script>` 标签导入该脚本文件[^1]。 #### 使用 ElementUI 表格组件作为例子展示数据列表 假设有一个简单的用户表单提交功能需求,下面给出一段完整的代码片段用来说明如何结合 JSP 后端逻辑与前端视图呈现效果: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ElementUI Table Example in JSP</title> <!-- 引入样式 --> <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css"/> <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script type="application/javascript" src="//unpkg.com/element-ui/lib/index.js"></script> <style scoped> /* 自定义样式 */ </style> </head> <body> <h2>User List Page</h2> <!-- 定义 vue app container --> <div id="userListApp"> <template v-if="loading">Loading...</template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" width="180"></el-table-column> <el-table-column prop="name" label="Name" width="180"></el-table-column> <el-table-column prop="email" label="Email"></el-table-column> </el-table> <el-pagination layout="prev, pager, next" @current-change="handlePageChange" :total="totalCount"></el-pagination> </div> <script type="application/javascript"> var userListApp = new Vue({ el: '#userListApp', data () { return { loading: false, tableData: [], totalCount: 0 }; }, methods:{ handlePageChange(page){ this.loading=true; fetch('/your-servlet-url?page=' + page) .then(response => response.json()) .then(data => { this.tableData=data.items; this.totalCount=data.totalItems; this.loading=false; }); } }, mounted(){ this.handlePageChange(1); } }) </script> </body> </html> ``` 这段代码展示了如何创建一个基于 JSP 技术栈的应用程序,并成功集成了来自 ElementUI 的表格组件来显示从服务器获取的数据集合。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值