Springboot v2.0.6 +vue实现增删查改例子小记

学习Vue，就想着自己搭建一个框架学习一下，本文属于Vue与后台的增删改查入门例子，不做讲解，只为了记录一下代码。后台框架前台框架的搭建自己百度就可以做到了。本文略去后端代码的例子。有兴趣的同学可以找本人索取后端例子。

废话不多说直接上代码。
前台Vue代码

1. config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 路由接口代理配置
    proxyTable: {
      '/Demo': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/Demo': '/Demo'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

上面配置中，我们根据实际情况只需要修改proxyTable对于配置即可。假设我后端请求地址是http://localhost:8081，所有Demo的接口url都以/Demo开头。所以首先需要匹配所有以/Demo开头的.然后修改target的地址为http://localhost:8081。最后修改pathRewrite地址。将前缀 ‘^Demo’ 转为 ‘/Demo’。如果本身的接口地址就有 ‘/Demo’ 这种通用前缀，就可以把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。

编写Vue相关组件components
2. VueFooter

3. VueHeader.vue

4. VueIndex.vue

在此有必要讲解下，provider/inject；axios；
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

具体可以参考此处讲解

在vue项目开发中，我们使用axios进行ajax请求，axios安装及使用，请参考此处链接。

5. src/router/index.js 路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VueIndex from '@/components/VueIndex'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/toIndex',
      name: 'VueIndex',
      component: VueIndex
    }
  ]
})

6. App.Vue

7. main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false
axios.defaults.baseURL='http://127.0.0.1:8081/Demo'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})