vue实现单页面的后台管理界面

最新推荐文章于 2024-07-18 15:15:07 发布

Sakura蜗牛

最新推荐文章于 2024-07-18 15:15:07 发布

阅读量536

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73849466/article/details/128907866

版权

本文介绍了如何使用Vue.js来创建一个单页面的后台管理界面，涵盖了从配置安装vue-router到封装axios，设置请求和响应拦截器，以及配置路由、创建组件如Container、Books和Eidet的过程。

摘要由CSDN通过智能技术生成

配置安装模块如下

npm i vue-router@3

配置main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";

import ElementUI from 'element-ui'//导入element-ui
import 'element-ui/lib/theme-chalk/index.css'//导入element-ui的样式文件

import * as echarts from 'echarts'//导入echarts
Vue.prototype.$echarts = echarts//将echarts添加到Vue的原型上

Vue.use(ElementUI)
new Vue({
  router,
  render: function (h) { return h(App) },
}).$mount('#app')

对axios进行二次封装，配置请求拦截器和响应拦截器

import axios from "axios";

//1.配置基础路径
const axiosInstance = axios.create({
    baseURL:'http://localhost:8089',
    timeout:5000
})

//2.定义请求拦截器:给所有请求都带上token
axiosInstance.interceptors.request.use((req)=>{
    let token = sessionStorage.getItem('Auth')//获取页面存储中的token信息
    if(token){//若token存在
        req.headers['Auth'] = token
    }
    return req;

},(err)=>{//出现错误
    return Promise.reject(err)
})

//3.响应拦截器,对服务器响应给客户端的数据进行统一的处理
// axiosInstance.interceptors.response.use((res)=>{
//     //1.对响应数据进行处理
//     let data = res.data
//     let code = data.code
//     if(code == 200){
//         return data
//     }else {
//         return Promise.reject(data)
//     }
//
// },(arr)=>{
//     return Promise.reject(arr)
// })
export default axiosInstance

配置router文件夹的index.js文件，路由文件

//路由文件
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)

//创建路由器对象
const router = new VueRouter({
    //路由表
    routes:[
        {
            path:'/book',
            name:'book',
            component:()=>import('../components/Books')
        }
    ],
    mode:'history'
})

export default router

app.vue组件

<template>
  <div id="app">

    <Container></Container>
  </div>
</template>

<script>

import Container from "@/components/Container";
export default {
  name: 'App',
  components:{
    Container,
  },
  data(){
   return{
     bookList:[]
   }
  },

}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>

Container组件，应用element-ui的布局

<template>
  <div>
    <el-container>
      <el-header height="80px">
        <el-row>
          <el-col :span="3">
            <el-image
                style="width: 200px; height: 80px;"
                :src="url"
                :fit="fit">
            </el-image>
          </el-col>
        </el-row>
      </el-header>
      <el-container>