VUE 与后端交互项目总结

 

一  初始化等准备项

 

1.1 App.vue

        整体的样式可以在这个文件的 <style>这里修改

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}


</style>

 

1.2 axios 、elementUI、qs等项引入及预处理

      项目中用到接口调用，需要引入axios

      接口传入的参数，统一使用了formData格式，需要预处理，需要引入qs

      项目中使用的UI，使用了element UI ,也需要引入

      项目中使用自定义的CSS 替换element loading图，也需要引入

 

      在main.js中，

import Vue from 'vue'
import App from './App'
import router from './router'

  elementUI 、自定义CSS引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//自定义的element UI loading样式，在element样式之后引入，覆盖element样式
import './assets/css/myCss.css'

 

 自定义的CSS保存在 src->assets->css目录下

  

.el-loading-spinner{
     /*这个是自己想设置的 gif 加载动图*/
     background-image:url('../img/loading.gif');
     background-repeat: no-repeat;
     background-size: 200px 120px;
     height:100px;
     width:100%;
     background-position:center;
     /*覆盖 element-ui  默认的 50%    因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了*/
     top:40%;
 }
.el-loading-spinner .circular {
    /*隐藏 之前  element-ui  默认的 loading 动画*/

    display: none;

}

.el-loading-spinner .el-loading-text{
   /*为了使得文字在loading图下面*/
    margin:85px 0px;
}

 

axios、qs 引入及预处理

import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios
Vue.prototype.$qs=qs

Vue.config.productionTip = false
axios.defaults.withCredentials = true  // 跨域请求凭证

// 配置axios post请求时发送formData（解决跨域问题）
axios.defaults.transformRequest = [function (data) {
  data = qs.stringify(data);
  return data;
}];

// axios 请求参数统一处理
// 请求参数增加ajax = 1
axios.interceptors.request.use(req => {
  if (req.method === 'get') {
    req.params = req.params || {}
    Object.assign(req.params, {
      ajax: 1,
      src: 2,
    })
  }
  if (req.method === 'post') {
    req.data = req.data || {}
    Object.assign(req.data, {
      ajax: 1,
      src: 2,
    })
  }
  return req;
})

 

二 compent使用

 

     2.1 新建两个compent，HelloWorld.vue  TestReq.vue

        并修改路由  

     

export default new Router({
  routes: [

    {
      path: '/Test',
      name: 'Test',
      component: Test
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

 

  2.2 elementui使用

<template>
  <div>
    <el-container
            v-loading="loading"
            element-loading-background="rgba(255, 255,255, 0.5)"
            element-loading-text="加载中..."
    >
        <el-header>全部（{{courseListData.length}}）</el-header>

        <el-main>
            <el-row  v-for="(oneCourse,nIndex) in courseListData" :key="nIndex">
                <div>
                  <img  :src=GetCourseImgSrc(nIndex) alt=""  class="courseImg" >
                  <div class="courseInfo_DIV"  @click="DivToWeb(nIndex)">
                       <p class="courseName">{{GetCourseName(nIndex)}}</p>
                  </div>

                </div>
            </el-row>
        </el-main>

        <el-footer v-if="bTeacherOrTutor">共{{nTotalEnrollStudent}}人</el-footer>
    </el-container>


  </div>
</template>

  2.3 axios应用

  

        startLoading()
       {
            this.loading=true;
        },

        endLoading(){
            this.loading=false;
        },

        Ajx_GetClassList()
        {
            this.startLoading();

            let params={
                 chapter_id: this.chapterID 
             };
            let that=this;

            this.$axios(
                {
                    url: url,
                    method:'POST',
                    data:params
                }
            ).then(res=>{

                    let ret=res.data
                    if(ret.errcode!=0){
                        return that.$message(
                            {
                                type:'warning',
                                message:ret.msg
                            }
                        )
                    }

                    that.courseListData=ret.course_list;
                    console.log(JSON.stringify(that.courseListData),"courseList");


                    let lengthInfo = {
                        nTotalClass:that.courseListData.length//通知cpp 最新的课程列表数目
                    }
                    //  debugger;
                    window.NimCefWebInstance.call('CefNotifyToCpp_ChooseClassListInfo', lengthInfo, () => {})
                
                    that.GetNumOfEnRoll(ret);
                    that.GetTotalMoney(ret);
                    that.endLoading();
                })
        },

 

  2.4  DIV 和BTN都有点击事件情况处理

         比如

                    <div class="courseInfo_DIV"  @click="DivToWeb(nIndex)">

                        <button class="btn" @click="AllowTakeClass(nIndex,$event)">点击按钮</button>
                    </div>

  阻止点击按钮事件，往上层传递

       AllowTakeClass(nIndex,event){
             event.stopPropagation(); //阻止点击事件往上层传送
       }