Vue + SpringBoot + Mybatis 框架开发 (一)

前言：

一直感觉自己基础太差，为了熟悉公司项目，所以想仿照公司的项目框架结构，用springboot将其进行复写，目的终究也是为了更进一步了解自身技术的痛点，然后进行解决

准备：

vue创建项目教程   springboot创建项目教程  既然有现成的前人写好东西我也就不复制粘贴了 

任务：

1.实现后台和前端连同，并且传输 “Hello Word！”

步骤：

一.

springboot 需要在启动时设置下我们的数据库地址，所以新建一个数据库，用来启动项目

直接新建一个类加上标签来完成后台给前端返回值的操作  

接下来只需要vue前端项目请求接口并且获取值就好了

这个是跨域问题报错信息我转载别人的，解决跨域我的方案是直接由前端进行解决，如果转接到后端的话可能会比较麻烦，所以我百度一下vue的请求方式选定了axios来解决跨域问题

1.vue导入axios
​​​
$ npm install axios
//使用淘宝源
$ cnpm install axios

2.config 下 index.js关于 proxyTable的配置

proxyTable: {

      '/api': {

        target: 'http://localhost:8070/',

        changeOrigin: true,

        pathRewirte: {

          '/^api': 'api/'

        }

      }

    },

3.main.js 中对于axios的引入

import axios from 'axios'

Vue.prototype.$http=axios

4.axios请求调用

test() {

      var that = this;

      this.$http

        .get("api/login")

        .then(function (response) {

          that.$data.msg = response.data;

          console.log(that.$data.msg);

        })

        .catch(function (error) {

          console.log(error);

        });

    },

附录带相关页面代码

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <ul>

      <li>

        <a href="https://vuejs.org" target="_blank"> Core Docs </a>

      </li>

      <li>

        <a href="https://forum.vuejs.org" target="_blank"> Forum </a>

      </li>

      <li>

        <a href="https://chat.vuejs.org" target="_blank"> Community Chat </a>

      </li>

      <li>

        <a href="https://twitter.com/vuejs" target="_blank"> Twitter </a>

      </li>

      <br />

      <li>

        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">

          Docs for This Template

        </a>

      </li>

    </ul>

    <h2>Ecosystem</h2>

    <ul>

      <li>

        <a href="http://router.vuejs.org/" target="_blank"> vue-router </a>

      </li>

      <li>

        <a href="http://vuex.vuejs.org/" target="_blank"> vuex </a>

      </li>

      <li>

        <a href="http://vue-loader.vuejs.org/" target="_blank"> vue-loader </a>

      </li>

      <li>

        <a href="https://github.com/vuejs/awesome-vue" target="_blank">

          awesome-vue

        </a>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: "HelloWorld",

  data() {

    return {

      msg: "Welcome to Your Vue.js App",

    };

  },

  mounted: function () {

    this.test();

  },

  methods: {

    test() {

      var that = this;

      this.$http

        .get("api/login")

        .then(function (response) {

          that.$data.msg = response.data;

          console.log(that.$data.msg);

        })

        .catch(function (error) {

          console.log(error);

        });

    },

  },

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1,

h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

启动效果

难点：

跨域问题 其实跨域问题就是访问问题 访问无法送达  vue的解决方案就是自定义转发  到后期部署到服务器上可以使用nginx解决跨域问题，但是现在问题既然前端可以解决

那么不香吗？一直说跨域，跨域但是什么叫跨域，如何解决跨域，我知道如何解决跨域但是我不知道跨域为何产生所以，现在回过头来根据问题提出问题最后才能进步，知其

然更要知其所以然。