本文涵盖了前端开发中的一些常见技巧，包括超链接样式定制、局域网主机通信、CSS阴影效果、Vue组件交互及VSCode配置。还讨论了CSS的box-shadow属性，以及在VScode中运行json-server时遇到的权限问题。此外，还分享了代码提示、Vue组件嵌套和路由问题的解决方案。
目录
1.超链接的那些事
13.VScode 终端执行 json-server 报错无法加载文件xx\npm\json-server.ps1，因为在此系统上禁止运行脚本
15.访问数据端口，报错Failed to load resource: net::ERR_CONNECTION_REFUSED
1.超链接<a></a>的那些事
1.如果想换超链接默认的样式，要在CSS里面对其做样式的修改。下面代码在模仿京东左侧导航栏。
/* 鼠标悬停于li上面时，li的背景会变成银色 */
ul li:hover{
background-color: silver;
}
/* 伪类选择器 */
/* 对超链接本身的样式设置 去除默认的底部连接 */
a:link{
color: black;
text-decoration: none;
}
/* 访问过后的样式 一般是和未访问之前保持一致 */
a:visited{
color: black;
text-decoration: none;
}
/* 鼠标悬停于超链接上的样式 */
a:hover{
color: maroon;
}
效果图
2.ping 同一个局域网的另一台主机
1. 一直报无法访问目标主机
折腾了半天发现是因为学校的校园网不允许ping，连了热点发现能ping通
2.两个主机在同一局域网互连，就是在Navicat中新建Mysql连接，输入被连接主机的ip和数据库用户名和密码，然后再在IDEA的数据库连接文件中修改用户名和密码，就能实现两台主机访问同一数据库。
3.关于为什么点击确认后就可以修改信息
点击id为dialog_yes的确认按钮了之后，就会调用一次updateStudent函数，并且传入形参。
4.一个自己给自己挖的坑
自己给自己挖坑跳，这一跳就是一天，这次改bug又一次复习了一遍怎么找问题。
这个bug的出现是为了能够实现新功能：当两台主机在同一局域网下互连数据库时，A主机的普通用户提交除了资产编号以外的修改信息，B主机的管理员可以查看并通过修改申请。
我们的思路是：普通用户将自己想修改的信息提交申请，数据存入userapply这张表中，等管理员登录后并点击申请信息审批按钮，跳转到界面userapply.html，该界面加载userapply表里面的数据，并且若管理员同意，再对Student表进行修改并且删除userapply表里面的数据。
这里就出现了一个核心问题：userapply表和Student表如何建立“桥梁”呢？
一个很自然而然的想法是基于sno字段。这个做法要求A主机（普通用户）不能修改资产编号，否则B主机（管理员）点击同意申请时，从前端获取的sno就没办法匹配到Student表里的数据啦。
这个功能并不难实现，不多说了。
其实我们还做了在同一台主机上前后登录普通用户和管理员账号，可以修改包括资产编号中的所有字段，这个功能稍微复杂一点，再一次引入了cookie。
首先，登录普通用户账号，对某一条资产记录点击“编辑”按钮的时候（只有此时还是sno_old），调用函数将此时的资产编号sno存入cookie中，然后用户可以修改资产编号，当管理员审批时，是调用的cookie中的sno_old到Student表里匹配数据。
5.FONTAWESOME 图标（附码表）
http://www.bootcss.com/p/font-awesome/design.html
6.小三角代码
.box1{
width: 0px;
height: 0px;
border: 10px red solid;
border-color:transparent transparent blue transparent ;
}
7.子元素与父元素 靠右对齐
HTML:
父元素 ul class="shop-cart"
子元素 div class="shop-cart-commodity"
<!-- 购物车 -->
<ul class="shop-cart">
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车（0）
<!-- 添加一个弹出层 -->
<div class="shop-cart-commodity">
<span>购物车中还没有商品，赶紧选购吧!</span>
</div>
</a>
</li>
</ul>CSS:
先对父元素设置相对定位
.shop-cart{
position: relative;
}再对子元素设置：
.shop-cart .shop-cart-commodity{
position: absolute;
right: 0px;
}效果图：父元素是购物车那个小方块，子元素是红色的大方块，右边缘是居中对齐的。
8.CSS的box-shadow属性 并以此设置阴影
该属性的说明：
box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
| 默认值： | none |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.boxShadow="10px 10px 5px #888888" |
语法
box-shadow: h-shadow v-shadow blur spread color inset;注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 值 | 描述 | 测试 |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊距离。 | 测试 |
| spread | 可选。阴影的尺寸。允许负值。 | 测试 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 | 测试 |
一些输入实例：
例1：
水平方向偏移2px(正值向右)，垂直方向偏移2px(正值向下)，模糊长度5px。
效果图：
很明显是向右下偏移了，但是要注意左边和上边也有淡淡的一圈阴影，关于这个问题，参考资料：三维视角解析box-shadow_Ugine_H的博客-CSDN博客
关键问题就是参数spread：阴影大小。因为你不设置spread的时候，默认是0,0它就是会显示出来的！
其实这个值十分的好理解，就是阴影的放大和缩小。设置1px，那就是阴影会往四周扩展1px。
像这样的 box-shadow: 0px 0px 0px 1px #333;
得到的效果就是给盒子加了个1px的边框。
而如果是设置-1px;那就是四周收缩1px;
我们把spread参数设置为-3px 看看，很明显收缩进去了，而且因为设置的偏移是2px,只要spread的值小于-2px 都是有效果的：
例2：
水平和垂直方向偏移量都设为0，就是四边都有阴影。
效果图：
例3：（我自己想做的练习）
我自己想做的效果是上边没阴影，左右下有阴影，且阴影等宽。
代码：
这个代码是因为，阴影是可以叠加的，我先写了一个向下偏移5px的白色阴影，模糊程度和扩展半径都是0px，又写了一个向下偏移5px的红色阴影，模糊半径是5px,这样白色的是遮挡了一部分红色阴影的，注意，顺序不同的话，效果不同。
box-shadow:0 5px 0px #fff, 0 5px 5px red;效果图：
当我们把代码改成：
box-shadow:0 5px 5px red,0 5px 0px #fff;效果图变为：
然后我再微调了一下：
box-shadow:0 10px 0px #fff, 0 10px 10px -1px rgba(0, 0, 0, 0.3);效果图：
原版小米官网效果：都是三边阴影的~
一些其他的样式参考：
CSS3 box-shadow三边阴影等宽、两对边阴影等宽_画画的孙悟空的博客-CSDN博客
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）_蜗牛1T的博客-CSDN博客_boxshadow三边阴影
9.控制过渡的时序函数——bezier函数
辅助输入贝塞尔函数的网址：cubic-bezier(.06,.54,.95,.46)
10.好看的渐变色参考
11.Vscode无代码提示问题
vue2使用的是vetur,
vue3使用的是volar,
如果开发vue2就将以下两个插件禁用，如果开发vue3就将vetur禁用，否则没有代码提示。
12.Vue 组件嵌套未生效问题
本来是想在App.Vue里面引用Home.vue的，然后我脑子一抽，直接在<template></template>里面这样写了：
理所当然的，运行后浏览器上就只有：
而不会去渲染Home.vue里面的东西。
这种写法也是错的：
更正：
在App.vue里面的template这么写：
引入的Home.vue里面的内容是：
最终在页面上显示的效果是：
13.VScode 终端执行 json-server 报错无法加载文件xx\npm\json-server.ps1，因为在此系统上禁止运行脚本
报错信息：
问题原因：
PowerShell不能 / 禁止执行脚本。PowerShell无疑是对安全做过充分考量的，它把脚本的执行分成了四个策略：
Restricted： 禁止运行任何脚本和配置文件。（默认）
AllSigned ：可以运行脚本，但要求所有脚本和配置文件由可信发布者签名，包括在本地计算机上编写的脚本。
RemoteSigned ：可以运行脚本，但要求从网络上下载的脚本和配置文件由可信发布者签名；不要求对已经运行和已在本地计算机编写的脚本进行数字签名。
Unrestricted ：可以运行未签名脚本。（危险！）
解决方法：
使用管理员方式打开Power Shell
输入Get-ExecutionPolicy，可以查看到当前的策略
输入Set-ExecutionPolicy RemoteSigned，设置当前的策略为RemoteSigned
输入Y，如图所示：
问题就解决啦：
参考链接：解决 --- json-server : 无法加载文件xx\npm\json-server.ps1，因为在此系统上禁止运行脚本_Q_do_it的博客-CSDN博客
14.诡异错误系列
14.1 CSS样式失效问题
别问，问就是有人把
.postvalue2 h3::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #f80;
position: absolute;
z-index: -1;
padding-right: 40px;
left: -30px;
}写成了
.postvalue2 h3 ::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #f80;
position: absolute;
z-index: -1;
padding-right: 40px;
left: -30px;
}空格害人系列。
14.2 router路由不生效的问题
别问，问就是有人把
createWebHistory 写成了如图所示
拼写单词害人系列。
15.访问数据端口，报错Failed to load resource: net::ERR_CONNECTION_REFUSED
访问数据端口http://localhost:3000/posts，浏览器报错拒绝访问：
是因为我把监听数据的终端关了，重新开一下就好：
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
