目录

• 技术概述
• 技术详述
• 技术使用中遇到的问题和解决过程
• 总结
• 参考文献

技术概述

Vue.js是一套构建用户界面的渐进式框架，用于前端开发，学习这个技术是因为软件工程实践课的团队项目我要用到。技术难点在于对vue生命周期的理解、对vue-router的理解、模块引用、父子组件通信、Axios的使用等等。

技术详述

• vue生命周期中的created函数：一般可以在created函数中调用ajax获取页面初始化所需的数据。

created () {
      this.$axios({
          method: 'get',
          headers: {
            'Content-type': 'application/json;charset=UTF-8'
          },
          data: JSON.stringify(info),
          url: 'https://www.baidu.com/', //请求的URL
        }).then((response) => {          //这里使用了ES6的语法
          console.log(JSON.stringify(response))       //请求成功返回的数据
          alert(JSON.stringify(response))
          alert("成功")
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
    }

• vue-router：用于页面跳转

// 引用组件
const TeacherActivity = () =>
    import ('../components/teacher/activity/activitymain')
const teacherHomeworkList = () =>
    import ('../components/teacher/activity/homeworklist')
const teacherHomeworkDetail = () =>
    import ('../components/teacher/activity/homeworkdetail')
const teacherSubmittedHomeworkDetail = () =>
    import ('../components/teacher/activity/submittedhomeworkdetail')
const publishHomework = () =>
    import ('../components/teacher/activity/publishhomework')

//path用于配置路由的路径
{
                path: '/teacher/activity',
                component: TeacherActivity, //component 配置映射的组件
                children: [{
                        path: '',
                        redirect: '/teacher/activity/homeworklist'
                    },
                    {
                        path: '/teacher/activity/homeworklist',
                        component: teacherHomeworkList
                    },
                    {
                        path: '/teacher/activity/homeworkdetail',
                        component: teacherHomeworkDetail
                    },
                    {
                        path: '/teacher/activity/submittedhomeworkdetail',
                        component: teacherSubmittedHomeworkDetail
                    },
                    {
                        path: '/teacher/activity/publish',
                        component: publishHomework
                    },
                ]
},

//侧边栏组件,在编译之后，<router-link>会被渲染为<a> 标签，to会被渲染为href，当<router-link>被点击的时候,url会发生相应的改变
<el-menu
        class="menu"
        default-active="/teacher/activity/homeworklist"
        router  
        active-text-color="white">

        <el-menu-item class="item" index="/teacher/activity/homeworklist">
<!--          <router-link to="/teacher/activity/homeworklist" tag="button" class="button">作业列表</router-link>-->
          <span>作业列表</span>
        </el-menu-item>

        <el-menu-item class="item" index="/teacher/activity/publish">
<!--          <router-link to="/teacher/activity/publishhomework" tag="button" class="button">发布作业</router-link>-->
          <span>发布作业</span>
        </el-menu-item>
=</el-menu>

//引用侧边栏
<div class="sidebar">
      <activitybar></activitybar>
</div>

//<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改，teacherHomeworkList、teacherHomeworkDetail 等子组件都会渲染到TeacherActivity中的 <router-view>
<div class="part">
      <router-view></router-view>
</div>

• Axios的使用

//get方法请求
this.$axios({
          method: 'get',
          headers: {
            'Content-type': 'application/json;charset=UTF-8'
          },
          url: 'https://www.baidu.com/', //请求的URL，可以加上请求参数，如https://www.baidu.com?id = 1
        }).then((response) => {          //这里使用了ES6的语法
          console.log(JSON.stringify(response))       //请求成功返回的数据
          alert(JSON.stringify(response))
          alert("成功")
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
}

//post方法请求
let info = {//请求数据

}
this.$axios({
          method: 'post',
          headers: {
            'Content-type': 'application/json;charset=UTF-8'
          },
          data: JSON.stringify(info),
          url: 'https://www.baidu.com/', //请求的URL
        }).then((response) => {          //这里使用了ES6的语法
          console.log(JSON.stringify(response))       //请求成功返回的数据
          alert(JSON.stringify(response))
          alert("成功")
        }).catch((error) => {
          console.log(error)       //请求失败返回的数据
        })
}

技术使用中遇到的问题和解决过程

之前在做页面跳转的时候不知道要怎么用vue-router，以为路由跳转只要在要用到的地方写上下面这句代码就好了

<router-link to="url" tag="button" class="button">点击</router-link>

后面才知道要在有路由跳转的地方使用router-view通过路由映射组件，这样part这个div就会渲染出上面url映射的组件

<div class="part">
      <router-view></router-view>
</div>

在写axios请求时，不知道是异步调用，直接把路由跳转写在了请求外面，导致请求还没执行就直接跳转了（doge）

this.$axios({
        method: 'post',
        headers: {
          'Content-type': 'application/json;charset=UTF-8'
        },
        data: JSON.stringify(info),
        url: 'https://www.baidu.com/',
      }).then((response) => {          //这里使用了ES6的语法
        if (response.data.code==='200') {
          alert('发布成功')
          this.$router.push('/teacher/activity/homeworklist')
          this.$router.go(0)
        }
        console.log(response)
        if (response.data.code==='500') {
          alert("标题重复,请修改")
        }
      }).catch((error) => {
        console.log(error)
      })} else {
          console.log('error submit!!');
          return false;
        }
});

总结

学会使用一个框架是很容易的，像我看看视频，跟着敲几遍代码，就很熟练了，但是框架的底层原理还是很难理解的。当然，为了在这么短的时间内完成一个还像样的项目，没必要去学习它的底层原理，我们只要做到能用、会用就行了。学习了Vue.js这个框架，不仅仅让我提高了编程能力，也加深了我对前端的喜好，学习过程虽然苦涩，但是完成了一个项目后，感觉还是挺不错的。

参考文献

最全最新Vue、Vuejs教程，从入门到精通
Vue.js 教程