10、vue.js工程化项目起步-vue-router-demo

本文章主要采用vue-cli配合webpack来创建项目，引入axios库调用后端API，实现了增删改查

1.命令行先进入某个目录如D:\VueStudy
2.创建项目: vue init webpack vue-router-demo1
3.进入vue-router-demo1目录安装依赖：npm install
4.修改config目录下index.js的dev端口为80
5.运行：npm run dev，打开http://localhost，看到Vue主页logo即成功
6.ctrl+c退出批处理状态
7.在package.json的依赖文件，加入axios依赖

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

8.安装axios，在命令行：npm install
9.项目的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/>'
})

10.components目录中创建一些vue组件

1.png

11.配置路由，router目录的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
// import Index from '@/components/Index'
// import Message from '@/components/Message'



Vue.use(Router)

export default new Router({
    //去除#的bash模式
    mode:"history",
  routes: [
    {
            //我的班课
      path: '/',
      name: 'Index',
      component:resolve => require(['../components/Index.vue'],resolve)
    },
        {
            //任务中心
            path:'/task',
            name:'Task',
            component:resolve => require(['../components/Task.vue'],resolve)
        },
        {
            //库管理
            path:'/lib',
            name:'Lib',
            component:resolve => require(['../components/Lib.vue'],resolve)
        },
        {
            //个人中心
            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)
        }
  ]
})

12.路由跳转例子：

• 无参跳转

<router-link to="/" class="nav-item">
                <img src="./assets/logo.png" />
            </router-link>

• 路径传参跳转：

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

• js跳转：

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

• GET请求

<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>

• DELETE请求

deleteCourse: function(courseId, index) {
                var _this = this;
                this.$http({
                    method: 'delete',
                    url: 'http://localhost:8080/api/course/' + courseId
                }).then(function() {
                    alert('班课删除成功');
                    _this.courses1.splice(index, 1);
                });
            }

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

• PUT请求

addCourse: function(course) {
            var _this = this;
            this.$http({
                method: 'put',
                url: 'http://localhost:8080/api/course',
                data: {
                    userId: _this.loginUserId,
                    courseName: course.courseName,
                    courseClass: course.courseClass,
                    courseId: _this.id,
                    cover: course.cover,
                    finished: 1
                }
            }).then(function() {
                alert('修改成功');
                _this.$router.push('/');
            });
        }

更多详情代码请看https://github.com/wxy1027/VueRouterStudy/tree/master/vue-router-demo1