项目的技术点:利用RestFul架构风格,通过HTTP请求方式(GET/POST/PUT/DELETE)来区分。请求资源标识符。
手动封装axios对象,配置拦截器(loading加载效果和关闭效果)
引入axios.create( baseURL: timeout:)
请求拦截:request.interceptors.request.use(function (config))打开拦截效果,如果有异常就关闭效果,抛出错误。
响应拦截器:request.interceptors.response.use(function (response))关闭加载特效,若果响应的code不是2000,就说明服务器有错误,统一处理。当接口错误时请求异常超时,404.
Proxy解决跨域问题,
VueRouter配置路由切换,
利用Elementui里面的弹窗,form表单,pagination分页,messageBox,下拉菜单。
利用nodejs+express搭建本地服务器。
数据库的增删改查:api’
删除数据库:db.dropDatabase()
创建集合:db.createCollection(name,options)
删除集合:db.collection.drop()
插入文档:insert
更新文档:update()
删除文档:remove()
增删改查功能:添加就是在input框中输入完点击添加按钮,会用post发送ajax请求,获取到req.body保存到数据库中。
删除:点击删除按钮时,获取当前id,发送ajax请求,然后后端用findByIDAndRemove查找,响应给前端,前端提交删除成功。
布局方式:
(1)静态布局:传统的布局方式,元素的尺寸一律用px为单位。
特点:不管浏览器尺寸具体是多少,网页布局始终按照最初的大小来显示。
设计方法:居中布局,所有都使用绝对宽高。
优点:比较简单。没有兼容性问题。
缺点:不能根据屏幕尺寸来做出响应的变化。
(2)流式布局:页面元素的宽度按照屏幕的分辨率进行适配。
特点:屏幕分辨率改变时,页面里的元素大小会发生改变,但布局不变。
设计方法:使用%来定义宽度,高度用px来固定,根据vw来进行尺寸的改变。
(3)自适应布局:可以根据不同的分辨率来创建多个静态布局。
特点:屏幕分辨率大小变化时,页面里元素的位置改变大小不变。
设计方法:@media媒体查询给不同尺寸和介质的设备切换不同的样式。
(4)响应式布局:他用的是流式布局+弹性布局,再搭配媒体查询技术。
特点:不同分辨率下,元素大小位置都会改变。
(5)弹性布局:rem和em 相对灵活。
Flex属性:
Order:排序,从小到大。
Grow:放大:0
Shrink:缩小:1
Basis:本身:auto
Align-self:自身对齐,auto默认,表示继承父元素的align-items属性。
如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。
瀑布流:
Column实现:column-count:多少列
Column-gap:设置列与列之间的距离。
Flex布局:
父盒子设置display:flex
Flex-flow:column wrap
Height:100vh
子元素:width:cacl(100%3 – 左右边距);
Js: 现获取一下图片的宽度,定义列数,再计算item的宽度,第一行按序排列,然后第二行找出数组最小高度和索引。
滚动事件:scroll()
Es6:
Set:是值的集合,set中元素只允许出现一次
Set.Prototype.size:长度
Set.prototype.add:尾部添加元素。
Set.prototype.clear:清除所有元素.
Set.prototype.delete:移除相等元素。
Set.prototype.entries:安插入顺序存放所有元素。
Set.prototype.has:是否存在。
Map保存键值对,能够记住原始插入的顺序。
添加键 map.Set 读取键 map.get
可以将nan作为map的键
For…of 方法迭代map
Foreach(方法迭代map)
可以合并,但要保准一致性。
Git操作命令:git branch 查看本地所有分支。
Git status 当前状态
Git commit 提交
Git branch -a 查看所有的分支
Git branch -r 查看远程所有的分支
Git checkout dev 切换分支
Git log 查看日志。
Svn:checkout:从源码库迁出来一个指定版本的项目副本到客户端。
Update(up):从服务器到本地,
Delete:删除
Import:导入到源码库
Add :添加到svn中,
Status:svn工作状态,
Webpace:
可以将多种静态资源js,css less转换成一个静态文件,减少了页面的请求。
Loader:处理其他要用loader进行转换
Plugins插件:可以完成loader不能完成的工作,自带的插件。
存储:
Loaclstorage sessionstorage cookie区别:
Cookie设置过期时间:expires:expiresTime。
https://www.cnblogs.com/candy-xia/p/11561542.html
跨域问题:
同源策略:浏览器的安全机制,只要端口,域名,协议有一个不同就产生了跨域。
Jsonp原理:
Cors:
== 和=== 的区别:
值相等 类型和值都要相等。
深浅拷贝:
浅拷贝:只拷贝地址,拷贝的和原来的指向同一个地址,所有一遍全变。
深拷贝:全部拷贝,在创建一个新的容器。新改变值元不变。
Promis原理
Promise也是用回调函数,只不过是把回调封装在了内部,通过then方法调用。
解决了回调地狱问题。
Async await
React生命周期
Vue生命周期
beforeCreate:开始创建,实例初始化之前。
created:创建完成,数据初始化已完成。
BeforeMount:首次渲染被调用,完成编译模板。
Mounted:挂载完成,已经渲染完成。
BeforeUpdate:数据更新之前被调用,打补丁,能更改状态。
Updated:更新后,已渲染新的DOM。
BeforeDestroy:销毁前调用,还可以用。
Destroed:销毁后调用,所有的事件监听被销毁,钩子不存在。
组件间通信
父-子:props
子-父:$emit
拖拽