初识Vue.js
技术概述
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这个框架，不仅仅让我提高了编程能力，也加深了我对前端的喜好，学习过程虽然苦涩，但是完成了一个项目后，感觉还是挺不错的。
