编辑日报内容...今天完成的事情： 本地跨域搞通了，把登陆验证搬到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);
});
返回列表
评论