# WH2214 **Repository Path**: nikkt/wh2214 ## Basic Information - **Project Name**: WH2214 - **Description**: 左子哥厉害啊 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-02-03 - **Last Updated**: 2023-02-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WH2214 项目记录 # 仓库地址 # https://gitee.com/zuozhaoxi/wh2214 # 黄金4步 1. git pull origin master:master 2. git add ./ 3. git commit -m '备注' 4. git push origin master:master # origin 主机名 指向的是远程仓库 # 推送代码 把本地的代码推送到远程分支 # 4. git push origin 本地分支:远程分支 # git push origin master:dev 推送代码到dev 分支 # 拉取代码 把远程分支的代码拉取到本地分支 1. git pull origin 远程分支:本地分支 # git branch 查看分支 # git branch dev 创建dev 分支 # git checkout dev 切换到dev分支 # git clone https://gitee.com/zuozhaoxi/wh2214.git # git pull origin master:master (没有密码的) # (Vue3 + VantUI + Pinia + Vite ) # 11.28 - 12.02 (开发一个APP) # 如果不会写接口 直接用 嗨购的接口 # http://121.89.205.189:3000/apidoc/#api-User-PostUserLogin # 基本页面 # Guide 广告页面 # 错误页面 (404-503) # 登录版块 (登录+注册+找回密码+修改密码) # 主页 (底部foot 菜单栏 ) # 首页 # 商品分类 # 购物车 # 个人中心 # 商品详情版块 (点赞 + 收藏 + 评论 + 购买 + 结算 + 订单) # 联系人 (通讯录) # 地址版块 (地址管理) # 订单版本 (订单 增删改查) # Vite 新建一个项目 yarn create vite myapp --template vue-ts cd myapp cnpm i npm run dev # npm npm create vite@latest my-vue-app -- --template vue-ts # 适配 # 淘宝适配 # 1. 安装插件 cnpm i lib-flexible -S # 等比缩放 设计稿的宽度比上设备的宽度 等于当前设计稿的rem 比上设备的 rem # 淘宝适配的原理 (假设设计稿 750 1rem = 75 ) (设备宽度 375 => 1rem = 37.5 ) # 1. 把屏幕分成100等分 取10 等分为 1rem 1rem = 宽度 1/10 1rem = 10vw # 2. 根据dpr 进行缩放 viewport (注释 viewport meta) # dpr => 设备像素密度比 (window.devicePixelRatio) # dpr 越大 手机分辨率越高 手机越贵 # dpr = 1 1px 就只有一个物理单元 (1) # dpr = 2 1px 就有2个物理单元 (4) (最小的晶体管 手机屏幕) # dpr = 3 1px 就有3个物理单元 (9) # dpr = 4 1px 就有4个物理单元 (16) # dpr = 5 1px 就有5个物理单元 (25) # dpr = 6 1px 就有6个物理单元 (36) # 跨域 (Cors JSONP 反向代理 ) # 反向代理 (临时的用法 不能常规使用 投机取巧的 偷别人的数据 ) # express # cnpm i express-generator -g # express -e myproject # cd myproject # cnpm i # npm start # cnpm i nodemon -g # npm run watch # http://localhost:3000/ # 要求 # 1. 本科三年 # 2. 面试题 天花乱坠 # 3. 项目 为所欲为 # 4. 沟通 社牛 # 5. 运气 颜值 # Vue3管理系统 # 亮点教育管理系统 # 错误版块 # Guide 广告页面 # 登录版块 (登录 账号登录和手机登录+找回密码) # 主页 (侧边栏 头部 底部footer) # 首页 # 角色版块 (学员 1 班主任 2 讲师 3 主管 4 校长 5 董事长 6 ) # 用户版块 # 公告 # 意见 # 个人中心 # 测评版块 # 面试题目版块 # 面试版块 # 就业版块 # 成绩版块 # 教务版块 # 考勤版块 # vue 3.0 (proxy 数据) vue2.o (object.definedProperty) # createApp 返回一个提供应用上下文的应用实例 #setup 组合式api 封装业务代码 最终混入到 vue组件实例内部 this # 新的 setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口 # setup 中 你应该避免使用 this 因为它不会找到组件实例 setup 的调用发生在 data 、computed 或 methods 被解析之前 所以它们无法在 setup 中被获取 # 常用的组合api (同一个逻辑关注点相关代码收集 就是组合式API ) # ref 绑定一个变量 响应式 通过 xxx.value 去修改 # reactive 返回一个对象的响应式代理 响应式数据类型 (引用数据类型) 只能绑定对象和数组 # computed 设置计算属性 # watch(()=>) 监听值得主动改变 # toRefs 复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用 # toRef 复制 reactive 里面的一个属性然后转成 ref，而且它既保留了响应式，也保留了引用 # onMounted 组件初始化载入 # 组合式API (setup 里面 使用的 API ) # 选项式API (data methods mounted computed watch ) # Vue3 总结 # Vue3 和 Vue2 的区别 # Vue3 有哪些常用的API # 核心 ref() computed () reactive() watch() # webpack 本地存储 web Storage 本地客户端网页存储数据的一种方式 以域名为单位存储数据 操作简单 setItem getItem 大小不受限制 不会跟随HTTP 发送给后台 localStorage 永久存储 只要不手动删除就永远存储在本地客户端 sessionStorage 临时存储 只要浏览器关闭或者当页面关闭就会消失 web storage 存储格式 key-value {username;"zzz"} 取数据 localStorage.getItem(key) localStorage.username 存数据 localStorage.setItem(key,value) localStorage.key = value; 删除一条数据 localStorage.removeItem(key) delete localStorage[key] 删除所有数据 localStorage.clear() 遍历web storage Object.keys localStorage.key(index) localStorage.length 长度 JSON.stringify 把一个对象转换成JSON格式的数据串 JSON.parse 将数据解析成对象，返回解析后的对象 # CSS3 新特性 (animation transition ) # HTML5 新特性 # canvas 画布 # video / audio / camera # 语义化标签 # input # websokcet # video / audio 属性 # play # pause # volume # duration # webpack 安装插件 cnpm i webpack -g cnpm i webpack-dev-server -g cnpm i webpack-cli -g webpack -v npm init -y cnpm i style-loader css-loader -D cnpm i less less-loader sass sass-loader -D cnpm i source-map -D cnpm i babel-loader@7 babel-core@6 babel-preset-env -D cnpm i html-webpack-plugin -D cnpm i webpack-open-browser-plugin -D cnpm i url-loader file-loader -D cnpm i mini-css-extract-plugin -D cnpm i babel-preset-react -D cnpm i babel-preset-stage-0 -D cnpm i babel-plugin-transform-runtime -D cnpm i redux-thunk redux-promise -S cnpm i redux -S cnpm i react-router-dom@6 -S cnpm i react-redux -S # react # react 有几层境界 # 1 纯 react UI + API + 路由 # 2 redux(vuex) # 3 react-redux + immutable (rtk + redux-saga + flux ) # 4 mobx + immutable # 5 hooks (纯函数写代码) # 6 hooks + mobx + react-redux + immutable # 7 hooks + mobx + react-redux + immutable + typscript + dva + umi # 8 升天... # 安装react 脚手架 cnpm i typescript -g 安装脚手架 # create-react-app # https://create-react-app.bootcss.com/ cnpm i create-react-app -g create-react-app --version create-react-app react-app 安装项目 npx create-react-app@4.0.3 react-app cd react-app npm start 启动项目 http://localhost:3000/ npx create-react-app my-app --template typescript npx create-react-app react-app create-react-app react-app --template typescript npx create-react-app react-app --template typescript # dva (https://dvajs.com/guide/getting-started.html) cnpm install dva-cli -g dva -v dva new dva-app cd dva-app npm start http://localhost:8000/ # umi (https://umijs.org/zh-CN/docs/getting-started) mkdir umiapp cd umiapp npx @umijs/create-umi-app yarn create @umijs/umi-app (失败) cnpm i 反向安装 npm start # vite - react (https://vitejs.cn) yarn create @vitejs/app yarn create vite myvite --template react yarn create vite viteapp --template react-ts cd myapp cnpm i npm start # 原生 1. JS有哪些基本类型 哪些引用数据类型 2. JS 里面 null 和 undefined 的区别 3. 如何判断 基本类型 引用数据 数组 原型 (方法) typeOf instanceOf isArray __proto__ # 3.1 . 谈一下 Promise的理解 (有几种状态 race和all的区别 ) 4. JS 宿主对象 本地对象 内置对象(Math ) 分别有哪些? 5. JS 线程和进程的区别 如何启动多个线程 如何关闭线程 # 5.1 什么微任务和宏任务 Promise是什么任务 setTimeOut是什么任务 6. TCP 和 UDP 的区别 7. 解释一下什么是TCP的三次握手 (TCP四次挥手) # 8. JS 原型和原型链的区别 # 9. 什么是 强缓存 弱缓存 协商缓存 (性能优化) # 9.1 cookies storeage session 三者的区别 10. 图片懒加载实现原理 (代码) # 10.1 前端上传图片上传文件的流程 # 10.2 如何同时上传多张9张图片 11. 浏览器从输入 url 到页面显示 这一系列发生的哪些事情 12. Ajax 请求数据的流程 (代码) (readyState 01234) # 13. Http 状态码有哪些 (10条) (206 400 401 403 500 503 200 100 303 ) # 13.1 . http 和 https 区别 14. 跨域怎么生成的 如何解决跨域 15. JSONP的实现原理 是不是ajax 15.1 什么是正向代理和反向代理 (代理) 16. async + await 的实现原理 和 promise 的区别 17. 什么是闭包 闭包的意义 18. ES6 有哪些新特性 (10条) 19. let 和 const 的 区别 7.20 19. 函数的防抖和节流的概念 (代码封装实现) 20. 什么是 深浅拷贝 深浅监听 深浅复制 21. 实现深拷贝的方法 有哪些 (5种) # 22. 箭头函数和普通函数的区别 和 this 的几种指向 # 22.1 假如后端一次性给你20W 条数据 , 该怎么优化 # 23. 什么是作用域链 什么是函数作用域 # 24. 前端性能如何实现 (10条) 25. 事件里面 有 DOM0 DOM2 二者区别 再说事件委托 26. for 和 forEach map 循环数组的区别 27. ES6 map 和 set 数据类型 的区别 28. 数组去重的3种方式 (代码) 29. 数组排序的3种方式 (代码) 30. 什么是变量提升 31. 0.1 + 0.2 = ? 为什么 怎么解决 # 31.1 $.extends 和 $.fn.extends 的区别 32. 什么是 长链接 短连接 长轮询 短轮询 33. 什么是事件循环 (事件轮询 EventLoop) 34. 如何实现继承 (3种) # 34.1 什么是方法重写 方法重载 35. apply call bind 三者的区别 # 35.1 get 和 post 请求的区别 是否可以缓存 传输的数据长度是多少 36. 什么是面向对象编程 什么是面向过程 37. 什么是函数柯里化 和 函数反柯里化 38. 开发常用的设计模式有哪些 (5种) 39. 什么是敏捷开发 40. 什么是低代码开发 41. loadash 的 理解 42. 什么是微前端 什么是qiankun 43. 什么是优雅降级和渐进增强 # Vue 面试题 1. Vue 如何自定义指令 和 如何自定义过滤器 2. Vue 自定义指令 有 几个钩子函数 每个函数有几个参数 3. Vue 有哪些生命周期钩子函数 10个 4. Vue 你对 v-model 的理解 5. Vue 详细 组件如何通信 6. Vue v-if 和 v-show的 区别 v-for和v-if 一起怎么处理 7. Vue 路由守卫有哪些和使用的场景 8. Vue 如何实现鉴权管理 addRoutes 9. Vue addRoutes 实现动态路由的代码 10. Vue 里面的 watch 和 computed 的区别 11. Vue 路由的基本配置流程 和 路由如何传参 12. Vue.use() 代码有什么作用 13. Vue 虚拟DOM 和 diff 算法的理解 14. Vue render 函数的理解 15. Vue NextTick 的 理解 16. Vue 强制刷新组件视图的方式 有哪些 $fouceUpdate 17. Vue key 的理解 18. v-html v-clock v-pre 三个指令的作用 19. vuex 和 pinia 的 区别 20. vuex 实现数据管理的原理 21. vuex 如何实现持久化和实现模块化 22. Vue 组件的data 为什么必须是一个函数 必须有返回值 23. Vue.extend 的理解 24. 父子组件生命周期执行的顺序 25. Vue mixins 混入的理解 26. Vue 组件动态切换的方式有哪些 v-if v-show component 路由 27. Vue 组件里面有几种模式的插槽 28. Vue 如何在封装组件使用 v-model 29. Vue keep-alive 的具体作用 和路由使用 keep-alive缓存 30. Vue 和 React 的区别 31. npm run serve 执行后发生哪些事情了 32. Vue 怎么解决白屏问题 33. Vue 组件如何实现循环自调用 34. Vue 项目 常用的插件 10个 (类库 - Vue 全家桶 ) 35. Vue.set 和 Vue.delete 的作用 36. Vue3 和 Vue2 的区别 37. Vue 项目里面的项目细节 (3个) 38. Vue 项目的 打包上线的流程 (详细化) 39. 什么是组合式API 有哪些??? 40. 谈一下你对 Vue3 里面的setup 理解 41. Vue3 有哪些常用 生命周期钩子函数 42. Vue3 reactive 的用法 43. Vue3 ref 的理解和用法 44. toRef 和 toRefs 的区别 45. Proxy数据的理解 46. Vue3 如何自定义和自定义过滤器 47. Vue 里面 有实例方法和实例属性 48. Vue3 里面你对 createApp 的理解 49. Vue hash 和 history 模式的区别 如何去# 50. Vue 如何实现切换路由动画 51. Vue 怎么实现路由懒加载 # React 面试题 1. react组件定义规则和JSX语法 2. React 创建组件的方式 React.Component 纯函数组件 Function 3. React class 类 里面的 super 的理解 4. React onClick的 工作原理 # 5. React 如何实现性能优化 # 6. setState 是一个异步函数还一个同步函数 为什么 ? this.setState({},()=>{}) # 7. React 组件生命周期有哪些? 5个 8. react 里面 props , state, context 三者的区别 # 9. React 父子组件通信的方式有哪些 ? (父子 兄弟 ) # 10. 高阶组件和高阶函数的理解 ? 11. HOC 的优点? (HOC 和 Vue 里面的 mixins 的区别 ) 12. React描述你对虚拟DOM 还有diff算法的理解 13. React 什么是受控组件和什么是非受控组件 # 14. React 17 和 18 有哪些区别 ? 15. React 对 ref 的理解 # 16. React 纯函数和 class组件的区别 17. React 里面的事件机制原理 18. React-router-dom v6 常用哪些组件 ? (HashRouter BrowserRouter Route Routes Router Link NavLink ) 19. React-Router-DOM v6 路由如何传参数 怎么获取参数 20. React-Router-DOM v6 useNavigate 和 useRoutes 对这2个函数的理解 21. React 路由如何实现 懒加载 ， 它有什么优缺点 ? 22. Redux 的 实现原理 23. redux 里面 action 和 reducers的特点 24. redux 和 react-redux 的区别 25. redux 如何异步操作管理 26. react-redux 里面 你对输入逻辑(mapStateToProps)和输出逻辑的理解(mapDispatchToProps) 27. react-redux (redux) 的优缺点 有哪些? 28. mobx 的实现原理 (数据管理模式 ) 29. 常用的 hooks 方法有哪些 ? (useState useRef useEffect useCallback useMemo useContext ) 30. useCallback 和 useMemo 的区别 31. mobx 里面 observerable 和 observer 的区别 32. 谈一下 你对 Proxy 数据 的理解 33. 如何自定义 Hooks (hooks的意义) useStore() # 34. typescript 你对泛型 和 type 和 接口的理解 35. mobx 和 redux 的区别 36. React 项目的开发bug (3条) 37. React useState 是同步还是异步函数 如何优化 38. React 对 useContext 和 useReducer 的理解 39. 自定义HOOKs 的意义是什么? 为什么要用Hooks 40. React fiber 的理解 # 小程序 webpack Node 原生 1. 小程序 的优势 是什么 ? 2. 小程序开发和网页开发的区别 ? 3. 小程序的所有的生命周期 ，你知道的有哪些 ? 4. 你知道的小程序的兼容问题有哪些? # 5. 小程序常用的API 有哪些 (10条) 6. 小程序如何自定义 头部 header # 7. 小程序如何实现微信支付 # 8. 小程序如何实现分享 9. 小程序如何合并2张图片为一张图片 wx.downLoadFile wx.getImageInfo wx.canvasToTempFilePath 10. 小程序如何打开一个网页 (公众号页面) # 11. uni-app 开发小程序的流程 # 12. 简述微信小程序原理 13. wxss 和 css的区别 还有你对 rpx 的理解 14. 你说你的小程序如何实现授权登录的 ? # 15. 微信小程序如何实现IP定位 显示 16. 微信小程序如何跳转打开其他的小程序 17. 谈一下webpack 和 gulp 和 RollUp 的区别 18. webpack 是如何打包 css / less / scss 19. wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别 20. 小程序的发布流程 21. HTML5 有哪些新特性 22. 说一下 flex 弹性盒 布局有哪些常见的属性 # 23. 什么是 BFC 24. CSS3 有哪些新特性 25. Object 对象有哪些常用的方法 object.entries 26. 数组去重和排序的思路 27. Array 有哪些常用的方法 28. 防抖里面 前置防抖和后置防抖 区别 29. 什么是优雅降级和渐进增强 30. 函数的递归如何实现? 31. 混合开发的原理 # 32. typescript 和 javascript 的区别 33. Vue 项目的开发细节 (3条) 34. React 项目的开发细节 (3条) 35. 小程序项目的开发细节 (3条) # 36. 如何实现全端自适应 (适配和媒体查询) 37. 如何封装项目开发的高级组件和使用心得 38. 谈一下前端未来发展趋势的理解 39. typescript 有哪些数据类型 # 假期作业 # 1. 面试题 (每天抄5道面试题半个小时 ) # 2. 小程序 (uni-app && taro 1小时 10天 每个2天发项目进度接口 ) # 3. react 项目 (2个小时 10天 20个小时 ) # 4. 简历 (必须细化) # 面试题收集器 # 添加面试题 # 面试列表 (最新的和最热的)