https://blog.csdn.net/weixin_44882488/article/details/124220864
vue create vue01
https://blog.csdn.net/weixin_56800176/article/details/127564088
npm i element-ui -S
main.js中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
npm i vue-router@3.5.3
首先在src里面创建
router的目录,在router目录里面创建一个index.js文件
views目录 mian.vue
import Vue from 'vue'; //导入vue
import Router from 'vue-router'; /* 导入路由 */
import Login from '@/views/HelloWorld.vue'; /* 导入其他组件 */
import Main from '@/views/HelloWorld.vue';
Vue.use(Router)
/* 定义组件路由 */
var router = new Router({
routes: [{
path: '/', //ip:端口访问时 默认显示组件
component: Login
},
{
path: '/login', //组件地址
component: Login
},
{
path: '/main',
component: Main
}
]
});
export default router
main.js
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js'
import App from './App.vue'
Vue.use(ElementUI);
Vue.use(router)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
}).$mount('#app')
app.vue
<template>
<div id="app">
<!-- router-view就是用来显示不同组件的 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
npm install axios
utils目录 request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
if (!config.data) config.data = {}
if (!config.params) config.params = {}
config.params['token'] = getToken()
config.params['_t'] = new Date().getTime()
config.method === 'post' ? config.data['token'] = getToken() : config.params['token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code && res.code !== 0) {
Message({
message: res.msg || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
// console.log(res)
if (res.code === 401) { // 401, token失效
store.dispatch('user/resetToken').then(() => {
location.reload()
})
}
// return Promise.reject(new Error(res.msg || 'Error'))
return { msg: 'Error' }
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
api 目录
api.js
import request from '@/utils/request'
export function getRoles(obj) {
return request({
url: 'pm/file/upload',
method: 'post',
data: obj
})
}
.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
11111For a guide and recipes on how to configure / customize this project,<br>
check out the
</p>
</div>
</template>
<script>
import { getRoles } from '@/api/api'
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
pageIndex: false,
pageSize: false,
dataList: [],
}
},
created() {
console.log(12312)
this.getDataList()
},
methods: {
// 获取数据列表
getDataList() {
getRoles({
'page': this.pageIndex,
'limit': this.pageSize,
}).then((data) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
})
},
},
}
</script>
<style scoped>
</style>