项目的技术点:利用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
拖拽
|