网页设计大赛个人记录的踩坑点-未完待续-后期项目上传github-CFANZ编程社区

1. iview中的cell用on-click添加事件，并不能触发。
 2. vue main.js  post 发送 data数据会有错误：
             Error: Network Error
     也根本进入不了后台的服务。
 3.(已解决) /*没有弄明白怎么在headers中设置token
           let token = req.headers.token;
           */
      修改方案:let token = req.query.token;   使用get params
 4.(已解决) 用post params 发送请求，结果却在路由路径中却有了参数
      例如：/users/me/medal?name=%E5%8A%&token=bQ-dy5LmTLjjrwsGVrfHnh
      解决方案: // 正则表达式匹配  匹配api '?' 前的路径，去除query参数
                url = url.match(/(\S*)\?/)[1];
 5.(已解决)node 接受图片上传：（搞定图片上传，常用的开源组件有multer、formidable）
 安装：cnpm install multer --save
      cnpm install ali-oss参考网络 vue简单上传，node简单接受
6.(已解决)图片上传完成后打开报错，如下：
      Error: ENOENT:  no such file or directory, open 
      '/public/images/uploads/1553704557135_992458.png'
 解决方案:index.js中let filePath = `/public/images/uploads/${item.filename}`;
      改为 let filePath = `./public/images/uploads/${item.filename}`;
 7.(已解决) 在login单击"跳过"，再进入me.vue 点击 "登录|注册",会进入login.vue，
           但是加载圈一直不消失，会一直显示。
 解决方案：在login.vue生命周期添加一个初始化，默认加载圈在一开始的状态就是不显示,即false
           beforeCreate:function(){
                store.state.isShow = false;
           }
 8.(已解决):在main.js中配置子路由children时候，path加上了“/”,
           导致<router-link />会跳转到空白页面。
 解决方案:以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;
      在生成路由时，主路由上的path会被自动添加到子路由之前，
      所以子路由上的path不用在重新声明主路由上的path了。
 升级main.js:    //定义一个页面找不到的组件
                {
                     path: "*",
                     component: notFound
                }
 9.在discuss.vue（历史长河）中点击“民俗文化”页面，路由跳转，但是你刷新一下，
 他的默认选框会跳到“历史沧桑”，内容却还留在“民俗文化”。
 10.(已解决)无法访问node项目下到图片:
 在app.js中将初始化的静态屏蔽掉，改成下面这个
 app.use('/public', express.static('public'));//将文件设置成静态
 // app.use(express.static(path.join(__dirname, 'public')));
 通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS文件等。 
 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。
 *注意点：你提供给 express.static 函数的路径是一个相对node进程启动位置的相对路径。
 如果你在其他的文件夹中启动express app，更稳妥的方式是使用静态资源文件夹的绝对路径：
 app.use('/static', express.static(__dirname + '/public'));
 11.(知识点)突然在img中引用data中的数据不会了:
 解决方案:<img :src="this.person.avatarurl" width="60" height="60"/>
      或者<img :src="person.avatarurl" width="60" height="60"/>
 12.(知识点)router-link中传值的三种方式：
 index.js
 {    
      path: ‘/exhibition’,     
      name: ‘Exhibition’, 
      component: Exhibition 
 }
 (1).传值:  <router-link tag="a" :to="{name: 'Exhibition', params: {img:item}}">
                <img class="xk" :src="item">
           </router-link>
     使用: <img :src="this.$route.params.img"/>
 (2).传值: <router-link tag="a" :to="{path: '/exhibition', query: {img:item}}">
                <img class="xk" :src="item">
           </router-link>
     使用:<img :src="this.$route.query.img"/>
 (3).index.js
      { 
           path: ‘/beautyChart/:type’, 
           name: ‘BeautyChart’, 
           component: BeautyChart 
      }
      传值: <router-link to="/beautyChart/mz" tag="li"><a href="#">美图</a></router-link>
      使用: this.$route.params.type
 13(知识点).vue中的$route和$router的区别:
 $route为当前router跳转对象里面可以获取name、path、query、params等
 $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
 14.(已解决)想要将路由中的数据传递到data(){}中：
 解决方案： created(){
                this.info = this.$route.query.person;
           }
 注意点：只能用$route,但是$router不可以。
 15.(已解决 踩坑):个人中心修改信息的时候，发现“取消”之后，用户信息依然被篡改。
 原因是：对象赋值，赋的是引用，两个对象操作同一个内存空间。
 解决办法：Object.assign
      例var b = Object.assign({}, a); 将a赋值给b,b分配一个新的内存空间。
 (知识点):数组赋值，分配一个新的空间使用concat()
      例: var arr2 = [].concat(arr1); 将arr1赋值给arr2,arr2分配一个新内存空间。
 16.