10.EL入门:format

本文演示了如何使用JSTL标签库进行简单的页面输出和日期格式化操作,包括设置日期格式样式,并展示了不同格式化选项的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="javax.sql.DataSource"%>
<%@page import="javax.naming.InitialContext"%>
<%@page import="javax.naming.Context"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>测试JSTL</title>
	</head>
	
	<body>
		<c:out value="测试JSTL"></c:out><br/>
		<%
			Date now = new Date();
			String nowDate  = new SimpleDateFormat("yyyy.MM.dd HH:mm:ss").format(now);
			session.setAttribute("nowDate", nowDate);
		%>
		${sessionScope.nowDate }
	</body>
</html>


<fmt:formatDate value="${isoDate}" type="both"/>
2009-5-31 23:59:59 


<fmt:formatDate value="${date}" type="date"/>
2009-4-1

<fmt:formatDate value="${isoDate}" type="time"/>
23:59:59

<fmt:formatDate value="${isoDate}" type="date" dateStyle="default"/>
2009-5-31

<fmt:formatDate value="${isoDate}" type="date" dateStyle="short"/>
04-5-31

<fmt:formatDate value="${isoDate}" type="date" dateStyle="medium"/>
2009-5-31

<fmt:formatDate value="${isoDate}" type="date" dateStyle="long"/>
2009年5月31日

<fmt:formatDate value="${isoDate}" type="date" dateStyle="full"/>
2009年5月31日 星期一

<fmt:formatDate value="${isoDate}" type="time" timeStyle="default"/>
23:59:59

<fmt:formatDate value="${isoDate}" type="time" timeStyle="short"/>
下午11:59

<fmt:formatDate value="${isoDate}" type="time" timeStyle="medium"/>
23:59:59

<fmt:formatDate value="${isoDate}" type="time" timeStyle="long"/>
下午11时59分59秒

<fmt:formatDate value="${isoDate}" type="time" timeStyle="full"/>
下午11时59分59秒 CDT

<fmt:formatDate value="${isoDate}" type="both" pattern="yyyy.MM.dd HH:mm:ss EE"/>
2012.08.14 10:37:36 星期二



<template> <div> <el-dialog :title="type === 'add' ? '新增' : '修改'" :visible="dialogVisible" width="570px" top="20px" @close="close" > <el-form ref="addEditDataRef" :model="addEditData" :rules="rules" label-width="140px" > <el-form-item label="合集名称" prop="name"> <el-input v-model="addEditData.name" placeholder="请输入课程合集名称" clearable maxlength="50" show-word-limit /> </el-form-item> <el-form-item prop="img" label="插图"> <img-upload :img.sync="addEditData.img" accept="jpg,png,jpeg" tips="上传插图" :scale="[670, 500]" is-style /> </el-form-item> <div style="display: flex; width: 100%"> <el-form-item label="添加课程" prop="classIdList" /> <el-button type="primary" class="top-left-btn" icon="el-icon-plus" @click="addClick" > 添加课程 </el-button> </div> <div v-for="item in courseList" :key="item.index" style="display: flex" class="course-item" > <!-- <div class="course-index">{{ index + 1 }}</div> --> <div>{{ item.section }}</div> <div style="display: flex; align-items: center; gap: 10px" class="cover-container" > <div class=""> <img :src="item.img" alt="课程封面" class="cover-img" /> </div> <div style="width: 300px">{{ item.name }}</div> <span> <el-button type="text" size="small" icon="el-icon-rank" class="add-btn" @click="handleAdd(item)" /> <span> <el-button type="text" size="small" icon="el-icon-delete" class="add-btn" @click="handleAdd(item)" /> </span> </span> </div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="close">取 消</el-button> <el-button type="primary" @click="save">确 定</el-button> </div> </el-dialog> <div> <!-- 表格 --> <el-dialog title="选择课程" :visible="dialogCourse" width="1600px" top="20px" @close="closeCourse" > <div class="search-group mb-20"> <el-input v-model="searchText" placeholder="请输入搜索内容" suffix-icon="el-icon-search" clearable style="width: 300px; float: right; margin: 10px 0" @keyup.enter.native="handleSearch" /> <!-- <el-button type="primary" style="margin-left: 10px" @click="handleSearch" > 搜索 </el-button> --> </div> <el-table :data="pageInfo.list" :height="$baseTableHeight()" max-height="500px" > <!-- 复选框列 --> <el-table-column type="selection" width="55" /> <el-table-column label="ID" prop="id" min-width="100" show-overflow-tooltip :formatter="$formatCell" /> <el-table-column label="分类" prop="typeName" min-width="200" show-overflow-tooltip :formatter="(row) => row.groupName + row.typeName" /> <el-table-column label="课程标题" prop="title" min-width="150" show-overflow-tooltip /> <el-table-column label="封面图" width="100"> <template #default="{ row }"> <span v-if="!row.videoCover">-</span> <el-image v-else style="width: 34px; height: 19px" :preview-src-list="[$imageSrc(row.videoCover, 2)]" :src="$imageSrc(row.videoCover)" /> </template> </el-table-column> <el-table-column label="作者" prop="lecturerUser" min-width="200" show-overflow-tooltip > <template #default="{ row }"> <div class="flex-center"> <div> <el-image v-if="row.lecturerUser" style="width: 30px; height: 30px" :preview-src-list="[ $imageSrc(row.lecturerUser.userIcon, 2), ]" :src="$imageSrc(row.lecturerUser.userIcon)" /> <span v-else>-</span> </div> <div style="margin-left: 10px"> <div>{{ row.lecturerUser.nickName || '' }}</div> <div>{{ row.lecturerUser.phone || '' }}</div> </div> </div> </template> </el-table-column> <el-table-column label="发布时间" prop="pushTime" width="170" /> </el-table> <!-- 分页组件 --> <el-pagination class="pagination" :current-page="pageInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="setPageSize" @current-change="listPage" /> <div slot="footer" class="dialog-footer"> <el-button @click="closeCourse">取 消</el-button> <el-button type="primary" @click="saveCourse">确 定</el-button> </div> </el-dialog> </div> </div> </template> <script> import ImgUpload from '@/components/imgUpload/imgUpload' export default { name: 'NodesAdd', components: { ImgUpload }, props: { dialogVisible: { type: Boolean, default: false, }, type: { type: String, default: '', }, rowData: { type: Object, default: () => {}, }, }, data() { return { addEditData: { name: '', // 标题 img: '', // 插图 classIdList: [], // 课程id列表 }, searchText: '', // 搜索内容 hasSearched: false, // 弹窗 dialogCourse: false, // 课程弹窗 courseList: [ { id: 1, section: '第一讲', name: '课程介绍与环境搭建去去去去去去去去去去七七七七七七七七七七七七七七七七七七七七七七七七七七七七', img: 'https://picsum.photos/seed/course1/200/150', }, { id: 2, section: '第二讲', name: 'Vue 2 基础语法与响应式原理', img: 'https://picsum.photos/seed/course2/200/150', }, { id: 3, section: '第三讲', name: '组件化开发与通信机制', img: 'https://picsum.photos/seed/course3/200/150', }, { id: 4, section: '第四讲', name: 'Vue Router 与状态管理', img: 'https://picsum.photos/seed/course4/200/150', }, { id: 5, section: '第五讲', name: '构建工具与生产部署', img: 'https://picsum.photos/seed/course5/200/150', }, ], rules: { name: [{ required: true, message: '请输入标题', trigger: 'blur' }], img: [{ required: true, message: '请上传插图', trigger: 'blur' }], classIdList: [ { required: true, message: '请添加课程', trigger: 'blur' }, ], }, // ****** 列表相关 ****** pageNum: 1, // 页码 pageSize: 10, // 分页条数 total: 0, // 总数 listTable: [], // 列表list reqCond: { // 请求参数 pageNum: 1, pageSize: 20, }, pageInfo: { list: [], }, } }, watch: { dialogVisible(val) { if (val) { if (this.type === 'edit') { this.addEditData = { ...this.rowData, } this.getUserList(this.rowData.createUserName) } else { this.getUserList() } } }, }, created() { this.getUserList() this.listPage() }, methods: { handleSearch() { this.hasSearched = true // 模拟搜索请求(实际项目中应调用 API) setTimeout(() => { // 模拟搜索结果过滤逻辑 const mockResults = [ { id: 321, title: 'Vue3 实战教程:从入门到精通', category: '前端开发', author: '技术大牛', publishTime: '2025.06.15 20:34:34', isNew: true, }, { id: 320, title: 'Element UI 组件库高级应用', category: 'UI框架', author: 'UI专家', publishTime: '2025.06.12 20:12:31', isNew: false, }, { id: 319, title: 'JavaScript 性能优化技巧大全', category: '前端开发', author: '性能大师', publishTime: '2025.06.10 15:45:22', isNew: false, }, ] // 根据搜索词和搜索类型过滤结果 if (!this.searchText) { this.searchResults = mockResults } else { this.searchResults = mockResults.filter((item) => { if (this.searchType === 'all') { return ( item.title.includes(this.searchText) || item.author.includes(this.searchText) || item.category.includes(this.searchText) ) } else if (this.searchType === 'title') { return item.title.includes(this.searchText) } else if (this.searchType === 'author') { return item.author.includes(this.searchText) } else if (this.searchType === 'category') { return item.category.includes(this.searchText) } return false }) } }, 500) }, addClick() { this.dialogCourse = true }, closeCourse() { this.dialogCourse = false }, saveCourse() { this.dialogCourse = false }, // 课程分页列表查询 async listPage(pageNum) { pageNum > 0 && (this.reqCond.pageNum = pageNum) const { data } = await this.$http.get( this.$api.classInfo.listPageClassInfo, this.reqCond ) this.pageInfo = data }, setPageSize(pageSize) { this.reqCond.pageSize = pageSize this.listPage() }, // 关闭弹窗 close() { this.addEditData = {} this.$refs.addEditDataRef.resetFields() this.$emit('update:dialogVisible', false) }, // 保存 save() { this.$refs.addEditDataRef.validate(async (valid) => { if (valid) { let text = this.type === 'add' ? '新增' : '修改' let param = {} const { title, insertImage, id, mainContent, qrCodeUrl, createUser, status, releaseTime, } = this.addEditData param = { title, insertImage, mainContent, qrCodeUrl, createUser, status, releaseTime, } if (this.type === 'edit') { param.id = id } this.$baseConfirm(`你确定是否${text}这条数据吗?`, async () => { await this.$http.post(this.$api.newsNote.addOrUpdate, { ...param, }) this.$baseMessage(`操作成功`) this.$emit('queryPage') this.close() }) } }) }, // 获取作者下拉列表 async getUserList(key) { const { data } = await this.$http.get(this.$api.user.searchUser, { key, }) this.userList = data }, }, } </script> <style lang="scss" scoped> .c-ml-10 { margin-left: 10px; } ::v-deep .el-dialog__body { height: 650px; overflow-y: auto; } .cover-img { width: 60px; /* 设置图片宽度 */ height: 60px; /* 设置图片高度 */ object-fit: cover; /* 保持图片比例并覆盖容器 */ border-radius: 4px; /* 圆角 */ } .course-item { // width: 100%; margin-top: 10px; margin-left: 100px; height: 84px; } .cover-container { width: 80%; border: 1px solid #ccc; padding: 10px; border-radius: 4px; /* 圆角 */ margin-left: 10px; } </style> 完善代码
最新发布
07-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值