开发中曾经有疑惑的地方



https://blog.csdn.net/ljfphp/article/details/83545958 失去焦点   https://ask.csdn.net/questions/715074
https://msd.misuland.com/pd/2884250171976188060   https://segmentfault.com/a/1190000009478377#articleHeader9 
https://www.cnblogs.com/jiasm/p/9482443.html   https://www.cnblogs.com/best/p/6212807.html#_label3_0_1_4

vue进入页面刷新  attr改为prop来设置选中未选中https://www.cnblogs.com/xiaozhuyuan/p/7542158.html
生命周期深刻理解
为什么在vue中图片上传到云更好?
配置测试环境、开发环境、生产环境?
build、config文件中的配置文件详解?
透过问题看本质
vue-cli打包的原理是什么? 直接在index.html引入文件和在main.js注册的区别?
路由切换的原理?vue是首页把所有的资源全部加载完吗?
如何快速入手一个框架、插件? github的example文件夹  node_modules里面有源码
如何在进入页面的时候重新刷新页面?
为什么再次刷新页面,通过url传递的参数获取不到了?
axios传递的参数是中文的时候,通过encodeURI来编码?
swiper插件重写button按钮?
在生命周期中可以this,但是在生命周期的方法内部再调用this就会报错this is not undefined,因为此时的this不是实例化后的vue对象,所以需要用that保存this,然后再使用。
打包后生成的
css:
适配:https://www.cnblogs.com/lyzg/p/4877277.html   https://www.cnblogs.com/lolDragon/p/7795174.html  https://segmentfault.com/a/1190000008767416


这个项目给你最大的收获是什么?
1、做项目的时候一定要从全局出发,考虑到后续产品需求的变动、迭代,所以写的代码可扩展性要高、健壮,尽量做到工程化、模块化。
2、谷歌模拟器模拟的是手机上的浏览器,跟在微信浏览器打开会有一些差异,可以使用微信开发者工具来模拟在微信上的效果。写页面的时候要考虑到不同尺寸的兼容手机、不同浏览器(微信浏览器)打开的效果
3、有时候也可以通过循环来实现减少代码量。例如获取name不同的Input的value值,然后赋值给英文字母加索引组成的变量。
4、使用vue调试器:点击控制台的vue,然后点击点击对应的标签就可以看到给的data等信息

jq的使用:
为什么attr()设置单选框的选中状态无效,prop()有效?为什么attr()无效的时候我发现不了这个问题?为什么通过css()来设置背景图从而达到切换是否选中状态会无效(有时候是再次点击时无法选中)
源码中的$(this)是什么?

css:
以后如果碰到页面内容超过屏幕或者父元素,可以通过overflow:hidden;
移动端页面布局的技巧
meta标签的具体作用
很多css3的新特性,最好加上兼容各大浏览器的代码 -webkit等等
生成base64和上传到云服务
margin-top为什么失效  https://www.cnblogs.com/chaozhang/p/4711282.html
fixed z-index失效
去掉新版本微信底部的导航栏 https://segmentfault.com/q/1010000015158396  https://blog.csdn.net/gaofei880219/article/details/80569026
iphonex适配问题:https://www.cnblogs.com/lolDragon/p/7795174.html
    background: url(http://file.88mmmoney.com/eeb7c503-d6cd-4f6f-91df-cc28b9c29b0b) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #CCCCCC;


下次再碰到同样的问题,怎么保证能快速定位bug?所以需要把遇到的问题总结归纳一下?

http://192.168.10.40:8080/zentao/bug-browse-15.html  https://m.88mmmoney.com/static_view/vue/cfo/index.html#/test?enterpriseId=5d40ef3de4b0e3e00c0bc853




项目二:金融学院课程管理后台
js:
inport导入有多个文件的文件夹的时候,那导入的到底是哪个文件? index.js  https://www.cnblogs.com/goloving/p/8889585.html
get请求的接口和网页的url区别

vue:
1、prod.env.js dev.env.js配置文件详解  build和config文件夹里的文件
2、多人开发、
3、路由切换的时候会重新刷新吗
4、记得配置完后要重新npm run dev
5、npm run dev和npm run build指令分别调用哪个文件
6、直接操作将接口返回的数据赋值的变量,接口的数据会被修改吗?
7、如何把插件发布到npm上
8、npm i -S vuedraggable 为什么可以直接在页面import Sortable from 'sortablejs';导入  https://blog.csdn.net/qq_26440803/article/details/83663511
9、拖拽: https://blog.csdn.net/qq_26440803/article/details/83663511   注意:el是父元素   文档:https://github.com/SortableJS/Sortable#options  如何在github上查看英文文档
前端打包生成的dist文件放在后台的哪个目录下,哪个服务下?
打包得时候index.js文件需要修改吗
10、element-ui 标签就可以添加代码
11、vue里面有三元运算符,既可以改样式,也可以 改文本  
                  
                
        element-ui和三元运算符联合使用可以避免某些需要对接口返回的数据进行转换的操作
12、router里面的各种路由导航搞清楚
13、通过localStorage也可以来对页面进行是否清理的操作
14、npm run dev 和 npm run build  https://segmentfault.com/a/1190000010659925
15、设置textarea高度::autosize="{ minRows: 7, maxRows: 14}"
16、项目部署后字体图标等font文件无法正常加载 Failed to decode downloaded font_ _URL_ : 解决办法:https://br-bai.github.io/2019/06/10/%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2%E5%90%8E%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%AD%89font%E6%96%87%E4%BB%B6%E6%97%A0%E6%B3%95%E6%AD%A3%E5%B8%B8%E5%8A%A0%E8%BD%BD%20Failed%20to%20decode%20downloaded%20font_%20_URL_/
17、baseURLDE
18、我:
4.第一次页面加载会触发哪几个钩子?
答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
我:
el属性
我:
eventBus事件中心
19、看看能不能通过《高级》书的浏览器缓存来做为项目的难点
20、局部刷新页面:provide + inject 
21、 props和emit实现分页   https://www.cnblogs.com/Byme/p/10095144.html    https://segmentfault.com/a/1190000008606958
22、JSON.stringify(params) 看看源码,params知识外包,解析的时候里面的字段
23、多个判断,直接加&&  v-if="!$route.meta.keepAlive && isRouterAlive"
https://blog.csdn.net/csdn_yudong/article/details/79668655   axios的post请求传参时,axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据,所以不需要JSON.strfying()
24、跨域原理:
25、打包后字体图案不显示:https://www.zhihu.com/question/55605905

25、vue-cli项目打包部署后,打开空白页,Network显示index.html文件飘红,很有可能是路径问题,需要在index.html文件改下引入的css、js文件路径
26、需要注意的一点:接口完整样子是http://192.168.10.44:9205/channel/queryPageByCrm,
如果设置代理:
proxyTable: {   //官网:https://vuejs-templates.github.io/webpack/proxy.html
        '/mfs-crm': {   // '/'的意思是所有接口都可以代理,如果'/'改成'mfs-crm',则'mfs-crm'开头的接口才能代理
            target: 'http://192.168.10.44:9205/',   //柳哥接口
            changeOrigin: true,     ////开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            ws: false,   //ws的作用
            pathRewrite: {    
              '^/mfs-crm': '/' //'^/mfs-crm'的作用是把接口中的/mfs-crm替换为/    
            }
        }
    },
proxyTable: {
        '/mfs-crm-web': {  //在页面中调用/mfs-crm-web相当于http://192.168.10.163:9205/mfs-crm-web,所以我们需要在pathRewrite中将mfs-crm-web重写为'/',可是不知道为什么,我调用的时候request中还是出现了mfs-crm-web
            target: 'http://192.168.10.163:9205/',  //加菲接口
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/mfs-crm-web': '/'
            }
        }
    },
页面调用:
错误用法 -- index.vue:  this.axios.get('/mfs-crm/channel/queryPageByCrm')
为什么错误?因为打包后部署到服务器上,/mfs-crm不代表http://192.168.10.44:9205/了,在本地调试的时候/mfs-crm代表http://192.168.10.44:9205/。所以开发的时候就要避免这种写法。正确写法:this.axios.get('/channel/queryPageByCrm'),然后在axios配置拦截器的时候
    默认加上/mfs-crm,如下:
                export default axios.create({
                    baseURL:process.env.BASE_URL
                })

28、vue-quill-editor富文本编辑器:
    vue-quill-editor  1、获取光标位置  2、富文本不能上传大一点的图片,因为它插入图片的方式是将图片转为base64再放入到内容中,如果图片比较大的话,富文本的内容就会很大,所以需要通过将图片上传到服务器,然后返回图片的url,再将url插入到图片中
    https://www.cnblogs.com/zhengweijie/p/7305903.html  https://www.cnblogs.com/jsonYoung/p/9504084.html
29、new vue()  为什么传的参数是data、method、mounted等等
30、pages里边有这么多文件,打包后生成的index.html指向的是默认的首页
31、vue项目移动端适配方案:lib-flexble和vw   
  vw:https://www.cnblogs.com/kdcg/p/9106463.html    
    1、npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save
    2、配置.postcssrc.js
  flexble:
    https://blog.csdn.net/weixin_41487694/article/details/90256014
  两种方案都需要注意的地方:样式如果写成内联样式,则px不会转换为rem或者vw。所以样式要在style标签里边写
webpack:
1、打包的原理

swiper: https://segmentfault.com/a/1190000013044682
1、https://blog.csdn.net/u012421818/article/details/49202355 页面有多个不同类型的轮播图
2、注意:在轮播图中遍历图片,要在slide中,而不是父元素.例子:
element-ui: 1、限制上传图片的宽高 https://www.jianshu.com/p/59eba5fd7598 https://www.cnblogs.com/fairy62/p/9680361.html 10、element-ui 标签就可以添加代码 css: 1、text-align:center;可以让元素水平居中 2、整个元素以及子元素都伸缩一定倍数: -webkit-transform:scale(0.5) ; -moz-transform:scale(0.5) ; -o-transform:scale(0.5) ; js: 1、false ? "ss" : false ? "aaa" : "eee" //eee 两个三元运算符可以联合使用 2、上传图片自动转换为文件流吗 element-ui 3、如果在localStorage.setItem("isAddContent",false); 那么if(localStorage.getItem("isAddContent")){ console.log("ddd") } //ddd 原因是:localStorage.getItem("isAddContent")得到的是字符串"false" 如果改为localStorage.setItem("isAddContent","false");if(localStorage.getItem("isAddContent") == "true")就不会执行了 4、通过localStorage也可以来对页面进行是否清理的操作 5、上传图片:uploadConfig(e) { console.log(e.target.files[0]) let formData = new FormData(); formData.append('media', e.target.files[0]); let config = { headers:{'Content-Type':'multipart/form-data'} }; this.$http({ method: 'post', data: formData, url: '/file/upload', headers: {'Content-Type': 'multipart/form-data'}}).then(function (response) { console.log(response.data) }) }, 6、base64 .cavans好像也可以上传图片 https://yzd.88mmmoney.com/my/toLogin.htm?app=EWPerson&returnUrl=http%3A%2F%2Fyzd.88mmmoney.com%2Fmy%2FmemberDetail.htm 7、对象的属性值写boolen值或者布尔值的字符串好像都可以?为什么 8、对象属性值可以用三元运算符来赋值 9、注意:判断两个变量是否相同,不能用单个等号判断 10、空数组不可以直接这样添加对象元素 this.typeOptions[0].label = allModuleDataInfo[i].name; this.typeOptions[0].value = allModuleDataInfo[i].id; 应该这样: var moduleDataInfoobj = {}; moduleDataInfoobj.label = allModuleDataInfo[i].name; moduleDataInfoobj.value = allModuleDataInfo[i].id; this.typeOptions.push(moduleDataInfoobj); 11、拖拽: https://blog.csdn.net/qq_26440803/article/details/83663511 12、Promise和异步 13、onload好像是异步 14、Date时间格式化为"yyyy-MM-dd HH:mm:ss" https://blog.csdn.net/qq_22181793/article/details/78665164 15、正则速差表 http://devhints.cn/regexp 16、replace和href的区别:a->b-c。replace点击返回按钮,c跳到a,href是c跳到b 难点: 1、拖拽失败后复原 2、移动拖拽图标,实时预览板块也要也要变化 个人项目二:nodejs + react + mongoose + antd + express 部署到外网:https://blog.csdn.net/xiamocsdn/article/details/100535519 复杂的个人项目: react: 1、index.js如何作用到public/index.html文件 https://segmentfault.com/q/1010000011516195 调试工具: fiddler chrome查看请求的信息 下载一个app做一些逻辑思维的训练 剩余bug: 1、模块内容点击删除,无效 2、模块编辑页的模块类型选项是用来修改模块类型的,通过切换模块类型不能切换显示模块内容 3、张健本地调试用/mfs-crm,我本地调试用/crm。打包给张健测试的时候先用/,build/prod.env.js文件改为"/"。,等鉴权弄好了还是用/mfs-crm ping可以知道ip的信息是否起了??? 44服务连得47数据库--测试,43服务连得33数据库--开发 项目三:财商测试H5 vue: 1、v-for循环修改点击元素的样式:https://blog.csdn.net/qq_41627870/article/details/88077165 2、适配方案:flexble和vw 3、理清楚pre()和next()代码的逻辑 4、赋值data里边的数据给一个新变量或者新的data里的数据,修改新变量或者data里的数据,都会改变原来的数据,所以需要申客隆 5、post传参的其它方式:https://www.cnblogs.com/yuerdong/p/10277177.html 有时间用node都试下 6、mixins: https://www.cnblogs.com/Ivy-s/p/9937173.html 7、input标签的id属性绑定label的for属性 例子: :for="index" :id="index" 8、两个页面的style标签都加上了scoped,有同样的样式,但是打包后,两个页面的样式还是会互相影响 9、在单选或者多选框的操作中,v-model就是value的值,v-model获取的也是value的值 通过v-model,单选按钮可以不需要设置name属性,为什么呢? 默认值:如果v-model的值与value的值相同,相当于默认选中 https://www.jianshu.com/p/b1b80853b054 10、push用replace代替 这样可以去掉微信底部的返回tab。 11、input标签绑定label标签,点击事件要绑定在input上,如果是在label上,点击事件会执行两次 微信授权登录、分享:https://segmentfault.com/a/1190000010278697 1、分享不需要授权 2、长按图片扫码失效:https://mp.weixin.qq.com/s?__biz=NzA3OTQ2OTgw&mid=205918916&idx=1&sn=d729ef70ea1e7fc50e649352a63a2564&scene=1&key=c76941211a49ab586ba4831f2f6fa42fbb2525460003fa8e19bc205b9b25facbf60da78977da071ddbc41a5be6a7b9fa&ascene=0&uin=NTE3ODg0NjE1&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.10.3%20build%2814D136%29&version=11020012&pass_ticket=WPa8XnvIzBrBOA6RHy2RMECcrsuN2QiksK8Y1Z/D3Odk49uIsXOex7EV2NXN9m5X 这个bug可以作为项目亮点:测试的顺序:首页--》测试页--》结果页 第一次打开首页进行测试的时候,流程走下来,结果页的二维码可以识别成功。第二通进入页面(通过点击分享链接(首页,但是url加上了参数了))的时候,因为已经测试过了, 所以获取url的参数直接跳转到结果页,也就是说整个过程进行了两次跳转,先进入首页,再跳转(通过router.push或者replace跳转)到结果页,问题的根本就出现在这里,好像通过router连续跳转到的页面,微信不会识别页面上的二维码,但是通过window.location.href的就可以 我的解决办法:this.$router.replace('/testResult');替换为window.location.href = "http://c.88mmmoney.com/testResult"; 3、微信代理不能用ip访问,需要用给代理后的域名访问 http://192.168.10.66/testResult http://c.88mmmoney.com/testResult 4、在4g网络,样式正常,公司wifi样式加载失败 5、上个版本的分享链接(url中有参数)打开后 js: 1、获取url参数 window.location.search.substring(1),如果参数是中文,则要通过decodeURI("参数")转码 2、encodeURI()和encodeURIComponent(),解码的时候要对应 https://blog.csdn.net/qq_34629352/article/details/78959707 3、es6:三点 reqConfig.params = { ...reqConfig.params, ...{ // tokenId: store.state.tokenId, // userId: store.state.userinfo.userId ? store.state.userinfo.userId : '1' userId: store.state.userinfo.userId || store.state.userinfo.memberId } } 4、前后端联调排除bug的技巧 5、财商加友盟统计:https://open.cnzz.com/a/func/report/ VideoPlay.vue: isCommonShare 用工具模拟下各种格式的数据传参 multipart/form-data好像是用来传文件的?可以传别的吗 filder工具可以用来判断前端还是后台出问题了 127.0.0.1 localhost的作用 https://baike.baidu.com/item/127.0.0.1/4563698?fr=aladdin 127.0.0.1的作用:127.0.0.1是回送地址,指本地机,一般用来测试使用。回送地址(127.x.x.x)是本机回送地址(Loopback Address),即主机IP堆栈内部的IP地址, 主要用于网络软件测试以及本地机进程间通信,无论什么程序,一旦使用回送地址发送数据,协议软件立即返回,不进行任何网络传输。 手机设置代理:https://www.cnblogs.com/softidea/p/5980991.html Remote Address:远程地址,也就是请求的ip地址。Request URL:http://c.88mmmoney.com/site/questionnaire/results/save的请求地址是Remote Address: 127.0.0.1:8888 css: 1、input背景图总结 2、css这种写法:stylesheet/stylus 3、只改变父元素透明度,不改变子元素透明度 https://blog.csdn.net/zhanghuihuihappy/article/details/51009604 将父元素的背景opacity:0.8;background:#090f1ecc 改为rgba(9, 15, 30,0.8); 4、弹窗写法总结:遮罩窗和窗上的内容尽量写成同级元素。如何避免弹窗内容随着触屏滑动而滑动,把弹窗的position设置为fixed; 5、媒体查询失效 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { } 6、css预编译lang="stylus" 1 http: 415:一般都是传的参数的类型跟后台想要接受的不一致 https://www.cnblogs.com/holdon521/p/8203456.html 微信: 二维码无法识别:https://www.cnblogs.com/daipianpian/p/6421843.html https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx67f726cb6b5d1d56&redirect_uri=http%3A%2F%2Ffs.88mmmoney.com%2Flogin%2Fweixin%3FreturnUrl%3D%252Findex&response_type=code&scope=snsapi_userinfo&state=userinfo https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx371846a3cc10ba1f&redirect_uri=http%3A%2F%2Ffs.88mmmoney.com%2Flogin%2Fweixin%3FreturnUrl%3D%252Findex&response_type=code&scope=snsapi_userinfo&state=userinfo&uin=MjQ1MDYwNzAxMg%3D%3D&key=9d288677f073f0004209c095ae78e87949851a8e4a58a9cb1d97609b479513db429e9856d26258bc786987ffcc5198f9&pass_ticket=I0IcGDd2oPIE2kEPxy+JVPgYnT+4Gphgq/2c60FbjfSPki3K2KVd20RUUEf9GdcYGoNOuvgzzPnbRjE8niYk6g== 微信代理不能用ip访问,需要用给代理后的域名访问 http://192.168.10.66/testResult http://c.88mmmoney.com/testResult 4fa5c9c0-fa8d-448b-a21d-ef9293d8cee8 unid :"o2XkXwCdDj0q5QUukNL3kTK8NboY" 昵称 开发工具: webstorm:激活码:https://blog.csdn.net/lt326030434/article/details/90229298 fillder代理:http://c.88mmmoney.com/financialIndex 点击AutoResonder,点击Add Rule --> Rule Editor --> 上http://c.88mmmoney.com 下http://192.168.10.131:8080 link: 'http://c.88mmmoney.com/financialIndex', // 分享链接 后边加上用户的昵称,打开首页,前端通过url判断是否显示隐藏 保存接口加上unid和昵称 用工具模拟下各种格式的数据传参 multipart/form-data好像是用来传文件的?可以传别的吗 filder工具可以用来判断前端还是后台出问题了 127.0.0.1 localhost的作用 https://baike.baidu.com/item/127.0.0.1/4563698?fr=aladdin 127.0.0.1的作用:127.0.0.1是回送地址,指本地机,一般用来测试使用。回送地址(127.x.x.x)是本机回送地址(Loopback Address),即主机IP堆栈内部的IP地址, 主要用于网络软件测试以及本地机进程间通信,无论什么程序,一旦使用回送地址发送数据,协议软件立即返回,不进行任何网络传输。 手机设置代理:https://www.cnblogs.com/softidea/p/5980991.html Remote Address:远程地址,也就是请求的ip地址。Request URL:http://c.88mmmoney.com/site/questionnaire/results/save的请求地址是Remote Address: 127.0.0.1:8888 1、API_HOST: 默认加在接口前边的部分() 2、baseurl: 3、微信代理 手动设置代理: 4、filler代理 fillder导入D:\gitlab\接口文档\财商测试里的微信登录文件 作用:因为测试微信的登录、分享等功能,需要url中用到域名,所以说,如果用本地ip的话就无法调用分享登录等功能,所以要通过fillder转发骗过微信(微信开发者工具),允许本地ip。 ip相当于就是代理的域名了 将c.88mmmoney.com重定向至192.168.10.131(电脑会把c.88mmmoney.com解析成192.168.10.131)参考https://zhidao.baidu.com/question/168805623.html ip地址与域名(不包括http等协议)是一对多的关系。一个ip地址可以对应多个域名,但是一个域名只有一个ip地址 5、调试保存接口需要获取用户的unid 6、微信登录要求:1、必须用域名访问,所以导致必须用c.mmmoney.com访问,所以需要代理(因为本地本地的服务是ip,所以需要代理,将域名c.mmm映射为ip。) 7、localhost、127.0.0.1 和 本机IP之间的区别: https://zhidao.baidu.com/question/1176120779058268299.html 1、localhost等于127.0.0.1,不过localhost是域名,127.0.0.1是IP地址。 2、localhost和127.0.0.1不需要联网,都是本机访问。 3、本机IP需要联网,本机IP是本机或外部访问, 本机 IP 就是本机对外放开访问的IP地址,这个网址就是与物理网卡绑定的IP地址。 8、调试好像需要连上网 经过fillder转发后,http://c.88mmmoney.com/answer相当于192.168.10.141:8080/answer 有时候报报200,但是返回的数据提示查询失败了,原因可能是传参有问题 购买域名:购买自己的域名(万网、dnsPod、godaddy) 财商加友盟统计:https://open.cnzz.com/a/func/report/ 财商测试分享次数统计:https://web.umeng.com/main.php?c=eanalysis&a=frame&siteid=1278122975#!/1571904264018/eanalysis/event/1/1278122975/2019-10-24/2019-10-24

你可能感兴趣的:(开发中曾经有疑惑的地方)