element-ui 后台问题

1.package.json 中配置 不是所有的都是 npm run dev,npm rn bulid 还要看配置文件

npm run dev 运行开发环境

npm run build:prod 运行生产环境 （打包）

 

2.elemnt-ui如何将文件流和其他字段一起提交 

用element-ui框架的https://element.faas.ele.me/#/zh-CN/component/upload  上传组件

html层

 

  <el-form
        ref="video"
        :model="video"
        :rules="submitRules"
        label-width="120px"
      >
        <!-- prop：表单域 model 字段，要和data中保持一致，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
        <el-form-item prop="video_title" label="视频名称">
          <el-input name="video_title" v-model.trim="video.video_title" />
        </el-form-item>
        <el-form-item prop="video_file" label="视频文件">
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="upLoadUrl"
            :on-success="handleSuccess"
            :on-change="handleChange"
            :auto-upload="uploadStatus"
            :data="videoData" 额外的参数
            :headers="myHeaders"
            accept="video/*"
            :limit="1"
            :file-list="fileList"
            name="video_file" file文件流的name,默认为file
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <a :href="video.video_link" target="_blank" v-if="video.video_link">
            <el-button type="success" size="small">视频预览 </el-button>
          </a>

          <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
        </el-form-item>

        <el-form-item prop="label_id" label="标签">
          <el-select v-model="label_array" multiple placeholder="请选择">
            <el-option
              v-for="item in tags"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            style="position:absolute;z-index:-1;"
            v-model.trim="video.label_id"
            type="hidden"
          />
        </el-form-item>

      
        <el-form-item prop="is_onsale" label="是否上架">
          <el-radio-group v-model="video.is_onsale">
            <el-radio label="0">下架</el-radio>
            <el-radio label="1" checked>上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>

　　

script

import { videoAdd, getTagList, getVideoData } from "@/api/video";

import { areaName } from "@/api/area";
import { getRegionList } from "@/api/business";

export default {
  name: "add",
  data() {
    return {
// 接口地址 用上传组件 然后将其他字段加进去
      upLoadUrl: "https://ixx.haoqianlei.com/admin/v1/video/add",
      fileList: [],
      files: "",
      uploadStatus: false,
      editVideo: false,
      videoData: {
        id: "",
        video_title: "",
        label_id: "",
        is_onsale: "",
        video_link: ""
      },
      myHeaders: {
        "X-Requested-With": "XMLHttpRequest",
        Authorization: "Bearer " + this.cookies.get("Authorization")
      },
      // 表单的对应数据
      video: {
        video_title: "",
        video_file: "",
        label_id: "",
      
        is_onsale: "1",
        video_link: ""
      },
     
      label_array: [],
      list: [],
      tags: []
    };
  },
  watch: {
    label_array(newName, oldName) {
      console.log(newName);
      if (newName.length > 0) {
        var str = "";
        newName.forEach(item => {
          str += item + ",";
        });
        this.video.label_id = str.slice(0, -1);
      }
      console.log(this.video.label_id);
    }
  },
  methods: {
    
    getList() {
      getTagList({
        username: ""
      }).then(res => {
        this.tagFormatter(res.data);
      });
    },
    loadVideo(file, fileList) {
      this.video.video_file = file;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.$confirm(`确定移除 ${file.name}？`)
        .then(() => {
          this.video.video_file = "";
        })
        .catch(() => {});
    },
    handleChange(res, file) {
      this.video.video_file = file;
    },
    handleSuccess(res) {
      this.$message(res.data);
      this.labelName = "";
      this.$refs.upload.clearFiles();
    },
    onSubmit2() {
      // this.$refs.video.validate(valid => {

      // if (valid) {
      if (this.video.video_title.length == 0) {
        this.$message({
          message: "请输入视频名称",
          type: "error"
        });
        return;
      }
      if (this.video.video_file == 0) {
        this.$message({
          message: "请上传视频文件",
          type: "error"
        });
        return;
      }
      if (this.video.label_id.length == 0) {
        this.$message({
          message: "请选择标签",
          type: "error"
        });
        return;
      }
      
      if (this.video.is_onsale.length == 0) {
        this.$message({
          message: "请选择上架类型",
          type: "error"
        });
        return;
      }
      this.videoData.video_title = this.video.video_title;
      this.videoData.label_id = this.video.label_id;
  
      this.videoData.is_onsale = this.video.is_onsale;
        // 上传 掉上传接口
      this.$refs.upload.submit();
      
    },
    onCancel() {
      this.$message({
        message: "取消!",
        type: "warning"
      });

      this.video = {
        video_title: "",
        video_file: "",
        label_id: "",
        is_onsale: ""
      };
    },
    tagFormatter(data) {
      var arr = [];
      data.forEach(item => {
        arr.push({
          value: item.id,
          label: item.label_title
        });
      });
      this.tags = arr;
    },
  
    getLabelArr(data) {
      var arr = [];
      data.forEach(item => {
        arr.push(item.id);
      });
      this.label_array = arr;
    },
  
  },
  mounted() {
    this.getList();

    this.getreglist();

    
  }
};    

　　3.路由拦截器  一些简单的配置

import axios from 'axios'
import {
  MessageBox,
  Message
} from 'element-ui'
import store from '@/store'
import {
  getToken,
  setToken
} from '@/utils/auth'


// 创建axios实例
const service = axios.create({
  baseURL: 'https://ixx.haoqianlei.com/admin/v1',
  // 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 request拦截器  请求拦截
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if(config.headers.authorization){
      config.headers['Authorization'] = `Bearer ${config.headers.authorization}`
     
      // commit('SET_TOKEN', config.headers.authorization)
      // 登录成功后将token存储在cookie之中
      setToken(config.headers.authorization.slice(7))
      return config
    }
    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['token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
      // config.headers['X-Requested-With'] = 'XMLHttpRequest';
      config.headers['Authorization'] = `Bearer ${getToken()}` // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
     
      // config.headers['user-name'] = store.getters.name
    }
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor respone拦截器 响应拦截器
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;
  
    //拦截响应，做统一处理 当token过期，接口会返回一个可用的token 前端接受以后替换当前token
    if (response.headers.authorization) {
      //设置token
      setToken(response.headers.authorization.slice(7))
    }
    // if the custom code is not 20000, it is judged as an error.
    if (res.code != 200 ) {
    // 状态码

      Message({
        message: res.data || 'Error',
      
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      // if (res.code === 422 || res.code === 401) {
      //   console.log(211)
      //   // to re-login  重新登录
      //   MessageBox.confirm('登录失效', 'Confirm logout', {
      //     confirmButtonText: 'Re-Login',
      //     cancelButtonText: 'Cancel',
      //     type: 'warning'
      //   }).then(() => {
      //     store.dispatch('user/resetToken').then(() => {
      //       // 为了重新实例化vue-router对象 避免bug
      //       location.reload()
      //       console.log(333)
      //     })
      //   })
      // }else{
      //   Message({
      //     // message: res.message || 'Error',
      //     message: 'Error',
      //     type: 'error',
      //     duration: 5 * 1000
      //   })
      // }

      return Promise.reject(new Error(res.message || '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

　　4. 修改基础配置

统一接口路径配置 vue.config.js

 

main.js 也要把mock的相关注释掉 防止接口掉错