1. 小红人项目主要运用了VUE框架，Vux -UI库 ，前后台分离，
2. 单位换算：html根元素 font-size：12px; 使用了rem自动转换单位
单位换算：html:font-size：10px; 750px=2倍图 750/2=375px 375/10= 37.5rem3. 封装了 swiper轮播图组件，
swiper 轮播图的封装，及调用 swiper.vue 里面 结合components.js 调用
title 小红人标题的部分封装在：App.vue里面4. 网页title 图标
<!-- logo图标 link方法
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->5.
<!-- // 引入加密文件
//1.使用npm安装 ：npm install js-sha256
//2.然后在组件中methods定义方法，在调用
// sha256加密密码
//setSha(){
//let sha256 = require("js-sha256").sha256//引入sha256库，这里用的是require方法，所以没用import
//this.pw = sha256(this.passWord)//要加密的密码
//console.log(this.pw)//这就是你加密之后的密码
//}
// base64加密
//setBase(){
//let Base64 = require("js-base64").Base64//还是require
// this.pw = Base64.encode(this.passWord)//还是那些操作
//console.log(this.pw)
//} -->6.
<!-- // 跨域请求的步骤
proxyTable: {
// 设置代理解决跨域
'/redman': {
target: 'api.gitscat.com/', //参数填写被请求的地址，比如第三方接口
changeOrigin: true, //参数是如果接口跨域需要配置这个参数
pathRewrite: {
'/redman': '' //参数是重写地址, 还有一个参数secure，如果是https接口需要配置这个参数；
}
}
},
//此时webpack的代理配置已经完成，需要重启服务，然后写请求函数就可以了，我使用的是axios搭配qs，所以请求函数为：
//export const uploadFile = params => { return axios.post('/upload/file', qs.stringify(params)).then(res => res.data)}；
//请求函数各自写的不一样，在此只是想表达请求函数第一个参数url要写'/upload/file'，这样相当于请求http://baidu.com/img/upload/file。
//至此跨域问题已经解决 -->
<!-- 09-28号 -->
<!-- // 当页面加载完后，第一次请求为了拿到header里的S-Trace的值
beforeCreate: function () {
this.$http
.get("/oauth/start/",
// {
// headers: {
// "S-Trace": "",
// "token": "",
// "signature": ""
// }
// }
)
.then( res => {
this.s_trace = res.headers.map['s-trace'][0];
localStorage.setItem('s_trace', res.headers.map['s-trace'][0]);
Vue.http.headers.common['s-trace'] = localStorage.getItem('s_trace');
// 响应成功回调
console.log(res);
console.log('success', 'hahhhahha');
})
.catch( err => {
// 响应错误回调
console.log(err);
console.log("failed");
})
} -->
<!--
//存取变量
const s_trace = localStorage.getItem("s_trace");
console.log(s_trace);
this.$http
.post(
"/captcha/get-sms-vcode",
{ mobile: this.phone },
{ headers: { "s-trace": s_trace } }
)
.then(res => {
this.phonedata = res.data;
localStorage.setItem("s_trace", res.headers.map["s-trace"][0]); //每次请求都要把s-trace 当变量存起来
console.log(res, "phone success");
})
.catch(err => {
console.log(err);
}); -->
7.
<!-- 9-29号 -->
<!-- 关于vueResource与后台进行数据交互
1、get的写法
mounted: function() {
this.$http.get("url").then(
function (res) {
// 处理成功的结果
},function (res) {
// 处理失败的结果
};
);
2、post的写法
methods: {
testNum () {
var teln=this.register.tel;
console.log(teln)
this.$http.post("http://192.168.0.192:8085/user/phonePCMessageValidation",{'phoneNumber':'1563*****05'},{emulateJSON:true}) //emulateJSON:true 这个是个大坑，注意；
.then(
function (res) {
// 处理成功的结果
console.log(res.data)
},function (err) {
// 处理失败的结果
console.log(err)
});}} -->
<!-- 打包代码 -->
<!-- npm run build -->8.注意事项：
<!-- 1.每次代码上传gitlab时注意事项：找到.gitignore 把 /dist注释掉
9. vue-video 组件：
video引入 vue2.0+vue-video-player 组件，操作步骤：
1. 安装依赖
npm install vue-video-player --save
2. 在main.js中引入
import VueVideoPlayer from 'vue-video-player';
Vue.use(VueVideoPlayer);
3. 在播放器组件中单独添加css和hls
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import 'videojs-contrib-hls.js/src/videojs.hlsjs';
4. 在template标签下需要用到播放器的位置写入播放器标签
<div class="video-wrapper">
<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
</div>
//安装依赖
npm install --save videojs-contrib-hls
//在main.js内引入
require('videojs-contrib-hls/dist/videojs-contrib-hls'); -->
10.
<!-- 1. 如果有错误信息给一个提示：
<span id="spErr" style="color:red"></span>
<script>
document.getElementById('spErr').innerHTML='错误信息。。。';
</script>11.
2. 字体多行显示不了的解决办法：
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} -->12.
1.判断token时效的方法：
.then(function(res) {
// 处理成功的结果
console.log(res, "首次加载个人中心成功");
if (res.data.code === 'C40001' || res.data.code === 'C10001' || res.data.code === 'C10002') {
console.log('token失效');
localStorage.removeItem('uid');
localStorage.removeItem('token');
localStorage.removeItem('s_trace');
localStorage.removeItem('address_id');
localStorage.removeItem('card_id');
this.$router.push("../Login"); // 清空数据后，登录页面
// location.reload(); // 重新加载页面
} else {
this.phone = res.data.data.mobile; // 取手机号
this.balance = res.data.data.available_balance; //取可用余额
this.status1 = res.data.data.is_realname;
this.status2 = res.data.data.address_id;
this.status3 = res.data.data.is_bindcard;
localStorage.setItem("s_trace", res.headers.map["s-trace"][0]);
localStorage.setItem("address_id", res.data.data.address_id);
}
})
.catch(function(err) {
// 处理失败的结果
console.log(err,"首次加载个人中心失败，请重新加载");
});13.
手机网页制作的 meta 标签： https://blog.csdn.net/ye1992/article/details/22714621
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
<meta http-equiv=Access-Control-Allow-Origin content=*> //使用Access-Control-Allow-Origin解决跨域
<meta http-equiv=Access-Control-Allow-Origin content=*> //使用Access-Control-Allow-Origin解决跨域
<meta http-equiv=content-security-policy> //跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞
<meta http-equiv=pragma content=no-cache> //用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
<meta http-equiv=cache-control content=no-cache>
<meta http-equiv=expires content=0>
<meta name="apple-mobile-web-app-capable" content="yes" /> //说明：网站开启对web app程序的支持。
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> //在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。 -->
<!-- 11月1日 -->
vux -UI库
地址：
<x-address title="地址选择"
v-model="address"
raw-value :list="addressData"
value-text-align="right"
@on-shadow-change="onShadowChange"
placeholder="请选择">
</x-address>
14，后台接口第一次请求 start ：
15，