本例主要采用 vue-cli 配合 webpack 來(lái)創(chuàng)建項(xiàng)目，采用了 VueRouter ，引入 axios 庫(kù)調(diào)用后端 API，渲染數(shù)據(jù)，實(shí)現(xiàn)了增刪改查功能。

創(chuàng)建新項(xiàng)目

命令行進(jìn)入某個(gè)目錄

如 D:\VueStudy

創(chuàng)建項(xiàng)目

vue init webpack vue-router-demo

安裝依賴(lài)

進(jìn)入 vue-router-demo 目錄安，安裝依賴(lài)：npm install

修改配置文件

修改 config 目錄下 index.js 的 dev 端口為 80

運(yùn)行

運(yùn)行 npm run dev，打開(kāi) http://localhost，看到 Vue 主頁(yè) logo 即成功

配置項(xiàng)目

添加依賴(lài)

在 package.json 的依賴(lài)文件，加入 axios 依賴(lài)

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "axios": "^0.18.0"
}

在命令行輸入 npm install，安裝 axios 依賴(lài)

引入依賴(lài)

項(xiàng)目 src 目錄下的 main.js 文件引入 axios

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/>'
})

進(jìn)行編碼

創(chuàng)建文件

在 components 目錄中創(chuàng)建一些 vue 文件

配置路由

在 router 下的 index.js 文件中配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  // 去除#的hash模式
  mode: "history",
  routes: [
    {
      //我的班課
      path: '/',
      name: 'Index',
      component: resolve => require(['../components/Index.vue'], resolve)
    },
    {
      //任務(wù)中心
      path: '/task',
      name: 'Task',
      component: resolve => require(['../components/Task.vue'], resolve)
    },
    {
      //庫(kù)管理
      path: '/lib',
      name: 'Lib',
      component: resolve => require(['../components/Lib.vue'], resolve)
    },
    {
      //個(gè)人中心
      path: '/ucenter',
      name: 'UCenter',
      component: resolve => require(['../components/UCenter.vue'], resolve)
    },
    {
      //新建班課
      path: '/new_course',
      name: 'NewCourse',
      component: resolve => require(['../components/NewCourse.vue'], resolve)
    },
    {
      //班課詳情
      path: '/course/:id',
      name: 'CourseDetail',
      component: resolve => require(['../components/CourseDetail.vue'], resolve)
    }
  ]
})

路由跳轉(zhuǎn)

• 無(wú)參跳轉(zhuǎn)

<router-link to="/">
    <img src="./assets/logo.png" class="logo"/>
</router-link>
<router-link to="/task" class="nav-item">任務(wù)中心</router-link>

• 帶參跳轉(zhuǎn)

<router-link :to="'/course/' + course.courseId">
    <img :src="course.cover" />
</router-link>

• js 跳轉(zhuǎn)

_this.$router.push('/');

RESTful 請(qǐng)求

• GET 請(qǐng)求

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

<script>
export default {
    name: 'CourseDetail',
    data() {
        return {
            id: this.$route.params.id,
            course: {}
        };
    },
    created() {
        var _this = this;
        this.$http.get('http://localhost:8080/api/course/' + this.id).then(function(response) {
            _this.course = response.data;
        });
    }
};
</script>

• POST 請(qǐng)求

<script>
export default {
    name: 'NewCourse',
    data() {
        return {
            loginUserId: 1,
            course: {
                courseName: '',
                courseClass: '',
                cover: ''
            }
        };
    },
    methods: {
        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('/');
            });
        }
    }
};
</script>

• DELETE 請(qǐng)求

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 請(qǐng)求

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("班課結(jié)束");
    _this.$router.push("/");
    });
}