简介

本例主要采用vue-cli配合webpack来创建项目,采用了VueRouter,引入axios库调用后端API,渲染数据,实现了增量改查功能。

  1. npm淘宝镜像官方的npm在国内速度是比较慢的,可以使用淘宝的镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 使用cnpm安装包
    cnpm install <包的名称>

一、创建项目

  1. cmd 进入一个将要建立项目的目录
    例如:D:Vue
  2. 创建项目
    vue init webpack Shop (项目名)
  3. 进入 Shop 目录安装依赖:
    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"
  }
  1. 安装axios,在命令行:
    npm install
  2. 项目的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/>'
})
  1. 配置路由,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)
        },
        {
            //任务中心
            path: '/task',
            name: 'Task',
            component: resolve => require(['../components/Task.vue'], resolve)
        },
        {
            //个人中心
            path: '/ucenter',
            name: 'UCenter',
            component: resolve => require(['../components/UCenter.vue'], resolve)
        }
    ]
})
  1. 路由跳转例子
    无参跳转:
    <router-link to="/">  
       <img src="#" class="logo"/>  
    </router-link>  
    <router-link to="/task" class="nav-item">任务中心</router-link>  
    
    路径传参跳转:
    <router-link :to="'/course/' + course.courseId">
    <img :src="course.cover" />
    </router-link>
    
    js跳转:
    _this.$router.push('/');
    
  2. GET请求示例
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>
  1. POST 请求
<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>

15.DELETE

deleteCourse: function(courseId,index) {
            var _this = this;
            this.$http({
                method: 'delete',
                url: 'http://localhost:8080/api/course/' + courseId
            }).then(function() {
                alert('班课删除成功');
                 _this.courses.splice(index,1);
            });
        }
  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("/");
    });
}