后台管理系统的技术点

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

// 首先在src中的assets中创建一个css全局样式表
//为了避免窗口伸缩影响后期的样式，在全局中对窗口进行设置
/* 全局样式表 */
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 1366px; //窗口最小宽度为1366px
}

//在入口文件中引入样式表
//此样式表为项目中的路径和名称
import './assets/css/global.css'

npm install axios--save

import axios from 'axios'
//在入口index.js中导出axios请求
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
//将其挂载成$http的形式
Vue.prototype.$http = axios

//请求中验证是否有token值
axios.interceptors.request.use(config => {
  // NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

axios页面中的使用

//项目中的实际请求案例
//因为返回值为promise，所以使用async和await去简化异步
 async getUserList() {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo,
      });

时间过滤器
npm install moment --save

// 在入口index.js中导入格式化时间的模块
import moment from 'moment'

Vue.filter('dateFormat', function (dateStr, formatStr = 'YYYY-MM-DD HH:mm:ss') {
  // 在过滤器的处理函数中，最后，必须 return 一个东西，这样，才是一个合法的过滤器
  return moment(dateStr).format(formatStr)
})

//页面中调用时间过滤器

富文本编辑器

npm安装
npm install vue-quill-editor
2.在安装依赖
npm install quill

//富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
//富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' 
// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)

3.页面中使用效果

   
export default {
  data() {
    return {
      //   添加表单的数据
      addForm: {
        // 商品详情字段
        goods_introduce: '',
      },
  },

绿色进度条NProgress的实现(项目优化功能)
1.安装
npm install --save
2.使用

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

  // 挂载路由导航
  router.beforeEach((to, from, next) => {
    // 如果是跳转到登录页那么就next
    if (to.path === '/login') return next()
    NProgress.start()
    const tokenStr = window.sessionStorage.getItem('token')
    if (!tokenStr) return next('/login')
    return next()
  })
router.afterEach(() => {
  NProgress.done()
})

树状表格插件
1.安装
npm i vue-table-with-tree-grid -S
2.引入

//注册全局树状表格
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

3.页面使用

element中组件挂成全局组件

// 挂载成全局事件
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm

//message调用
this.$message.success('需要提示的消息');
this.$message.error('需要提示的消息');
this.$message.warning('需要提示的消息');

//MessageBox调用
async removeById() {
//返回的数据是promise，需要async和await
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err);
//使用catch捕捉返回的错误

//对confirmResult 是否等于confirm来判断点击了取消还是确定
if (confirmResult !== 'confirm'){
   return this.$message.error('你取消了删除');
}else{
  //发起axios请求
}

解决element-ui中3.0版本的重复点击菜单报错问题

//在路由配置文件中设置
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
},

loadsh的使用
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能
1.安装
npm i --save lodash
2.页面引入使用

//此例子为echarts合并问题

//此功能为添加商品案例
/* 项目中需要把表单数据中的数据格式修改才能进行axios请求传参，故需要深拷贝来完成此功能 */
  methods: {
    // 添加商品
    add() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error('请填写必要的表单项');
        // loadsh cloneDeep(obj)深拷贝
        const form = _.cloneDeep(this.addForm);
        form.goods_cat = form.goods_cat.join(',');
        // 处理动态参数
        this.manyTableData.forEach((item) => {
          const newInfo = {
            attr_id: item.attr_id,
            attr_value: item.attr_vals.join(' '),
          };
          this.addForm.attrs.push(newInfo);
        });
        // 处理静态参数
        this.onlyTableData.forEach((item) => {
          const newInfo = { attr_id: item.attr_id, attr_value: item.attr_vals };
          this.addForm.attrs.push(newInfo);
        });
        form.attrs = this.addForm.attrs;
        // 发起请求,请求数据
       const {data:res}=await this.$http.post('goods',form)
       if(res.meta.status!==201) return this.$message.error('添加商品失败')
       this.$message.success('添加商品成功')
       this.$router.push('/goods')
      });
    },
  },

使用计算属性

  computed: {
  //需要的时候直接使用this.cateId
  //选中的三级分类的id
    cateId() {
      if (this.addForm.goods_cat.length === 3) {
        return this.addForm.goods_cat[2];
      }
      return null;
    },
    // 计算标题
    //动态绑定来使用
    titleText() {
      if (this.activeName === 'many') {
        return '动态参数';
      } else {
        return '静态属性';
      }
    },
   // 如果按钮需要被禁用，则返回true，否则返回false
    isBtnDisabled() {
      if (this.selectCateKeys.length !== 3) {
        return true;
      }
      return false;
    }
  },

1.将入口文件修改成两个main-dev.js(开发模式)，main-prod.js(发布模式)
2.因为无法找到打包文件，所以自己创建配置文件vue.config.js文件

module.exports = {
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
            //使用externals设置排除项
            //根据vue ui可视化管理工具进行排除资源大的依赖
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nprogress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor',
                'moment':'moment'


            })
            config.plugin('html').tap(args=>{
                args[0].isprod=true
                return args
            })

        })
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

后台管理系统的技术点

你可能感兴趣的:(后台管理系统的技术点)