编辑日报内容...今天完成的事情: 本地跨域搞通了,把登陆验证搬到vue里了,列表页面的数据也循环用插值表达式的方式渲染出来了
明天计划的事情:把翻页的效果写了,
遇到的问题:
后台拿到的时间为什么会是这样的,没找到规律。
后台拿到的状态和类型是数字,if的方法太罗嗦了,不知道有没有好点、简洁一点方法去写
for (var a = 0; a < this.message.length; a++) {
if( this.message[a].type == 0 ){
this.message[a].type = "首页Banner";
}else if( this.message[a].type == 1 ){
this.message[a].type = "找职位Banner";
}
else if( this.message[a].type == 2 ){
this.message[a].type = "找精英Banner";
}else if( this.message[a].type == 3 ){
this.message[a].type = "全部大图";
}
if( this.message[a].status == 1){
this.message[a].status = "草稿";
}else if( this.message[a].status == 2){
this.message[a].status = "上线";
}
收获:最大的收获就是找到之前在vue里面跨域写登陆验证的时候,找不到根由的,今天只是重写了一下居然通了,太粗心,完整流程贴上来,防止帕金森
跨域的配置,仅仅是本地跨域的写法,打包上线需要配置nginx进行代理
devServer: {
host: "localhost",
port: 8080, //端口号
proxy: {
//用来替换掩盖获取数据网址的
"/carrots-admin-ajax/": {
//目标端口的网址
target: "ttp://dev.admin.carrots.ptteng.com/",
changeOrigin: true, //跨域
pathRewrite: {
"^/carrots-admin-ajax/": ""
}
}
}
},
用的axion的post方法进行请求的,重点记录一下,在安装引入axios之后直接写方法调用数据,拿不到数据的情况下,再次百度,正好第一条就是qs转换数据格式,通过nstanceof 验证了data上传的数据类型发现依然是“String”字符串,那就蒙蔽了,这转不转类型没啥问题,但还是用 npm i qs -S安装引入了一下。
import qs from "qs";
Vue.prototype.qs = qs; //全局注册,使用方法为:this.qs
直接在上传的地方通过qs转化数据类型,页面一次通过,后来看上传数据才发现,虽然没转换之前是String数据类型,但是数据的书写格式变了
没转之前是“{"name":"admin","pwd":"123456"}” 转换后的数据类型 data: "name=admin&pwd=123456"浪费那么久最后还是上传的数据的问题
let data = {
name: this.uname,
pwd: this.pwd
};
this.$axios({
method: "post", //方法
url: "/carrots-admin-ajax/a/login", //替换网址的代码,用来骗服务器的
headers: { "content-type": "application/x-www-form-urlencoded" }, //请求头,试了不加也能请求到,习惯加了
data: this.qs.stringify(data) //上次就是这里没有配置好,需要用qs代替JSON把上传的数据转换一下格式
})
.then(resp => { //请求成功返回的参数
console.log(resp);
if (resp.data.code == 0) { //请求成功后执行
this.$router.push({ path: "about" }); //编程时导航,使用点击函数跳转页面
this.$store.state.status = true; //使用vuex保存的status的状态,显示主页面的头部导航栏信息,相应的隐藏登陆框
} else {//身份验证失败执行
clearTimeout(this.intervalid) //定时器置空,下面的方法也行,不过是对应setInterval()方法的 clearTimeout对应setTimeout()
// clearInterval(this.intervalid);
this.list = resp.data.message; //赋值显示登陆证失败的原因
this.intervalId = setTimeout(() => { //定时器3秒后置空list,取消页面登陆验证失败原因
this.list = "";
}, 3000);
}
})
.catch(err => { //请求失败显示原因
console.log(err);
});
评论