快游戏一期

由于是老项目, 采用的是 js+jquery 在维护上面比较复杂, 所以采用了新的方式书写项目.

iframe

iframe 嵌套的 vue. 难点在于 dist 文件目录必须跟资源文件放一起.

  var page;
  var type;
  var query = window.location;
  var searchs = (window.location.search || '').split('&')
  searchs.forEach(function(it, idx) {
      if (it.indexOf('page') > -1) {
          page = it.split('=')[1] || 'fastGame'
          console.log('page: ', page);
      }
      if (it.indexOf('type') > -1) {
          type = it.split('=')[1] || 'audit'
          console.log('type: ', type);
      }
  })
  var pageIframe = document.createElement('iframe')
  pageIframe.style.cssText = 'border: 0px;width:760px;height: 100%;margin-top:20px; min-height:1000px;overflow-y:hidden';
  pageIframe.src = '//game.developer.flyme.cn/resources/developer/dist/index.html/#/' + page + '?' + 'type' + '=' + type;
  document.querySelector('.section').appendChild(pageIframe);

vue 方面 在 vue.config.js 里面 这两个地方要注意一下

      publicPath: '/resources/developer/dist/',
      outputDir: '../game-developer-web/src/main/webapp/resources/developer/dist',

前端老三样

在创建的时候还是遇到了一些困难, 太久没自己搭建.

mock

首先是 vue.config.js

  devServer: {
    contentBase: resolve('mock'),
    compress: true,
    port: 8080,
    overlay: {
      warnings: false,
      errors: true
    },
    before(app){
      Mock(app)
    }
  },  

这个包可以监听文件的变化

  const chokidar = require('chokidar')

  chokidar.watch(mockDir, { // 监控当前目录
      ignored: /index/, // 忽略index.js文件的变更
      ignoreInitial: true // 忽略对增加文件或者增加文件夹而触发事件
  }).on('all', (event, path) => { // 监听除了ready, raw, and error之外所有的事件类型
      if (event === 'change' || event === 'add') { // 文件内容改变或新增文件时触发
          try {
              // 删除已经挂载到express的mock路由
              app._router.stack.splice(mockLastIndex - 1, 1)

              // clear routes cache
              unregisterRoutes()

              // 重新注册
              registerRoutes(app)

              console.log('mock更新！')
          } catch (error) {
              console.log('mock更新出错：', error)
          }
      }
  })

  let mockLastIndex

  function registerRoutes(app) {
      const mocks = require('./mocks') // 引入mock数据
      app.use('/proxy*', mocks)
      mockLastIndex = app._router.stack.length // 记录路由位置
  }

  // nodejs清除require缓存 参考：https://blog.hellozwh.com/?post=433
  function unregisterRoutes() {
      Object.keys(require.cache).forEach(i => {
          // console.log(3, i)
          if (i.includes(mockDir)) {
              delete require.cache[require.resolve(i)] // require.resolve 相当于把相对路径转化成绝对路径，避免了自己手写的绝对路径跟cache里的key不一致的问题
          }
      })
  }

Vuex

function request(context, url, mutation) {
    context.$store.commit('tryAbortRequest', url);
    return context.$http.get(url).then(function(response) {
        if (response.status == 200 && response.data.code == 200) {
            if (typeof mutation == 'string') {
                context.$store.commit(mutation, response.data.value);
            } else {
                mutation(response.data.value);
            }
            return Vue.Promise.resolve(response);
        } else {
            //defaultErrorHandler(context, response);
            return Vue.Promise.reject(response);
        }
    }).catch(function(response) {
        //defaultErrorHandler(context, response);
        return Vue.Promise.reject(response);
    });
}

export const mutations = {
    setBaseInfo(state, baseInfo) {
        state.baseInfo = baseInfo;
    },
}

export const state = {
    baseInfo: _originBaseInfo,
}
export const actions = {
    fetchBaseInfo({
        commit
    }, context) {
        return request(context, '/oauth/memeber/baseinfo', 'setBaseInfo');
    }
}

//调用时
this.$store.dispatch('fetchBaseInfo', this).then(function(response) {})

Router

这个就是常规配置了,没啥好说的.

上传进度条

    <el-dialog title="上传文件" v-loading="loading" :visible.sync="dialogFormVisible">
      <el-upload
        style="margin: 20px 0px"
        ref="upload"
        :limit="1"
        class="upload-demo"
        action="void"
        :http-request="customUpload"
        name="files"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        :on-progress="progressA"
        :on-success="uploadSuccess"
        :on-error="uploadError"
      >
        <el-button type="primary" class="upload-btn">上传 pdf+</el-button>
      </el-upload>
      <div  v-if="uploadProgress">
          <el-progress  :text-inside="true" :stroke-width="26" :percentage="uploadProgress"></el-progress>
      </div>

    customUpload(file){
      let FormDatas = new FormData();
      FormDatas.append('file', file.file);
      this.$axios({
        url: '/common/upload',
        method: 'post',
        data: FormDatas,
        onUploadProgress: (progressEvent) => {
          let num = progressEvent.loaded / progressEvent.total * 100 | 0 ; //百分比
          file.onProgress({percent: num})  //进度条
        }
      }).then(data=> {
        const response = data.data;
        if (response.code === 200) {
        this.loading = false;
        const filePath = response.value[0].url;
        this.filePath =  '/upload/' + response.value[0].url;
        this.$message({
          message: '上传成功',
          type: 'success'
        });
        this.isFileShow = true;
        this.fileName = response.value[0].originalName;
      } else {
        this.loading = false;
        this.$message.error('上传失败');
      }
      this.$refs.upload.clearFiles();
        file.onSuccess(); //上传成功
      })
    },