前端项目知识点总结
1、问题描述：一个盒子里有两个行内块元素，第一个盒子设置了margin-top，第二个没有设置，为什么第二个也会下沉？
运行结果：
因为行内块元素的默认对齐方式是和基线对齐，不是和底部对齐，即默认vertical-align:baseline。
解决办法：
1、给第二个盒子加上：vertical-align:top/center/…
ps:两个盒子中间有间隔问题：给父盒子设置font-size: 0;
2、导航栏会因为浏览器页面的缩小而导致部分元素被挤下来的问题
解决方案：被挤下来是因为导航栏的宽度不够，给盒子设置最小宽度即可。
min-width 当盒子内部元素宽度小于min-width的值时，盒子的宽度为min-width的值，当盒子内容宽度大于min-width的值时，盒子的宽度随着内容的增加而被撑大，没有上限。
3、如果导航栏分为左中右三部分，左右的宽度不一样，怎么使中间部分相对于页面居中
解决方案：1、给左右的盒子设置justify-content:space-between 使盒子位于左右两侧，然后重新定义一个盒子（导航栏中间部分的盒子），背景色为透明，利用margin将透明盒子覆盖到导航栏上即可。
2、
<style>
.box {
display: flex;
width: 100%;
height: 30px;
justify-content: space-between;
}
.left {
display: flex;
text-align: left;
width: 40%;
height: 30px;
background-color: pink;
}
.center {
display: flex;
width: 60%;
height: 30px;
align-items: center;
justify-content: center;
text-align: center;
background-color: green;
vertical-align: top;
}
.right {
display: flex;
width: 40%;
justify-content: flex-end;
width: 40%;
width: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、 line-height可以应用于哪些元素
line-height只影响行内元素，并不能直接应用于块级元素line-height具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效
4、深度选择器
在开发时遇到一个问题，就是vue项目和element ui结合使用，但是element ui中有的样式不符合我们的需求，这时我们就要修改它的样式，需要使用到深度选择器。
解决方案：
1、style为css时，使用 >>>
2、style为css的预处理器（less,sass,scss）时，可以使用/deep/和::v-deep
5、v-for不能用在根元素上
v-for不能用在根元素上，因为v-for会循环根元素，而vue里根元素只能有一个
6、vuex使用模块的时候，获取state里的数据语法
1、
this.$store.state.数据名
2、
this.$store.state.哪个模块.数据名
ps:vue组件使用vuex中的方法有时会报unknown mutation type的错误，如果vuex分为几个模块，方法在模块中的话，如果直接在通过this.$store.commit（‘方法名’）是获取不到的，必须加上模块名，例：this. $store.commit(“模块名/方法名”)
7、登录拦截设置白名单
设置了白名单之后，如果没有登录，则不需要登录之后跳转，可以直接跳转
const whiteList = ['/login', '/forgetPwd', '/register'];
else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next();
} else {
next(`/login?redirect=${
to.fullPath}`); // 否则全部重定向到登录页
NProgress.done();
}
}
8、validate.js验证表单
我们在写项目时，在登录模块经常会遇到要检验邮箱格式是否正确，手机号格式是否正确等问题，这时就要使用validate来验证了
1、项目在validate.js中一般会包括对邮箱等内容的验证方法
// 验证邮箱
export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
2、在需要验证的页面引入验证邮箱格式的方法
import {
validEmail } from '@/utils/validate';
3、在data中定义一个常量
const verifyEmail = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入邮箱'));
} else if (!validEmail(value)) {
callback(new Error('请输入正确的邮箱'));
} else {
callback();
}
};
4、在对表单的验证规则中加入刚刚的常量
username: [{
required: true, trigger: 'blur', validator: verifyEmail }]
9、< h>和< p>标签自带边距，使用时需要先清零
10、路由传参
this.$router.replace({
// 需要跳转的路径
path: 'resetPwd',
// 要传入的参数
query: {
email: this.username
}
})
11、密码加密
// 加密
export function encrypt(txt) {
const encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey); // 设置公钥
return encryptor.encrypt(txt); // 对需要加密的数据进行加密
}
1、导入
import {
encrypt } from '@/utils/rsaEncrypt';
2、使用
password: encrypt(password)
12、axios的请求
在创建请求时的配置选项中，只有url是必需的。如果没有指定method，则请求默认使用get方法。
关于axios的请求传参总结：请求传参总结