软工二班秦同学的博客

react项目实战-基础架构搭建

随着react版本的更迭，到了react16.8版本的时候，新增了hook特性，让函数组件内部也可以拥有内部状态，以及生命周期。没有this指向。

前端根据不同的地址，对应渲染不同的组件或页面。

react本身没有提供相关的仓库管理插件，react社区非常庞大，社区提供了一个仓库管理插件`redux`，相当于vuex可以对数据进行管理。

早期的js被设计的非常简单，主要目的就为了操作DOM元素，没有想到会发展到现在这么好，以至于出现了前端工程师岗位，前端的工作也月越来越复杂，项目也越来越庞大，开发时会多人协作开发，在以前容易出现变量命名冲突问题。在后来es6出现后，得到了很大的改变，有了模块化的概念node.js当我们封装好代码后，就可以导出给外部使用，外部就可以引入导出的代码进行使用。1）在构造器中定义state内部状态2）直接在类中定义属性state = {title: 'web前端'render() {return (

在网络的标签语言中，存在着两种HTML：使用标签做网页布局，更多是内容的呈现，标签时固定的XML：可扩展的标签语言，也是用标签来写代码，标签是可自定义的，主要作用是用于数据的存储和传输。JSX = JavaScript + XML，可以说是JavaScript的一种扩展语法，结合了JavaScript和xml的语法，js中可以编写DOM元素，有了jsx之后，可以更加清晰的描述DOM的结构层次，编写代码时也更加的方便快捷，包括了js中的语法和相关api。jsx执行更快，编译后做了优化。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。1 项目下新建store目录，store下新建index.js和modules目录。使用条件：如果需要在全局中存储一些从常量（不会被更改的数据），比如。前置：在项目的根目录下新建components目录用来存储组件。1 开启当前页面支持下拉刷新的开关pages.json。path(路由) + style(页面标题配置等)2 分模块，在modules新建模块.js。使用：位置：App.vue。2 js上原生的方式。

9、如果需要将当前分支的代码推送远程仓库 git push origin 分支名。分支指的是从主线上分离出来进行另外的操作，不会影响主线，它可用来解决临时需求；12、另开一个新的分支，进行后续功能的开发【当前分支就是基于主分支最新的代码】git checkout 是切换分支 ，如果分支不存在则会创建分支。3、将远程仓库中的git 和ignore文件拷贝到当前项目中。当分支做完事后可合并到主线上，而分支的任务完成可以删掉了。11、如果当前分支功能基本完事，将分支进行合并。

核心思想：利用下标实现。

基本语法

预览： 调试器在手机屏幕上的真机调试： 调试器在PC端，方便调试编译：一般情况下当ctrl+s保存时会自动编译，如果遇到缓存等bug，点击该按钮可以强制重新编译上传：上线才用提前配置：详情---》本地设置---》打钩不检验合法域名。。。。微信中发送的ajax的域名必须是https开头，并且需要在官网中配置使之合法，才能够正常发请求。

原理：flexible.js搭配rem，引入后就会自动在根节点用到font-size属性，今后改变屏幕大小时，能够自动更改font-size。flexible是阿里团队开源的一个js库，本身就是用来解决移动端的自适应问题。2 下载china.js,并且放入 utils中。可视化使得数据表现得更加直观，数据特点更加突出。大屏只是数据可视化的其中的一个表现终端。3 初始化echarts实例对象。3 在main.js引入使之生效。3 header布局。5 Pannel布局。6 Center布局。

1 依然在项目根目录中新建2 取名规范为：.env.xx ,xx就是自定义名字3 配置package.json中的 scripts属性语法："自定义命令名" :"vue-cli-service serve/build --mode .env的后缀名"},

1 bind() {} , 只会在初始化时调用一次，当指令绑定到某个元素时生效 2 inserted() {} ，在bind之后执行，当被绑定的元素挂载到页面时才会生效 （可能触发多次） 3 update() {} 元素更新时触发demo1：页面上有两个文本框，当页面加载完毕后指定某一个文本框获取焦点新建目录和文件：src/directives/index.js编辑index.js。

场景：当刷新页面时，会使得vuex仓库中的数据归零概念：当路由发生跳转时，会被导航守卫拦截（自身就是函数），我们就能够在函数中实现自己的业务。

如果要实现在某个路由对应的组件中进行局部组件切换，那么就需要在该路由配置中添加子路由（children），同理也需要在路由对应的组件中去添加新的路由出口( )vue项目都是单页面应用（public/index.html）,整个项目是由一个一个的组件来组成，需要搭配路由实现看起来像多页面应用（组件的切换）我们可以为每一个路由(路由文件中数组中的每一个元素)配置标记meta（数据）,今后可以在该路由对应的组件中获取到标记，从而实现某些业务。后端路由 ：请求地址 和 后端js文件中函数 的映射。

组件通信,eventBus,$parent,$children....

场景：tempalte中的{{}}尽量不要写复杂的业务逻辑，原因有2：1 分层不好看2 vue维护成本高（性能问题）解决：计算属性位置：和data、methods等并列。

vue2基础指令的用法

App.vue是所有组件的父组件（入口组件）,该组件一般不会真正的放布局，而是引入子组件，或者·写全局样式。指的是利用vue底层的响应式系统实现功能：只要数据发生了改变，则页面会自动重新渲染。以前是封装方法（属于js），现在是封装组件(包含了html、js、css)只要我们把数据和视图提前绑定好后，程序员只需要关注数据的变化即可。组件化：----》无非就是封装---->复用性。一个完整的页面是由多个组件组合而成。vue的特色之一：数据驱动。组件： *.vue文件。

在vue中建议使用axios 插件来实现异步请求该插件基于promise。

注意：如果需要让webpack帮你打包css ,css文件必须是一个单独的文件。注意：每一个被webpack打包的项目都会有一个核心配置文件，核心配置的名字：webpack.config.js。注意：webpack 默认只能打包JS文件，如果需要打包其他的文件，则需要安装对应的插件。注意事项：如果需要打包被css样式引用的图片，需要将css的loader 降为5.2.6。配置 module[打包html js css的步骤都需要有]注意：打包jQuery 在需要使用页面对应的JS文件中。

2、权限操作：在登录成功的前体下，不同的角色有不同的权限身份认证实现的方式：1、后端采用session 前端采用cookie2、后端采用jwt 前端采用本地存储token:临时身份认证令牌 登录成功后，后端或返回一个字符串给前端【这个字符串就称为token】,以后每次前端访问后端资源的时候就将这个令牌带着，后端就根据是否有这个令牌来判断是否进行了登录操作。

文件上传

nodejs-mongose操作数据库 mongodb,关联查询,分页查询

express的使用

js高级:作用域和作用域链,变量的提升,内存空间分析,立即执行函数,扩展运算符,REST剩余参数,解构赋值,闭包,防抖,节流,Set/Map

ajax,mock模拟数据

JSON

jquery

js操作DOM

BOM、DOM

js事件

js的函数和对象

变量,数据类型,循环,分支,数组,数组api

js简介

响应式布局

keyframes 动画的名称 {from {//动画开始的状态 } to {//动画结束的状态 } } 也可以使用百分比，当动画执行到某个百分比时，是什么状态 @keyframes 动画名称 {0% {} 20% {} 100% {} } 使用动画animation：动画的名称 动画的时长；​ 0%代表from，to代表100%每一帧动画的执行时间和两帧之间动画百分比有关，跨度越大，分配的时间越多时间计算公式：总的时间*两帧跨度的百分比。

transform。

过度