- 创建新项目
- 选择一个文件夹存放项目
- 使用命令字符创建新项目：vue init webpack vue-router-demo
- 在该项目中添加依赖npm install
- 启动项目npm run dev，弹出地址
命令行.png
命令行2.png
- 设置项目
- 在编辑器中打开vue-router-demo1项目
- 打开package.json添加依赖
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"axios": "^0.18.0"
}
- 在main.js中引入依赖
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 在命令行中安装axios,npm install
- 进行编码
-
在components目录中创建一些vue文件
vue项目.png -
在router的index.js文件中配置路由
路由.png 路由跳转
<template>
<div id="app">
<div class="header">
<div class="myclass">
<router-link to="/" class="logo"><img src="https://static.cdn.oss.mosoteach.cn/mosoteach2/common/images/logo.png"></router-link>
</div>
<router-link to="/task" class="nav-item">任务中心</router-link>
<router-link to="/lib" class="nav-item">库管理</router-link>
<router-link to="/ucenter" class="nav-item">tyttpe</router-link>
</div>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
- RESTful请求
- get请求
var _this = this;
this.$http
.get("http://localhost:8080/api/coursesvo")
.then(function(response) {
_this.courses = response.data;
});
- post请求
addCourse: function(course) {
var _this = this;
this.$http({
method: 'post',
url: 'http://localhost:8080/api/course',
data: {
userId: _this.loginUserId,
courseName: course.courseName,
courseClass: course.courseClass,
cover: course.cover,
finished: 0
}
}).then(function() {
alert('新增班课成功');
_this.$router.push('/');
});
}
3.delete请求
deleteCourse: function(courseId, index) {
var _this = this;
this.$http({
method: "delete",
url: "http://localhost:8080/api/course/" + this.id
}).then(function() {
alert("班课删除成功");
_this.$router.push("/");
_this.courses.splice(index, 1);
});
}
- put请求
updateCourse: function(course) {
var _this = this;
this.$http({
method: "put",
url: "http://localhost:8080/api/course",
data: {
courseId: course.courseId,
courseName: course.courseName,
userId: this.id,
courseClass: course.courseClass,
cover: course.cover,
courseCode: course.courseCode,
finished: 1
}
}).then(function() {
alert("班课结束");
_this.$router.push("/");
});
}
