小知识点总结

1、Git使用：

小王需要接到新需求任务——商品分类，此时小王并不是直接在已有代码上进行需求代码的编写，而是需要在主分支上创建新分支，在新分支上编写代码，不能影响到主分支，具体步骤如下：

步骤1开发前： 创建goods_cate新分支并提交到远程仓库Gitee：
1.git branch—查看已有分支login* master  rights  user，目前处于master主分支；
2.git checkout -b goods_cate—创建新分支goods_cate并切换到该分支；
3.git push -u origin goods_cate—将该新分支提交到远程仓库Gitee

步骤2开发后： 将已完成代码提交到git仓库并推送到远程仓库Gitee：
1.git status -s —查看当前项目文件状态
2.git add . —将项目文件提交到暂存区
3.git commit -m”已完成商品分类功能” —将项目文件提交到git仓库（goods_cate分支）
4.git push —将该新分支代码提交到远程仓库Gitee，刷新（目前处于goods_cate新分支）
5.git checkout master —切换到master主分支
6.git merge goods_cate —基于主分支将goods_cate分支合并到master主分支上
7.git push —将本地仓库推送到远程仓库Gitee，刷新（目前处于master主分支）

1、:root：

index.css中 :root是一个伪类，表示文档根元素html，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，如 :root { font-size: 12px; } 表示声明全局字体默认为12px，等价于 html { font-size: 12px; }；

2、onsubmit事件：

用input/button type="submit"方式提交表单，可以触发onsubmit事件，但无法通过onclick进行校验；onsubmit事件只能表单上使用,提交表单前会触发，<form @submit.prevent="onFormSubmit"> 注意：onsubmit.prevent表示阻止表单的默认提交行为；

 

3、package.json文件：

项目中的package.json文件：它是一个 JSON 文件，位于项目的根目录中，用于配置和描述如何与程序交互和运行的中心，重要字段：

①dependencies：放置生产环境依赖包的地方，应用依赖，或者叫做业务依赖/生产环境依赖，它用于指定应用依赖的外部包，这些依赖是应用发布后正常执行时所需要的，但不包含测试时或者本地打包时所使用的包；

②devDependencies：放置开发环境依赖包的地方，开发环境依赖，仅次于dependencies的使用频率！它的作用和dependencies一样，只不过它里面的包只用于开发环境，不用于生产环境，这些包通常是单元测试或者打包工具等；

4、高内聚低耦合：

①耦合： 模块与模块之间的联系；

②内聚： 一般指（东西聚集在一起）形成一个模块，例如方法，变量，对象，或者是功能模块；

③高内聚：尽可能的让一个模块内部的代码相关程度高，相互联系的紧密。模块内部的代码，相互之间的联系越强，内聚就越高，模块的独立性就越好。 一个模块应该尽量去独立的完成一个功能！如果必须写另外的功能，建议拆分成多个模块，低内聚的代码，不好维护，代码也不够健壮；

④低耦合： 尽可能的将每一个功能通过模块单独写出去 ，然后通过指定的接口来相互联系，模块与模块之间的关系越是紧密，独立性就越不好，改变一个模块可能会影响其他的模块；

⑤举例：我和一位同事带着各自家人出去旅游，管理方案：按家庭分成几个小团队，自家人管自家人，我和同事担任接口人，优点：1、高内聚，自家人在一起，家庭内部财务自理，节约管理成本；酒店房间可以让夫妻和小孩住一间，节省出行费用。你媳妇儿要给孩子喂奶，抱起来尽管喂，用不着请示你同事；2、低耦合，只有涉及你们几个家庭之间的事务才需要你们几个接口人接头。省心，高效。你看，自由自在又能彼此帮忙，因此大家都很愉快。

5.1、选项型 options API

vue2中使用的是optionsAPI，来定义一个组件内部的一些属性如data,methods,computed，其缺点往往会在大项目中体现出来，比如一个简单的计数器功能，可能需要在methods内部书写一部分逻辑，在computed内部也书写一部分逻辑，那么问题来了：如果该组件内部有n个这样的小功能，那么此时代码逻辑是十分分散的，并且后期迭代维护面临的问题也是可能修改一个需求需要在不同的属性内部反复查找相关的代码

5.2、组合型composition API

vue3新增的compositionAPI主要就是为了解决API太过于分散的问题，避免一个功能点下的api太过于分散不便于维护，将同一个功能下的api统一放到一个地方，这样一来项目的开发和维护就简便多了

6、响应式：

A、响应式网页设计是网页能够根据屏幕宽度自动适应，以达到适配各种屏幕，使网站在不同设备上都能得到完美的展现。同一套代码实现不同的页面。

B、Vue中的响应式：数据模型仅仅是普通的 JavaScript 对象，而当你修改数据时，视图会进行更新，数据变页面变

7、ECharts：

定义：ECharts是一个JS插件，性能好可流畅运行PC与移动设备，兼容主流浏览器，提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）

8、前后端分离

前端应用：负责数据展示和用户交互，后端应用：负责提供数据处理接口；

前后端分离就是一个应用的前端代码和后端代码分开写，前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可；

前端通过AJAX请求来访问后端的数据接口，将Model展示到View中即可，前后端开发者只需要提前约定好接口文档（URL、参数、数据类型…），然后分别独立开发即可；前端可以造假数据进行测试，完全不需要依赖于后端，最后完成前后端集成即可；真正实现了前后端应用的解耦合！极大提升开发效率

9、Phpstudy

用于后台管理项目的服务器环境安装配置，自带web服务器，省去Apache等其他web服务的配置过程

10、同源策略

是由 Netscape 提出的一个安全策略，浏览器要求，在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足，则满足同源策略，可以访问服务器。要求：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源；注意：http协议，默认端口为80；https协议默认端口为443

11、跨域

意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问就会遇到跨域问题。跨域指的是浏览器不能执行其它网站的脚本。是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。 

 

13、localstorage和sessionstorage用法

13.1、背景：

Localstorage [ˈləʊkl-ˈstɔːrɪdʒ]和sessionstorage [[ˈseʃn]-ˈstɔːrɪdʒ]都是用来存储客户端临时信息的对象。为什么要掌握localstorage和sessionstorage呢？因为js会经常用到保存数据到本地的功能；

13.2、区别：*

1.localstorage(长期存储)生命周期是永久的，如果用户没有清除信息，将会永久存在。sessionstorage(临时存储)生命周期为当前窗口或者标签页，一旦窗口或者标签页关闭了，它数据也就被永久清除了。

2.相同浏览器下不同页面可以共享相同的localstorage，但是不能共享sessionstorage的信息。

13.3、共同点： 1.他们都只能存储字符串类型的对象。2.不同浏览器不能共享localstorage或sessionstorage中的信息。

14、调用接口文档时请求路径需要动态渲染数据的写法：

情况1：*

A、接口文档：1.3.6. 删除单个用户 -请求路径：users/:id-； 请求方法：delete -； 请求参数：id

B、写法： async removeUserById(id) { const { data: res } = await this.$http.delete ('users/' + id)  }

C、此方法id为动态值，故使用拼接字符串形式 ('users/' + id)

情况2：*

A、接口文档：1.4.1. 所有权限列表 - 请求路径：rights/:type - 请求方法：get - 请求参数

B、写法：async getRightList() { const { data: res } = await this.$http.get ('rights/list') } C、此方法type需要写死，故直接在 / 后面写死值 ('rights/list')****

情况3：*

A、接口文档：1.5.7. 删除角色指定权限- 请求路径：roles/:roleId/rights/:rightId - 请求方法：delete - 请求参数

B、写法：async removeRightById(roleId, rightId) { const { data: res } = await this.$http.delete(`roles/${roleId}/rights/${rightId}`) }

---

15、普通插槽和作用域插槽：

A、插槽slot：普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面；

B、作用域插槽slot-scope：作用域插槽渲染是在子组件里面；作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件：    

作用域插槽常用于将布尔值或者数组渲染成开关或者标签等，如true对应打开开关；*

16、后台管理系统中后台人员与权限的关系（ 权限管理业务分析 ）：

通过权限管理模块控制不同的用户可以进行哪些操作：具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限，一个特定的角色，角色包括不同的功能权限。举例：

A、后台人员：仕勇；  角色：客服管家；  权限：查看网格收缴率、业主信息

B、后台人员：豪娟；  角色：客服主管；  权限：查看所有网格收缴率..

17、box-sizing: border-box的使用*

1.情景：使用flex布局后，给内部九宫格盒子添加了边框线，导致内部九宫格盒子无法一行显示，一行有原来三个变成了两个，解决方法：给内部盒子加样式：box-sizing: border-box

2.理论：box-sizing属性的取值可以为content-box或border-box，对它们的解释如下：

l content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。

l border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

18、字符串的变大写/小写的方法****

小写 -> 大写： String.toUpperCase()；

大写 -> 小写： String.toLowerCase()；

常用于vue2的过滤器和微信小程序的WXS脚本  

19、相对路径

./：查找同级文件；../：查找上一级文件；../../：查找上两级文件  

21、生成随机颜色的方法：

Math的 random()方法 * 256 生成 0-256 的随机小数，Math 的 floor() 方法表示向下取整，最高256