zoukankan      html  css  js  c++  java
  • 管理后台Vue

    管理后台 遇到的问题

    搭建

    基于vue 3.0 Vue CLI 4.x Ant Design Vue 2.0 搭建后台管理系统

    Ant Design Vue 2.0

     npm i --save ant-design-vue@next
    

    Axios

     npm install axios
    

    NProgress

    npm install --save nprogress
    

    配制

    按需引入Ant Design Vue

    1. 安装插件 babel-plugin-import

      npm install babel-plugin-import --save-dev
      
    2. 修改配制文件 babel.config.js

      module.exports = {
        presets: [
          '@vue/cli-plugin-babel/preset',
          {
            "plugins": [
              ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": 'css' }] // `style: true` 会加载 less 文件 (修改后报错)
            ]
          }
        ]
      }
      
      
    3. SRC下新建 plugs/ant-design-vue文件夹 创建index.js

      ​ index.js 中代码

       import {
          Button,
      } from 'ant-design-vue'
      
      import 'ant-design-vue/dist/antd.css'
      export function setupAntd(app){
          app.use(Button),    
      }
      
    4. 再main.js 中引入

      import {setupAntd} from './plugs/ant-design-vue/index'
      
      
      const app=createApp(App)
      setupAntd(app)
      

    注意: 以下一下组件 使用时需以下方式引入

    1. notification 文档连接 https://2x.antdv.com/components/notification-cn
    2. message 文档连接 https://2x.antdv.com/components/message-cn
    import { message } from 'ant-design-vue';
    import { notification } from "ant-design-vue";
    

    全局配置Axios

    ​ main.js

    import Axios from 'axios'
    Axios.defaults.baseURL="http://192.168.31.199:8888"
    
    
    const app=createApp(App)
    app.config.globalProperties.$axios=Axios
    

    axios 拦截器

    大部分请求接口需要token 等身份信息才能访问 若给每个请求都加上请求头设置 麻烦而且后期不好修改 这时可以使用拦截器 另外 实现 加载数据的loading效果 也可以使用拦截器全局设置

    1. 请求拦截器

      // 添加请求拦截器
      Axios.interceptors.request.use(function (config) {
          // 在发送请求之前做些什么
          // 判断是否存在token,如果存在将每个页面header添加token
          if (sessionStorage.getItem("access-token")) {
            config.headers.common['access-token'] = sessionStorage.getItem("access-token");
          }
          return config
        }, function (error) {
          router.push('/')
          return Promise.reject(error)
        })
      
    2. 相应拦截器

      // 添加响应拦截器
      Axios.interceptors.reponse.use(res => {
          // 请求成功对响应数据做处理
          // 该返回的数据则是axios.then(res)中接收的数据
          return res
      }, err => {
          // 在请求错误时要做的事儿
          // 该返回的数据则是axios.catch(err)中接收的数据
          return Promise.reject(err)
      })
      

    使用iconfont

    引入:

    import {
     createFromIconfontCN,
    } from "@ant-design/icons-vue";
    const IconFont = createFromIconfontCN({
     scriptUrl: "//at.alicdn.com/t/font_1926999_siv4qyygml.js",
    });
    
    export default {
     components: {
       IconFont,
     
     },
    

    使用:

    <IconFont type="icon 名称" />
    

    ant design vue 国际化配置

    ant-design-vue 目前的默认文案是英文,

    配置中文

    1. 引入 ConfigProvider组件 添加 moment

      npm install moment --save 
      

      Moment.js 适用于获取时间 格式化时间的 ant dsign vue 的时间日期类组件使用的此组件

      http://momentjs.cn/

    2. 在根组件 配置

      <template>
        <div class="app-root">
           <a-config-provider :locale="locale">
          <App />
           </a-config-provider>
        </div>
      
      </template>
      
      
      <script>
      import zhCN from 'ant-design-vue/es/locale/zh_CN';
      import moment from 'moment';
      import 'moment/dist/locale/zh-cn';
      moment.locale('zh');
      export default {
        components: {
        },
      
        mounted() {},
        data() {
          return {
            moment,
            locale: zhCN
       
          };
        },
      
        methods: {
      
        },
      };
      </script>
      
      
      

    路由切换 动画

    Vue 路由切换时 页面的动画可以在 <router-view></router-view>使用vue提供的<transition></transition>进行设置 具体参数如下:

    <router-view v-slot="{ Component }">
      <transition
       name="custom-classes-transition"
       enter-active-class="animate__animated animate__fadeIn"
       >
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
    

    NProgress 加载进度条配置

    引入组件

    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    

    使用

    NProgress.start() //进度条显示
    NProgress.done()   //加载完成
    

    例子

    再vue 路由中使用 实现路由切换 加载进度

    // 给路由设置守卫函数
    router.beforeEach((to, form, next) => {
      NProgress.start()
      next()
    
      // to表示将要访问的路径
      // form表示从那个页面跳转而来
      // next表示允许跳转到指定位置
    })
    
    router.afterEach(() => {
      NProgress.done()
    })
    

    自定义滚动条

    <div class="scrollbar">
    
      <div class="contxt"></div>
    
    </div>
    
    .scrollbar{
    
         50px;
    
        height: 200px;
    
        overflow: auto;
    
        float: left;
    
        margin: 5px;
    
        border: none;
    
    }
    
    .context{
    
         30px;
    
        height: 300px;
    
        margin: 0 auto;
    
     
    
    }
    
    .scrollbar::-webkit-scrollbar {/*滚动条整体样式*/
    
             10px;     /*高宽分别对应横竖滚动条的尺寸*/
    
            height: 1px;
    
        }
    
    .scrollbar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    
            border-radius: 10px;
    
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    
            background: #535353;
    
        }
    
    .scrollbar::-webkit-scrollbar-track {/*滚动条里面轨道*/
    
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    
            border-radius: 10px;
    
            background: #EDEDED;
    
    }
    

    设置针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:

    滚动条组成部分

    1. ::-webkit-scrollbar 滚动条整体部分

    2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)

    3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)

    4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。

    5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分

    6. ::-webkit-scrollbar-corner 边角,即垂直滚动条和水平滚动条相交的地方

    7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件

    路由

    路由传参

    使用场景 当从一个页面跳转到另一个页面 时需要从原始页面带一个参数传递到新的页面时就需要使用vue的路由传参

    方式1

    // 跳转     
    this.$router.push({
              path: `/路由路径/${参数值}`,
     })
    //路由配置
       {
         path: '/路由路径/:参数名',
         name: '组件名',
         component: 组件 
       }
    //取参数值
    this.$route.params.参数名
    

    上面这种方式 刷新页面 数据不会丢失 因为参数直接都拼接到 路径上了 页面跳转时 url

    http://127.0.0.1/路由路径/:参数名

    方式2

    //跳转
    this.$router.push({
              name: '组件名',
              params: {
                参数名: 参数值
              }
    })
    //路由配置
       {
         path: '/路由路径',
         name: '组件名',
         component: 组件 
       }
    //取参数值
    this.$route.params.参数名
    

    上面这种方式 页面刷新数据丢失 这种方式通过组件名进行路由匹配 所以路由名一定要对上 数据会进行隐藏在url后看不到数据

    方式3

    //跳转
          this.$router.push({
              path: '/路由路径',
              query: {
               参数名: 参数值
              }
            })
    //路由配置
       {
         path: '/路由路径',
         name: '组件名',
         component: 组件 
       }
    //取参数值
    this.$route.query.参数名
    

    上这种方式使用 刷新页面 数据不会丢失 数据会显示在url后面

    注意: 在我使用的过程中 经常需要传递一个对象而不是简单的基本数据 但对象无法传输 我的解决方案是将对象转成json字符串格式 到新页面 再转成对象进行使用

    打包

    打包后会遇到页面打开是空白的状况

    需要在src 先创建一个 vue.config.js 文件

    module.exports = {
        publicPath: './',
    };
    

    搭建管理后台 比较重要的 是

  • 相关阅读:
    一些问题
    为什么Python在列表,元组和字典的末尾允许使用逗号?
    #!/bin/bash
    gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程
    go 学习笔记之10 分钟简要理解 go 语言闭包技术
    gitbook 入门教程之还在搞公众号互推涨粉?gitbook 集成导流工具,轻轻松松躺增粉丝!
    go 学习笔记之仅仅需要一个示例就能讲清楚什么闭包
    go 学习笔记之学习函数式编程前不要忘了函数基础
    go 学习笔记之无心插柳柳成荫的接口和无为而治的空接口
    go 学习笔记之万万没想到宠物店竟然催生出面向接口编程?
  • 原文地址:https://www.cnblogs.com/huangshen/p/14501934.html
Copyright © 2011-2022 走看看