后端程序员常用的前端操作.

最新推荐文章于 2022-10-28 10:08:34 发布

@大吉

最新推荐文章于 2022-10-28 10:08:34 发布

阅读量427

点赞数 1

分类专栏：前端文章标签： css thymeleaf 前端

本文链接：https://blog.csdn.net/weixin_44757863/article/details/111567926

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

前言

作为一个后端开发程序员，虽然前端不用太懂，但是基本的前端操作是必不可少的，下面总结一下笔者经常用到的前端基本操作（随编码经验后续补充中）

正文

1.需求：如何让div透明，内容不透明

在div的style标签加上：style=“background-color:rgba(255, 255, 255, 0.5)”
注意, 最后面那个0.5 可以改,越小就会越透明
如果改成这样: style=“background-color:rgba(255, 255, 255, 0.01)” 就是几乎全部透明(隐藏)

2.需求：点击链接，在新窗口弹出页面。而不是覆盖当前窗口

加属性：target="_blank"

3.需求:居中对齐的属性

加属性: <div style="margin: auto" align="center"></div>
margin: auto 必须加在style里面意思是这整个块对应页面居中
align="center"是单独的意思是块里面的内容是居中的
这两个都加上就肯定居中了
该属性不是加在哪都生效的, 反正加在div里是肯定生效的

4. thymeleaf的判断

Thymeleaf 的条件判断是通过 th:if 来做的，只有为真的时候，才会显示当前元素
<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示

取反可以用not, 或者用th:unless.

取反，所以如果testBoolean 是 true ，本句话就不会显示

unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示

除此之外，三元表达式也比较常见

如果上面的if判断出了错, 那就考虑使用以下的关系判断缩写来代替.
运用于判断表达式中时，关系判断使用 gt / ge / eq / lt / le / ne (即：使用缩写)
1 gt: great than（大于）>
2 ge： great equal（大于等于）>=
3 eq： equal（等于）==
4 lt： less than（小于）<
5 le： less equal（小于等于）<=
6 ne： not equal（不等于）!=

5. 在th: 标签内部嵌套使用if判断

<!--Thymeleaf的三元运算符 这样就使得我们在th的其他标签里也能用if判断了-->
<h2 class="ui teal header item" th:text="${loginstatus}?${loginstatus}:'Blog'"></h2>

其实根本不用if,大家都是用三元运算符
这个比第4条常用多了

6. @PathVariable的应用

需求: Web应用中的URL通常不是一成不变的，例如微博两个不同用户的个人主页对应两个不同的URL：
http://weibo.com/user1和http://weibo.com/user2。我们不能对于每一个用户都编写一个
被@RequestMapping注解的方法来处理其请求，
也就是说，对于相同模式的URL（例如不同用户的主页，他们仅仅是URL中的某一部分不同，
为他们各自的用户名，我们说他们具有相同的模式）。

这时候我们希望能从html请求controller的路径中加入变量, 这时我们的@PathVariable就派上用场了

7. 覆盖整个页面的背景图片:

<body style="background-image: url(../../../static/images/dashboardbackground.png)">
</body>

8. 调整链接/元素的文字离着上下左右的边距：

style=“margin-top: 20px” -> 文字离上边距为20px

9. 不使用 `<input type="submit">`; 转而使用icon，或者button 提交form表单

js代码：

    /*
        需求：不使用 <input type="submit"> ; 转而使用icon，或者button 提交form表单
        解决方案： 使用jQuery的方法。第一行选中id为submit-btn的 icon/button
                   第二行选择id为search-form的form表单
                   这样就可以实现用icon或button提交表单了
     */
    $('#submit-btn').click(function () {
        $('#search-form').submit();
    });

对应的html代码：

<form id="search-form">
     <input type="text" id="searchtxt" placeholder="输入关键字搜索文章"/>
     <span class="search-icon">
		<i class="fa fa-search" id="submit-btn"></i>
	 </span>
</form>