5.vue单页应用

1. 创建新项目

• 选择一个文件夹存放项目
• 使用命令字符创建新项目：vue init webpack vue-router-demo
• 在该项目中添加依赖npm install
• 启动项目npm run dev，弹出地址
  命令行.png
  命令行2.png

2. 设置项目

• 在编辑器中打开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

3. 进行编码

• 在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请求

1. get请求

    var _this = this;
    this.$http
      .get("http://localhost:8080/api/coursesvo")
      .then(function(response) {
        _this.courses = response.data;
      });

2. 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);
      });
    }

4. 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("/");
      });
    }