|
首先index.html完成的是单页面展示，app.vue里面已经写了视图出口， 例如;先新建一个role.vue页面，写上相应的布局和内容，然后在路由中添加这个页面。
  然后开始写渲染数据的方法 前提，封装好了获取数据的api接口,并在main,js中注册到了原型。
 然后在 1，首先在api中获取接口，  2，在utils中封装http请求的get 和post方法，并注册到原型
import axios from "axios"
// 添加一个请求拦截器，回调函数会在发出请求时执行
// config:请求配置
axios.interceptors.request.use(config => {
// Do something before request is sent
// console.log(config)
let token = sessionStorage.getItem("token") ? sessionStorage.getItem("token") : "";
config.headers.Authorization = token;
return config;
}, error => {
// Do something with request error
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
// Do something before response is sent
return response.data;
}, error => {
// Do something with response error
return Promise.reject(error);
});
function get(url,params={}){
return new Promise((resolve,reject)=>{
axios({
method: 'get',
url,
params
}).then((data)=>{
resolve(data)
}).catch(err=>{
reject(err);
})
})
}
function post(url,data={}){
return new Promise((resolve,reject)=>{
axios({
method: 'post',
url,
data
}).then((data)=>{
resolve(data)
}).catch(err=>{
reject(err);
})
})
}
export {get,post}
然后在main.js中注册  然后在store中的index.js获取数据存储
import Vue from "vue";
import Vuex from "vuex";
import { post } from "./../utils/http";
import api from "./../API/index";
import router from "./../router"
import {Message} from 'element-ui';
Vue.use(Vuex);
let store = new Vuex.Store({
state: {
// 相当于sessionStorage是永久仓库，数据拿进拿出都很方便，vuex是临时仓库，两者需要建立联系。
// 刷新后,vuex的数据会消失，需要从sessionStorage中重新获取。
token: sessionStorage.getItem("token")
? sessionStorage.getItem("token")
: "",
info: sessionStorage.getItem("info")
? JSON.parse(sessionStorage.getItem("info"))
: {}
},
mutations: {
setInfo(state, payload) {
state.token = payload.token;
state.info = payload.info;
},
clearInfo(state){
state.token="";
state.info=""
}
},
actions: {
// context的话就相当于state的父亲，上一级，包含着state中的所有属性,也就是mutation?
login(contxt, payload) {
// console.log(contxt.commit,'999')
// this.$http.post(this.$api.userlogin, this.ruleForm).then(res => {
post(api.userlogin, payload).then(res => {
console.log(res, "---");
//验证通过，登录成功，要将数据保存到vuex中和缓存中
if (res.code == 200) {
// 路由传值this.$router.push()，这个方法会向history栈添加一个新纪录，所以当浏览器点击后退按钮时，会返回之前的url
// 登录成功之后要把整个list都保存起来，
//因为下面这里面存的是对象，要转化成字符串，才能存到store中index.js的state中
// 放在本地存储中，
sessionStorage.setItem("token", res.list.token);
sessionStorage.setItem("info", JSON.stringify(res.list));
// console.log(typeof res.list)
// 保存在vuex中
contxt.commit("setInfo",{token:res.list.token,info:res.list})
// this.$router.push("/")
// 因为引入了Router,所以可以直接用Router.push
router.push("/");
} else {
// this.$message.error(res.msg);
Message.error(res.msg)
}
});
}
}
});
// 需要暴露和注册到main.js中，貌似自己写的文件夹里面写的东西，最好都是注册到main.js中
export default store;
然后在main.vue中的script标签中的data中，return一个data空数组用来存数据 
在methods里面封装请求的方法  然后在mounted里面调用这个方法,
 然后数据就被渲染出来了
觉得这篇文章对您有帮助，可以动动发财小手指帮忙点个赞呦 Thanks♪(･ω･)
|