省A类竞赛二等奖--村先游项目VUE前端重构

村先游--省二竞赛项目VUE重构

源码地址:

重构前的(前端+后台)：https://github.com/Archer-Fang/cunxianyou

重构前的(前端)：https://github.com/Archer-Fang/cunxianyouv2
笔记：
1.<style scoped>避免组件样式污染

功能：
登陆页@/pages/login/login：
1.登陆页验证手机号码
2.登陆页是否显示密码
3.跨域获取验证码，将base64编码过的图片进行显示
4.导航栏登陆状态判断，如果登陆则显示不同的导航栏
5.跨域验证：手机号，密码和验证码
坑点:一开始我想通过action-->mutation-->getter来进行对账号密码验证码的验证，但是执行顺序action执行完resolve以后，getter还没有执行，所以用getter获取的userInfo变量为空，点击登陆显示验证码输入错误，然后由于页面没有刷新，并且getter的辅助函数检测到userInfo改变，验证码保存到status，再次点击登陆以后登陆成功。
总结一下就是：验证的时候直接调用action并且回传状态给变量，不要用getter获取state。
6.手机号码正则判断验证是否为11位，是，则登陆按钮变色

7.对账号密码进行状态管理，存储到status并且将user_id存储到localStore中

8.前端登陆拦截（钩子函数）
原思路如下：
1.token：与cookie进行验证相比更加安全
组成：header payload 签名
生成形式：header和payload进行base64加密，将密文用句号链接起来发送给服务器端，服务端用密钥进行HS256加密生成签名，返回给客户端形成token
校验：服务器端对header payload进行base64解密，知道用了HS256算法加密，对服务器端密钥进行HS256加密与签名进行比对。
2.用router的钩子函数对需要token的身份认证进行判断，并且用axios对所有的请求响应进行拦截，如果需要token,则在header首部加入： config.headers.Authorization = `token ${store.state.token}`;

但是这个项目主要是对前端的东西用vue进行重构，后端不打算动它先，token没有生成，所以对token判断改为是否登陆的login进行判断，所以只调用了router的钩子函数对router进行判断拦截，简化了一些流程。

9.导航栏点击以后的样式显示
使用 .router-link-active

10.退出登录并且回到登陆页
1.@click 子组件传给父组件无效解决方案
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写
2.把用户ID从localStore中删除，并且Login置为false

登陆页：
11.vue-cli npm引入bootstrap，并且进行相应的配置
http://www.cnblogs.com/kongxianghai/p/6910133.html

12.轮播图组件化
添加bootstrap4 bootstrap-vue,bootstrap-loader
13.小banner图片引用问题，需要把图片放在static中而不是asset中。
坑点：如果图片放在assets中src=“图片”可以显示，而onmouseover="this.src='图片'"显示错误
14.添加知乎api，获取接口数据

15.时间过滤器-20180401-->2018年04月02日
16.敬语组件化，并且传值判断
17.修改footer样式

18.解决图片显示的403问题。状态码403
但有时我们会发现 引入的外部图片链接也是可以正常展示的，那是因为先访问了外部图片链接图片展示过后，被浏览器缓存了下来，并未正常引用。
https://pic2.zhimg.com/v2-04f07c460873947baca37a2be1b9e3f5.jpg
找个专门缓存图片的网址，去掉图片的https://,加到https://images.weserv.nl/?url=后面进行缓存
加载速度有点慢，点击更多的时候要等一下才能加载出来
getImage(url){
console.log("url:"+url);
console.log("before test");
// 把现在的图片连接传进来，返回一个不受限制的路径
if(url !== undefined){
let _u = url.substring( 7 );
console.log("newURL:"+'https://images.weserv.nl/?url=' + _u);
return 'https://images.weserv.nl/?url=' + _u;
}
/*
console.log("test");
*/
}
19.把swiper小轮播图改为bootstrap小轮播图
20.修改子组件style 去除bootstrap小轮播图蓝色边框，以及indicators样式
全局样式<style ></style >可以修改子组件的样式<style scoped></style >只能修改该组件的样式，用于避免样式的污染
21.旅游页完成。
22.旅游交通页点击title，返回一个judge值，用于判断显示两个不同的页面
23.租车排行榜完成

24.bootstrap-vue重新引入
https://bootstrap-vue.js.org/docs/
25.解决特产页热销榜carousel的BUG
设置不同的slide
26.修改首页样式，button适应bootstrap4
27.添加问答页
28.添加useiconic
https://useiconic.com/open/
29.问答页添加vue的模态框
bootstrap-vue
30.登陆状态判断header显示的修改
点击退出的时候，退出按钮不能放在router，或者给它加个native
31.ref的使用
<div ref="test">
method:this.$refs.test.style.background="black";
32.引入css报错:cannot resolve file
@import "./assets/css/bootsrap.min.css";
解决：把bootstrap的font文件也添加到asset上
api接口说明：
1.配置http代理表
proxyTable: {
'/api2': {
target: 'http://cangdu.org:8001',
changeOrigin: true,
pathRewrite: {
'^/api2': '/'
}
},
'/api': {
target: 'https://news-at.zhihu.com/api/4',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
2.定义常量
const urlBase = '/api/';
const urlBase2 = '/api2/';
3.用常量表示跨域的url
登陆页验证码和登陆验证：
post:axios.post(urlBase2+'v1/captchas',{})//base64编码的验证码图片
axios.post('/api2/v2/login',{
username:this.phoneNumber,
password:this.password,
captcha_code: this.captcha
})
post查看数据，百度post模拟，输入url+变量
人文页数据：
get:axios.get(urlBase + 'news/before/' + now) //例子：now='20180404'
api:https://news-at.zhihu.com/api/4/news/before/20180404

我用axios在自己的项目上试了一下，是可以的，代码如下：
axios.get('/api3/hello').then(res=>console.log("res.data:"+res.data))
.catch(err => console.log(err))