首页功能交互and配置更新

whycwx

2021-03-12 f7078a062efad59f367caba120db2fb30180bf86

首页功能交互and配置更新

 package-lock.json

Diff too large

 package.json

@@ -26,7 +26,8 @@
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
    "vue-template-compiler": "^2.6.11",
    "qs": "^6.6.0"
  },
  "eslintConfig": {
    "root": true,
@@ -40,7 +41,9 @@
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
    "rules": {
      "no-debugger":0
    }
  },
  "browserslist": [
    "> 1%",

 src/assets/js/axios.js

New file
@@ -0,0 +1,41 @@
import Vue from 'vue';
import axios from 'axios';
// import qs from 'qs';
// if(process.env.NODE_ENV == 'dev') {
//     // 跨域请求
//     axios.defaults.baseURL = 'http://localhost:8090';
//     axios.defaults.withCredentials = true;  // 保持请求头
// }
axios.defaults.baseURL = 'http://localhost:8090';
axios.defaults.headers = {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json'
    }
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    return Promise.reject(error);
});
//对POST请求数据做处理
// axios.interceptors.request.use((res) => {
//     if(res.method !== "get" && res.data){
//         debugger
//         res.data = qs.stringify(res.data);
//     }
//     return res;
// });

Vue.prototype.$axios = axios;

export default axios;

 src/main.js

@@ -9,7 +9,9 @@
import '../public/theme/normal.css'
import './assets/iconfont/iconfont.css'
import '@/assets/js/rem.js'
import axios from './assets/js/axios'

Vue.prototype.$axios = axios;

Vue.use(ElementUI, {
  zIndex: 99

 src/pages/index.vue

@@ -21,12 +21,12 @@
      </div>
      <div class="template-list">
        <div class="template-item --blank">
          <div class="template-image">
          <div class="template-image imageFirst">
            <el-button type="primary" @click="dialogFormVisible = true"> + 创建项目</el-button>
          </div>
          <div class="template-info">
          <!-- <div class="template-info">
            <div class="emptyCon">空白画板</div>
          </div>
          </div> -->
        </div>
        <div class="template-item" v-for="(item,i) in 100" :key="i">
          <div class="template-image">
@@ -51,7 +51,7 @@
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        <el-button type="primary" @click="addMode(panelForm.name)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
@@ -84,8 +84,43 @@
          this.isBgColor = false
        }
      })

          self.getData();
    },
    methods: {}
    methods: {
      // 获取列表数据
      getData(){
        let vm = this;
            vm.$axios({
              method:"get",
              url:"/application/all",
              data:null
            }).then(res=>{
                console.log(res)
            })
      },
      // 创建
      addMode(name){
        let vm  = this;
            vm.$axios({
              method:"post",
              url:"/application",
              data:{
                name:name
              }
            }).then(res=>{
              if(res.data.code == 1){
                vm.dialogFormVisible = false;
                vm.$message({
                  message: res.data.msg,
                  type: 'success'
                });
              }
              // 跳转
              vm.$router.push({ name:'design' ,query:{id:res.data.data}});
            })
      }
    }
  }
</script>

@@ -229,7 +264,7 @@

  .template-list .template-image {
    width: 100%;
    height: 183px;
    height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -237,6 +272,9 @@
    position: relative;
    background: #021651;
  }
  .template-list .imageFirst{
    height: 100%;
  }

  .template-list .template-image .el-button--primary {
    background-color: #43f9fd;