做网站傻瓜,wordpress安装后要删除哪些文件夹,做网站标题图片大小,wordpress nginx安装目录项目笔记
☆☆代表面试常见题
前后端分离#xff1a;后端负责写接口#xff0c;前端负责调接口。
登录/退出功能
登录业务流程
登录页面#xff1a;用户名密码 调用后台接口进行验证 通过验证#xff0c;根据后台响应状态跳到项目主页
登录业务相关技术点#xff1…项目笔记
☆☆代表面试常见题
前后端分离后端负责写接口前端负责调接口。
登录/退出功能
登录业务流程
登录页面用户名密码 调用后台接口进行验证 通过验证根据后台响应状态跳到项目主页
登录业务相关技术点 http是无状态的登陆成功后记录状态下面两种方式 1cookie在客户端记录状态node.js session在服务器端记录状态node.js 2token维持状态 服务器与前端之间Vue可能有一个跨域的问题 如果前端与后台接口不存在跨域问题——用cookie、session 存在跨域问题——用token PS一些跨域问题来自博主 ^^为欢几何^^ 什么是跨域问题 向一个域发送请求如果要请求的域和当前域是不同域就叫跨域。 例如就是从 A 向 B 发请求如若他们的地址协议、域名、端口号有一个不相同直接访问就会造成无法获取服务器发送的数据的现象。 指的是浏览器不能执行其他网站的脚本。 它是由浏览器的同源策略造成的是浏览器对 JavaScript 施加的安全限制。 造成跨域问题的原因 1.浏览器规定浏览器在解析Ajax请求时要求浏览器的路径与Ajax的请求的路径必须满足三个要求则满足同源策略可以访问服务器。也就是说跨域问题是出现在浏览器与服务器之间而服务器与服务器之间不存在跨域问题。 2.何为同源策略同源指的是两个页面具有相同的协议、主机和端口三者有任一不相同即会产生跨域。 如下图中的协议、域名、端口号分别为 协议http 域名localhost ;端口号5000 协议http 域名localhost ;端口号8080
token原理分析 服务器提供接口客户端需要通过Ajax访问这些接口 token由服务器生成每个用户的token值不同 token记录登录状态后续所有请求都要携带这个token验证你是哪个用户 token用于身份校验是保证登录成功后的唯一身份令牌
登录功能实现
el-form表单 el-form-item用户名密码登录按钮重置按钮 el-input文本输入框 el-button 按钮 字体图标用户名和密码之前的小图标
☆☆git 相关命令 git checkout -b login 创建一个叫login的分支通过checkout命令切换到这个分支上 git branch 查看当前项的所有分支*表示正处于此分支 git status 查看源代码文件修改状态 git add . 上传所有修改文件包括新增文件 git commit -m 完成了登录功能 提交代码-m指提交的备注消息 git checkout master 切换到master分支 git merge login 把login分支合并到master分支先切换到master分支再使用 git merge git push 本地代码推送到云端 git push -u origin login 把云端不存在的本地分支login推送到云端
CSS盒子放在页面正中间
/* 居中 */
position: absolute;
// 距离顶部和左部各50%
left: 50%;
top: 50%;
// 横轴纵轴都往回移动50%
transform: translate(-50%, -50%);☆☆水平居中 方式1position transform(针对子元素)
position: absolute;
left: 50%;
// 横轴向左移动自身的50%
transform: translate(-50%);方式2flex (针对父元素):
.parent {display: flex;justify-content: center;
}☆☆垂直居中
☆☆CSS中的单位 1长度单位 px像素计算机屏幕上的一个点 em 相对长度单位。1em等于当前字体尺寸会继承父元素字体大小2em等于当前字体尺寸的两倍如果某元素以 16px 显示那么 2em 是32px。在 CSS 中em 是非常有用的单位因为它可以自动适应用户所使用的字体。 %百分比 2时间单位 s秒 ms毫秒 3角度单位 deg度数 in英寸 rad弧度 grad梯度 4重量单位 kg千克 g克 mg毫克 5频率单位 Hz赫兹 kHz千赫兹 6分辨率单位 dpi点每英寸 dpcm点每厘米
/* 设置元素宽度为100像素 */
div {width: 100px;
}/* 设置元素字体大小为1.5em */
p {font-size: 1.5em; /* 如果父元素的字体大小是20px则计算出的字体大小是30px */
}/* 设置元素延迟动画时间为500毫秒 */
keyframes example {from {background-color: red;}to {background-color: yellow;}
}div {animation-name: example;animation-duration: 500ms;
}/* 设置元素的透明度为50% */
div {opacity: 0.5;
}关于less语法来自博主苦海123 CSS是一门非程序语言没有变量、函数、作用域等此时使用rem单位就会出现图片等大量计算尺寸的问题但是less可以轻松实现运算它是CSS预处理语言引入了变量、混入、函数等常见的CSS预处理语言还有Sass、Stylus等Less中文网址http://lesscss.cn
嵌套在less中可以像html一样如果标签是父子级关系可以嵌套书写编写后会生成对应的父子级形式的选择器less语法中伪类伪元素前面要加 符号才表示当前元素的伪类否则表示此元素的子代伪元素如
!-- 结构 --
templatediv classlogin_containerdiv classlogin_boxdiv classavatar_boximg src../assets/logo.png alt/div/div/div
/template!-- 样式 --
!-- 支持less语法格式 --
!-- scoped只在当前节点下生效去除则全局生效 --
style langless scoped
.login_container {background-color: #2b4b6b;height: 100%;
}.login_box {width: 450px;height: 300px;background-color: #fff;.avatar_box {height: 130px;width: 130px;img {width: 100%;height: 100%;}}
}
/styleElement ui是啥 Element UI 是一个基于Vue.js 的UI框架它提供了一套丰富的组件和样式帮助开发者快速构建美观、易用的Web应用程序。Element UI的组件包括但不限于表单、表格、弹窗、按钮、菜单等常见的UI元素同时也提供了响应式的布局和主题定制等功能以满足不同场景下的需求。Element UI的文档详细、易懂社区活跃是Vue.js生态中非常受欢迎的UI框架之一。12 Element UI由国内的饿了么团队开发并开源专为开发者提供了一套优雅而灵活的UI组件。它包含了各种常用的Web组件如按钮、表单、导航等以及高级组件如日期选择器、对话框等。Element UI的设计风格简洁美观易于定制使其成为许多Vue.js项目的首选UI框架。 此外Element UI的安装和使用也非常简便。可以通过npm进行安装安装成功后可以在项目中通过引入相应的js和css文件来使用Element UI的组件库。
☆☆☆ flex弹性布局基本知识 1flex布局父项常见属性
display:flex;// 内容布局方向: 从主轴头部开始 / 从主轴尾部开始 / 居中 / 平分 / 两边贴边剩余平分
justify-content: flex-start / felx-end / center / space-around / space-between;
// 主轴方向横轴 / 纵轴
flex-direction: row / column;
// 单行/侧轴 排列子元素的方式stretch 拉伸
align-items: flex-start / flex-end / center / stretch;
// 多行/侧轴 排列子元素的方式
align-content: flex-start / flex-end / center / stretch / space-around / space-between;
// 是否换行不换行 / 换行
flex-wrap: nowrap / warp;
// 将flex-wrap 与 flex-direction 复合
flex-flow: row / column nowrap / wrap;2flex布局子项常见属性 flex-grow: 规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度这取决于flex-direction值。 flex-grow的默认值为0意思是该元素不索取父元素的剩余空间如果值大于0表示索取。值越大索取的越厉害。如果父盒子未设宽度那么flex为0的子盒子就是元素自身的宽度。
flex-shrink: 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩其收缩的大小是依据 flex-shrink 的值。默认是1等比例缩小如果一个项目的 flex-shrink 属性为0其他项目都为1则空间不足时前者不缩小。图片来自且听风吟
flex-basis: 表示表示项目占据主轴空间的值。默认为auto表示项目当前默认的大小。如果设置为一个固定的值则该项目在容器中占据固定的大小。它的初始值是 auto此时浏览器会检查元素是否设置了 width 属性值。如果有则使用 width 的值作为 flex-basis 的值如果没有则用元素内容自身的大小。如果 flex-basis 的值不是 autowidth 属性会被忽略。当width为0的时候我们是看不到元素的。但当flex-basis为0,或者为auto并且width没有设置值的时候(默认值为0)该元素的大小是由内容大小决定的。也就是只要有内容flex-basis是不会看不到元素的。 设为auto和0也是有区别的。一个最明显的区别就是为0的时候如果内容文字有空格是自动换行的。这个可以通过设置white space:nowrap解决。auto就没有这个问题。 flex-basis: 0 意味着项目不会根据内容调整初始大小而 flex-basis: auto 则允许项目根据内容或显式设置的尺寸来调整初始大小。
flex布局定义子项目剩余空间表示占用份数
// 表示占用2份
flex: 2;flex是flex-grow、flex-shrink、flex-basis三个属性的复合默认0 1 auto 注意flex:1和只写一个flex-grow:1是不一样的。 写成flex:1flex-shrink,flex-basis的默认值是1和0%。 而写成flex-grow:1,flex-shrink,flex-basis的默认值是1和auto。也就是flex-basis是不同的。
align-self 定义子项目在侧轴上的排列方式
align-self:flex-start / flex-end / center / stretch;order 定义子项目排列顺序数量越小越靠前默认为0
☆☆box-sizing 为border-box和content-box的区别 content-box(标准W3C盒模型默认): 块总宽度widthmarginpaddingborder
border-box(IE盒模型):块总宽度width(包含paddingborder)margin 内边距padding上右下左
/* 应用于所有边 */
padding: 1em;/* 上边下边 | 左边右边 */
padding: 5% 10%;/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;表单验证
(1) 为el-form通过属性绑定指定rules校验对象 (2) 在data中定义校验对象每一个属性都是一个验证规则 (3) 为el-form-item通过prop项指定验证规则
重置
1拿到表单的实例对象使用ref引用 2通过this访问到$refs.引用对象再使用表单的重置函数
登录前的预验证
发起请求前对表单数据进行预验证通过后发起登录请求否则提醒用户表单数据不合法。 1先获取到表单的引用对象 2再调用引用对象的valid函数进行表单的预校验在valid中接收一个回调函数其中第一个形参是验证结果boolean通过这个boolean判断验证是否通过
根据预验证结果是否发起登录请求
涉及到箭头函数、promise、async、await、异步处理
登录状态的弹窗提示
导入element-ui导入Message Message需要进行全局挂载挂载为Vue原型上的一个属性 Vue.prototype. m e s s a g e M e s s a g e 在每个组件中可使用 t h i s . message Message 在每个组件中可使用this. messageMessage在每个组件中可使用this.message中的方法
登录组件登录成功之后的行为
1将登录成功之后服务器分配的token保存到客户端的sessionStorage中 1.1 项目中除了登录之外的其他API接口必须在登录之后才能访问token相当于通行证记录已经登录 1.2 token只应在当前网站打开期间生效所以将token保存在 sessionStorage中localStorage是持久化的存储机制sessionStorage是会话期间的存储机制 2通过编程式导航跳转到后台主页路由地址是/home sessionStorage localStorage
路由导航守卫控制访问权限
home页面只能在登录状态下才能访问。如果用户没有登录但是直接通过URL访问特定页面需要重新导航到登录页面。
退出功能
销毁本地的token再重定向到登录页
