ssm+maven搭建及扩展修改（四.前后端分离-下篇）

接下来就是真正的前后端分离，激动不！！！

前后端分离-上篇，我想大家也有疑问，ajax请求的url为啥要带.action，而不是纯访问链接？？？这就是没分离的缺点，主要在springDispatcherServlet拦截请求链接的原因，web.xml里配置的是<url-pattern>*.action</url-pattern>，所以只有带.action的链接才被捕捉到进而访问后台controller层。前后端分离后就改为<url-pattern>/</url-pattern>，因为页面及静态文件在另一个工程里访问路径不会受springDispatcherServlet配置影响都可以访问。

这里，我将用vue+ivew+nginx前端技术搭配Tomcat启动后台服务做个简单展示。简单介绍下，前端分离后，当然可以不用架构只是纯html+jquery+css去写，页面代码量会很大繁琐，不易后期维护，何必呢，就是搞大的。普及下，目前有三种vue,angular,react三种架构，从易到难，react最难上手，当然react支持ie8很吊。

一.vue搭建

参照文章vue3.0搭建

这里前端往后台发送请求不用jquery的ajax，采用搭配vue的axios，需要下载插件库。

如果按我的步奏是有淘宝镜像的就用cnpm下载会快很多，没有的话用npm

1.cnpm install --save axios

2.cnpm install --save vue-axios

下载好后，找到main.js

添加代码

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

然后，npm run serve,启动项目

二.修改vue页面

首先在ownpage根目录里package.json平级添加文件vue.config.js，这是防止跨域问题。

const path = require('path');
const debug = process.env.NODE_ENV !== 'production';

function resolve (dir) {
   return path.join(__dirname,dir)
}
module.exports = {
    baseUrl: '/', // 根域上下文目录
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
    productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map';
            config.resolve = {
           		extensions: ['.js', '.vue', '.json',".css"],
            	alias: {
              		'vue$': 'vue/dist/vue.esm.js',
              		'@': resolve('src'),
            	}
        	}
        } else { // 生产环境配置
        	config.devtool = 'cheap-module-eval-source-map';
            config.resolve = {
           		extensions: ['.js', '.vue', '.json',".css"],
            	alias: {
              		'vue$': 'vue/dist/vue.esm.js',
              		'@': resolve('src'),
            	}
        	}
        }
        // Object.assign(config, { // 开发生产共同配置
        //     resolve: {
        //         alias: {
        //             '@': path.resolve(__dirname, './src'),
        //             '@c': path.resolve(__dirname, './src/components'),
        //             'vue$': 'vue/dist/vue.esm.js'
        //         }
        //     }
        // })
    },
    chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，
        if (debug) {
            config.resolve.alias
            .set('@$', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
            .set('layout',resolve('src/layout'))
            .set('base',resolve('src/base'))
            .set('static',resolve('src/static'))
        } else {
            // 生产开发配置
            config.resolve.alias
            .set('@$', resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
            .set('layout',resolve('src/layout'))
            .set('base',resolve('src/base'))
            .set('static',resolve('src/static'))
        }
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: { // 第三方插件配置
    },
    pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/ownkua': {
　　　　　　　　　　//要访问的跨域的api的域名
                target: 'http://localhost:8099/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/ownkua': ''
                }
            }
        },
        before: app => { }
    }
}

下一步，路劲：./views/Home.vue

修改：

<template>
  <div>
    <span v-for="value,key,index in persons" style="font-size:36px;font-weigth: 600;">{{value.name}}</span>
    <button @click="getValue" style="height:30px;width:60px">点击</button>
  </div>
</template>

<script>
export default {
  name: 'home',
  data(){
    return{
      persons:[]
    }
  },
  methods:{
    getValue(){
      var _that = this;
      this.axios({
        method:'post',
        url:'/ownkua/own/personController/showPerson2',
        data:{
          id:1
        }
      }).then(function(response) {
        _that.persons = response.data;
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

好了，重新启动 npm run serve ，这是为了读取新加的vue.config.js配置。

下一步，修改后台文件web.xml

<servlet-mapping>
	<servlet-name>springDispatcherServlet</servlet-name>
	<url-pattern>*.action</url-pattern>
</servlet-mapping>

修改为

<servlet-mapping>
	<servlet-name>springDispatcherServlet</servlet-name>
	<url-pattern>/</url-pattern>
</servlet-mapping>

重启后台服务！！！！

查看页面（http://localhost:8080/），默认都是8080端口，点击按钮：

完美，前后端分离完成！！！谢谢！！！

后面，完善后台架构，深入学习优化，敬请期待！！！