项目总结

项目总结

今天进行项目的评比，这个项目呢，他的主要的功能点之处就是

• 编辑、添加、删除

• 分配权限，分页、树形结构、图表，搜索

• 登录授权

  示例：1…搜索
  我主要是通过lodash这个插件里的_.debounce这个方法来实现防抖功能（优化），运用，调取接口，获取响应的数据，进行实现，可以通过点击事件触发，还可以通过el-input里的@input事件触发

//下载
npm i lodash
//文本部分
<div style="margin-top: 15px;">
        <el-input
          placeholder="请输入内容"
          v-model="lbjPageXinx.query"
          class="input-with-select lbjgoodsSous"
          clearable
          @input="lbjyhSearch"
        >
          <el-button @click="lbjyhSearch" slot="append" icon="el-icon-search"></el-button>
         </el-input>
引入：
import _ from "lodash";
//js部分的代码
 // 搜索
    lbjyhSearch: _.debounce(function() {
      this.lbjgoodsShop();
    }, 1000),

这个就可以实现

示例： 2…图标
这个图标功能呢，我是通过echarts插件实现
实现：

下载：
npm install echarts --save
引入模块：
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
//js代码
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
});

示例： 3…优化区域
实现刷新数据时，会有一个正在加载的的进度条，没有刷新最后会有小lodaing的展示
实现：

下载：
npm install --save nprogress
通过引入：
import NProgress from "nprogress";
import "nprogress/nprogress.css";
//最后在我们所设置的请求拦截与响应拦截进行调用与取消

//请求拦截
service.interceptors.request.use(
  function (config) {
    // 判断如果不是登陆页，必须携带token到后端，才能够正确的返回数据
    // 判断不是login页，可以获取到token
    //这里是所进行调用的
    NProgress.start()
    if (config.url !== 'login') {
      const token = localStorage.getItem('token')
      // 设置请求头
      config.headers['Authorization'] = token
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);
//响应拦截
service.interceptors.response.use(
  function (response) {
  //这里是取消调用的
    NProgress.done()
    // console.log("想用拦截",response)
    const { meta: { msg, status } } = response.data;
    /*
      200 获取数据，更新成功
      201：创建成功，例如：添加用户、
      204：删除成功
    */
    const successztArr = [200, 201, 204];

    if (successztArr.includes(status)) {
      if(response.config.method!="get"){
        Message({
          message: msg,
          type: 'success'
        })
      }
     
      return {
        result: response.data.data
      }
    } else {
      Message({
        message: msg,
        type: 'error'
      })
    }
    // return response;
  },
  function (error) {
    return Promise.reject(error);
  }
);

最后呢，就是这几个地方是进行优化的
这个项目是调用后台接口，通过vue+element ui 进行结合使用来实现整个项目的完成
其中通过自己的努力与探索和项目组长的帮助完成
还需不断的努力