村先游--省二竞赛项目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))

省A类竞赛二等奖--村先游项目VUE前端重构的更多相关文章

  1. 项目实体类使用@Data注解,但是项目业务类中使用getA(),setA()方法报错,eclipse中配置lombok

    @Data注解来源与Lombok,可以减少代码中大量的set get方法,大量减少冗余代码,但是今天部署项目时候,发现实体类使用@Data注解,但是项目业务类中使用getA(),setA()方法报错. ...

  2. Dota2 demo手游项目历程

    最近其实是打算认真研究c++ primer和设计模式的原著,然后写一些读书笔记的,不过设计模式原著里生词太多,大多都看的不是很明白,因此暂时放弃阅读设计模式,打算用这些时间做一个类似我叫mt2的手游d ...

  3. IT第八天 - 类的应用、debug、项目开发模式优化

    IT第八天 上午 类的应用 1.对象在实例化时是非常耗费系统资源的,因此要尽量减少new字段的使用 2.类的初始值是null,在使用未实例化的类时,很容易导致报错:NullExceptionPoint ...

  4. SpringMVC通过实体类返回json格式的字符串,并在前端显示

    一.除了搭建springmvc框架需要的jar包外,还需要这两个jar包 jackson-core-asl-1.9.2.jar和jackson-mapper-asl-1.9.2.jar 二.web,. ...

  5. 手游项目Crash的上报

    基于cocos2d-x开发的手游,免不了会遇到崩溃.闪退,在非debug状态下定位问题异常的艰难,像我们项目是在cocos2dx的基础上封装了一层,然后又与lua进行互调.因为接受C++/移动端开发比 ...

  6. 错误: 找不到或无法加载主类(IDEA中启动spring boot项目)

    版权声明:本文为博主原创文章,如果转载请给出原文链接:http://www.jufanshare.com/content/142.html 提示:需要对IDEA编辑工具使用熟悉 出现一个问题,就是sp ...

  7. [转]基于 Quercus 的手游项目终于上线了

    原文:http://blog.andsky.com/quercus-php-ngame/ 经过半年的开发,我们第一款手游戏终于开发完毕,架构使用了 netty + Quercus 实现用 php 通过 ...

  8. android应用编译失败 ResXMLTree_node size 类错误,以及 android studio 项目内搜索

    今天很郁闷,又遇到个很让人崩溃的问题: ResXMLTree_node size 0 is smaller than header size 0x45. 类似这样的错误,提示中看不出任何有用的内容,网 ...

  9. Android Studio使用过程中Java类突然报红,但项目可运行解决方案

    1.点击File->Invalidate Caches / Restart... 2.重启Gradle,清除缓存 3.Clean Project

随机推荐

  1. ajax上传图片到服务器简单操作

    前端: 通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传 ...

  2. 黑马_13 Spring Boot:05.spring boot 整合其他技术

    13 Spring Boot: 01.spring boot 介绍&&02.spring boot 入门 04.spring boot 配置文件 05.spring boot 整合其他 ...

  3. Data总结

    getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数 var d = new Date(); var n = d.getTime(); //一长串数字

  4. 面向对象 part5

    构造函数模式与原型模式结合 function Person(name) = { this.name = name this.friends = ["a", "b" ...

  5. CSP模拟赛游记

    时间:2019.10.5 考试时间:100分钟(连正式考试时间的一半还没有到)题目:由于某些原因不能公开. 由于第一次接触NOIinux系统所以连怎么建文件夹,调字体,如何编译都不知道,考试的前半小时 ...

  6. 1.docker 的 安装

    1.mac 安装docker 1.1 打开 https://docs.docker.com/docker-for-mac/install/ 1.2 下载 dmg 文件 1.3  打开 docker,d ...

  7. 微信H5支付demo

    首先我们必须得在微信公众平台和微信商业平台那边配置好相关配置 1.注册微信服务号,开通微信支付权限绑定微信商业平台(这个具体怎么操作我就不说了) 2.获取应用(公众号)appid.应用(公众号)秘钥. ...

  8. 天融信(NAT)地址转换端口映射配置

    目的地址为公司的公网地址 服务:选择或者自己定义一个端口号,就是要映射到服务器上的那个端口号 目的地址转换为:服务器ip 目的端口转换为:选择定义的服务(端口号) 规则描述:随便写

  9. debian下通过scp 上传下载文件

    1.上传本地文件到服务器 scp /path/filename username@servername:/path/ 2.从服务器上下载文件 scp username@servername:/path ...

  10. 题解 P3061 【[USACO12DEC]疯狂的栅栏Crazy Fences】

    这道题的思想是首先我们找到所有的栅栏围成的空间,然后求每一只奶牛在哪几个栅栏空间之中,最后比较他们在的所有栅栏空间-----如果奶牛a和b同时在空间c,d和e内,那么他们一定在同一群中. 测试围栏的方 ...