css单独设置border-bottom宽度
.flow-part {
margin-bottom: 20px;
padding-top: 15px;
}
.flow-part::after {
content: "";
width: 50%;
display: block;
border-bottom: 1px solid #ddd;
margin-left: 25%;
}
flex布局：某个子元素占满剩余宽度
给这个子元素增加flex-grow: 1样式即可
div中文字过长, 自动换行
word-break: break-all;
HTML + CSS 写一个开关
<div class="form-item-checkbox">
<div class="form-item-label">是否公开:</div>
<div class="switch">
<input class="switch-checkbox" id="btn-switch" type="checkbox" checked>
<label class="switch-label" for="btn-switch">
<span class="switch-inner" data-on="ON" data-off="OFF"></span>
<span class="switch-switch"></span>
</label>
</div>
</div>
let isPublicParam = 1 // 默认"公开" 选中
let btn = document.querySelector("#btn-switch")
btn.addEventListener("click", (e) => {
if($("input[id='btn-switch']:checked").val()) {
isPublicParam = 1
} else {
isPublicParam = 0
}
})
.form-item-checkbox {
height: 50px;
margin: 2%;
padding-bottom: 2%;
border-bottom: 1px solid rgb(234, 234, 234);
display: flex;
align-items: center;
justify-content: space-between;
}
.switch {
position: relative;
float: left;
width: 90px;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.switch-checkbox {
display: none;
}
.switch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 1px solid #999999;
border-radius: 20px;
}
.switch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.switch-inner::before,
.switch-inner::after {
display: block;
float: right;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family:
Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.switch-inner::after {
content: attr(data-on);
padding-left: 10px;
background-color: #00e500;
color: #FFFFFF;
}
.switch-inner::before {
content: attr(data-off);
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.switch-switch {
position: absolute;
display: block;
width: 22px;
height: 22px;
margin: 4px;
background: #FFFFFF;
top: 0;
bottom: 0;
right: 56px;
border: 1px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.switch-checkbox:checked+.switch-label .switch-inner {
margin-left: 0;
}
.switch-checkbox:checked+.switch-label .switch-switch {
right: 0px;
}
参考了: https://codepen.io/xgqfrms/pen/qBNGGVv
html + css 五星打分功能
列表页中静态小星星就直接遍历静态星星图标了
参考了: https://blog.csdn.net/u014131617/article/details/90900981
css 修改 svg图标颜色
打开svg图标, 找到 fill="#f2b044", 替换fill的值为#df2222, 那么就变成红色了
参考了: https://juejin.cn/post/7120895248665935902
拼接的dom中函数怎么传递中文字符的参数
"<button onclick='getRangeDetail("" + detailData.visualRangeName + "")' class='range-btn'>查看详情</button>" +
参考了: https://blog.csdn.net/qq_26514509/article/details/88936608
设置 padding 的同时不影响整体尺寸
box-sizing: border-box;
padding: 10px;
z-index 没生效
z-index要想生效,需要元素基于 position有 relative、absolute等属性
渐变色线条
<div class="content-line"></div>
.content-line {
background-image: linear-gradient(
90deg,
rgba(218, 42, 42, 1) 0,
rgba(218, 42, 42, 0.1) 0,
rgba(218, 42, 42, 1) 100%,
rgba(218, 42, 42, 0.1) 100%
);
border-radius: 2px;
width: 90px;
height: 4px;
}
flex布局,不换行且不压缩元素宽度
父元素: display: flex;
子元素: flex-shrink: 0;
IDEA项目启不起来
Maven 中有的包置灰状态,没有引进来
Settings - Build, Execution, Deployment - Build Tools - Maven - Ignored Files 中包被默认忽略了
.mp4文件在iphone上无法播放的问题
目前是从后端解决的,
后端代码如下:
/**
5. 分段下载
6. 5. @param filePath
7. @param response
*/
@GetMapping("/file/range")
public void fileRangeIgnoreToken(@RequestParam("filePath") String filePath, HttpServletRequest request, HttpServletResponse response) {
// 从filePath中找出文件名
String fileName = "";
if (filePath.contains(".")) {
fileName = filePath.substring(filePath.lastIndexOf("/") + 1);
}
log.info("新生文件的路径：{}", filePath);
File file = new File(filePath);
InputStream inputStream = uploadService.getObject(filePath);
try {
org.apache.commons.io.FileUtils.copyInputStreamToFile(inputStream, file);
this.rangeVideo(request, response, file, fileName);
} catch (Exception e) {
e.printStackTrace();
log.error("分段发送文件出错，失败原因：{}", Throwables.getStackTraceAsString(e));
} finally {
FileUtil.del(file);
}
}
/**
* 新增视频加载方法，解决ios系统vedio标签无法播放视频问题
*
* @param request
* @param response
* @param file
* @param fileName
* @throws FileNotFoundException
* @throws IOException
*/
public void rangeVideo(HttpServletRequest request, HttpServletResponse response, File file, String fileName) throws FileNotFoundException, IOException {
RandomAccessFile randomFile = new RandomAccessFile(file, "r");//只读模式
long contentLength = randomFile.length();
log.info("获取导的contentLength={}", contentLength);
String range = request.getHeader("Range");
int start = 0, end = 0;
if (range != null && range.startsWith("bytes=")) {
String[] values = range.split("=")[1].split("-");
start = Integer.parseInt(values[0]);
if (values.length > 1) {
end = Integer.parseInt(values[1]);
}
}
int requestSize = 0;
if (end != 0 && end > start) {
requestSize = end - start + 1;
} else {
requestSize = Integer.MAX_VALUE;
}
response.setContentType("application/octet-stream");
response.setHeader("Accept-Ranges", "bytes");
response.setHeader("ETag", fileName);
response.setHeader("Last-Modified", new Date().toString());
//第一次请求只返回content length来让客户端请求多次实际数据
if (range == null) {
response.setHeader("Content-length", contentLength + "");
} else {
//以后的多次以断点续传的方式来返回视频数据
response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);//206
long requestStart = 0, requestEnd = 0;
String[] ranges = range.split("=");
if (ranges.length > 1) {
String[] rangeDatas = ranges[1].split("-");
requestStart = Integer.parseInt(rangeDatas[0]);
if (rangeDatas.length > 1) {
requestEnd = Integer.parseInt(rangeDatas[1]);
}
}
long length = 0;
if (requestEnd > 0) {
length = requestEnd - requestStart + 1;
response.setHeader("Content-length", "" + length);
response.setHeader("Content-Range", "bytes " + requestStart + "-" + requestEnd + "/" + contentLength);
} else {
length = contentLength - requestStart;
response.setHeader("Content-length", "" + length);
response.setHeader("Content-Range", "bytes " + requestStart + "-" + (contentLength - 1) + "/" + contentLength);
}
}
ServletOutputStream out = response.getOutputStream();
int needSize = requestSize;
randomFile.seek(start);
while (needSize > 0) {
byte[] buffer = new byte[4096];
int len = randomFile.read(buffer);
if (needSize < buffer.length) {
out.write(buffer, 0, needSize);
} else {
out.write(buffer, 0, len);
if (len < buffer.length) {
break;
}
}
needSize -= buffer.length;
}
randomFile.close();
out.close();
}
前端代码:
只用判断是不是ios端设备就行了
let sUserAgent = navigator.userAgent.toLowerCase()
if(sUserAgent.match(/iphone os/i) == 'iphone os') {
videoHtml += "<div class='video-title'>视频附件:</div>" +
"<div class='content-line'></div>" +
"<video controls class='video-cover'>" +
"<source src=" + iosVideoPathToUrl(unionPartyBuilding.videoFile) + " type='video/mp4'>" +
"<source src=" + iosVideoPathToUrl(unionPartyBuilding.videoFile) + " type='video/ogg'>" +
"</video>"
} else {
videoHtml += "<div class='video-title'>视频附件:</div>" +
"<div class='content-line'></div>" +
"<video controls class='video-cover'>" +
"<source src=" + pathToUrl(unionPartyBuilding.videoFile) + " type='video/mp4'>" +
"<source src=" + pathToUrl(unionPartyBuilding.videoFile) + " type='video/ogg'>" +
"</video>"
}
// ios 端视频资源路径转换
function iosVideoPathToUrl(filePath){
let fileUrl = ctx + "file/range?filePath=" + filePath;
return fileUrl;
}
// 资源路径转换
function pathToUrl(filePath){
let fileUrl = ctx + "common/openFileByPath?filePath=" + filePath;
return fileUrl;
}
swiper滚动混乱
原因是项目中已经集成了swiper,通过
<th:block th:include="include :: swiper"/>
<th:block th:include="include :: index-banner"/>
引入了.
如果再在本文件JS中定义swiper,就造成了滚动混乱.
微信端根据PC端那样引入zTree一直报 init 错误
原因是common.js中少了一行代码 _tree: {},
另外, 引入的 <th:block th:include="include :: ztree-js" /> 需要放在一些公共JS的后面引入,
提前引入也会报错.
调用几个预制数据接口再来调用列表查询接口 Promise
$(function() {
const p1 = new Promise(function (resolve, reject){
let params = {
dataId: innovateRoom.roomId,
dataType: "union_innovate_room_image",
tenantId: 1
}
$.ajax({
url: ctx + "common/loadfile",
type: "get",
data: params,
dataType: "json",
success: function (res) {
if(res && res.fileList && res.fileList.length > 0) {
res.fileList.forEach(item => {
imageList.push(item.filePath)
})
}
resolve("success")
},
error: function (error) {
reject(error)
}
})
})
const p2 = new Promise(function (resolve, reject){
let params = {
dataId: innovateRoom.roomId,
dataType: "union_innovate_room_video",
tenantId: 1
}
$.ajax({
url: ctx + "common/loadfile",
type: "get",
data: params,
dataType: "json",
success: function (res) {
if(res && res.fileList && res.fileList.length > 0) {
res.fileList.forEach(item => {
videoList.push(item.filePath)
})
}
resolve("success")
},
error: function (error) {
reject(error)
}
})
})
Promise.all([p1, p2]).then(() => {
getHtml()
})
})
function getHtml() {
...
}
img 图片怎么都不展示
一直把注意力集中在路径有啥问题,导致忽略了把 src 写成了 scr.
在手机上看微信端本地联调的效果
连接电脑wifi,浏览器输入: http://192.168.104.75:8081/newemp-wx/main
input 上传图片
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">
<input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
$(window).scroll() 方法不能触发的原因
参考了: https://blog.csdn.net/AAAXiaoApple/article/details/120742307
把根节点 height: 100%; 改成 height: auto;
页面跳转传递多个参数
一开始跳转失败,原因是参数类型定义成String了, 应该是Long, 跟后台一致才行
// 页面中
location.href = ctx + "union/interestActivity/editComment?activityId=" + activityIdPass + "&commentId=" + commentIdPass + "&comment=" + commentPass;
// controller中
@GetMapping("/editComment")
public String interestActivityEditComment(Long activityId, Long commentId, String comment, ModelMap modelMap)
{
modelMap.put("activityId", activityId);
modelMap.put("commentId", commentId);
modelMap.put("comment", comment);
return prefix + "/interestActivity/editComment";
}
// 跳转的页面,可直接获取到传递的参数
let activityIdPass = [[${activityId}]] // 从detail页面传过来activityId
let commentIdPass = [[${commentId}]] // 从detail页面传过来commentId
let commentPass = [[${comment}]] // 从detail页面传过来comment
从index页面跳转到detail页面
方法一: 传id到详情页,然后调用详情接口
// 跳转到详情页
function goToDetail (activityId) {
location.href = ctx + "union/interestActivity/detail?activityId=" + activityId;
}
// controller中
@GetMapping("/detail")
public String interestActivityDetail(Long activityId, ModelMap modelMap)
{
modelMap.put("activityId", activityId);
return prefix + "/interestActivity/detail";
}
// detail.html中
// 就可以直接获取到activityId
let activityIdPass = [[${activityId}]];
方法二: 直接将详情数据在controller中返回
// index页面
// 跳转到"创新工作室"详情页
function goToDetail1(roomId) {
location.href = ctx + "union/innovateRoom/view?roomId=" + roomId;
}
// controller中
@GetMapping("/view")
public String view(Long roomId, ModelMap modelMap) {
modelMap.put("innovateRoom", unionInnovateRoomService.selectUnionInnovateRoomById(roomId));
SysUser sysUser = ShiroUtils.getSysUser();
modelMap.put("currentUserId", sysUser.getUserId());
return prefix + "/innovateActivity/innovateRoomDetail";
}
// detail页面
let innovateRoom = [[${innovateRoom}]] // 从index页面传过来innovateRoom对象
加了一个兴趣活动页面,怎么都跳转不了
清除一下 IDEA 缓存
执行 File - Invalidate Caches
平台一开始启动不起来
是因为,之前安装的JDK版本是32位的
换了一个版本之后,重新启动下IDEA, File - Project Structure - Porject 重新选一下 Project SDK 就行
(代码地址本地目录7下,北京工会管理系统,开发工具IDEA,在若依框架下二次开发的)
1508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
