前后交互实战

一、环境准备

这里我使用的是Vue+Element-Ui+SpringBoot
确保电脑有node环境和npm，之后选择一个文件下cmd去安装vue-cli，npm install -g vue-cli，安装之后使用Vue -V查看是否可以在当下窗口下使用vue命令，如果不可以的话先通过管理员的身份进入到powershell下，Get-ExecutionPolicy查看当前权限，Set-ExecutionPolicy RemoteSigned修改权限到RemoteSigned下，退出到当前文件下，shift+右键找到powershell进入之后，通过vue create 创建vue的脚手架环境，或者 vue init webpack 初始化vue脚手架环境。

• node+npm环境准备
• npm install -g vue-cli
• vue create 或者vue init webpack

后端的Java环境这里不在强调

• jdk
• mysql
• idea

二、前端环境

在我们创建脚手架完成之后进入到App.vue页面这个页面是一个入口，下面需要挂一个路由的出口

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
@import url('./assets/reset.css');
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

其他的渲染的一些可以不用，之后就是main.js，这里是设置Vue全局的一个文件，我这里是Vue2，new Vue的写法可能不一样，意思都差不多，主要是设置路由之后挂在到App下面，而这里因为我的Demo下面要前后交互和渲染图，所以加入了axios和echart

1.引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import * as echarts from 'echarts';


Vue.config.productionTip = true
Vue.prototype.$axios = axios
Vue.use(ElementUI)
Vue.prototype.$echarts = echarts

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

关于路由

import Vue from 'vue'
import VueRouter from 'vue-router

Vue.use(VueRouter)
const routes = [
	{
		path:'/',
		name: 'home',
		componetn: ()=>import('路径')
	}
]
const router = new VueRouter({
	routes,
	mode:'history'
})
export default router

之后关于组件这里不在多说

2.关于跨域

这个是前后端交互下比定会出现的问题，跨域出现在协议，端口，域名其中一个不同的情况下。
前端设置

//找到配置的js，在下面添加这样的一段代码 proxyTable 
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:8008',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': '/api',//重写,
                }
            }
        },
        host: '127.0.0.1',
        port: 8090,
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        useEslint: true,
        showEslintErrorsInOverlay: false,
        devtool: 'eval-source-map',
        cacheBusting: true,
        cssSourceMap: false,
    },
 
}
上面的api是你后端Control层下的映射value

欢迎大家指出问题，一起学习！！