node.js下Vue跨域访问springboot项目（1）

前言

我个人学习使用vue接近半年了，但是依旧只是使用较为老式的引入vue.js的开发，因为对前后端分离（前后端分开运行，接口访问）开始感兴趣，于是近期也要开始学习vue-cli环境下的开发了，这里推荐大佬的一篇文章，里面十分详细的脚手架的下载还搭建，我也不过是拾人牙慧，看着自己能否总结一下。
https://blog.csdn.net/wulala_hei/article/details/85000530

vue-cli下载

目前的node已经继承了npm，所以可以去官网下载最新稳定版本的node安装https://nodejs.org/zh-cn/，安装完成以后去安装目录…/node_modules文件夹下找npm文件夹，如果没有就说明安装错误，注意node的npm是全局安装，平时不小心npm install ~都会很容易导致npm文件夹的丢失，那么就会报找不到npm.js的错误。
node安装完成之后
cmd下执行

node -v

输出当前版本号，表明安装成功。
其实所谓的vue-cli也不过只是帮助我们更好的在webpack下更好的使用vue开发，所以webpack是必要要安装的。
cmd 下执行安装webpack

npm install webpack webpack-cli -g

同样使用 webpack -v 查看版本验证安装是否成功。
然后才是安装vue-cli：

npm install -g vue-cli

vue-cli搭建vue项目

现在完成之后，我们需要进入我们的项目目录下下载cli整合好的vue项目（cd 我们要放vue项目的目录），也叫初始化vue项目：

vue init webpack vue-demo

等待下载完成后，会有几个选择，whaterver，选完之后就会给你提示如下：

To get started:

  cd vue-demo
  npm run dev

依次执行即可，此时你就可以通过localhost:8080访问到vue项目的默认模板的主页了。
接下来就是你自己的开发了。

vue单页应用的编写

vue默认的是但也应用，即在一个页面上的操作，多页面应用之后再说，先看单页面应用

下面我们先写一个登陆页面与Springboot完成一次交互。对了，在此之前先把config/index.js下的useEslint设为false：

至于为什么，tab四个空格党加强迫症这里有足够了！
首先是登录界面的组件编写，编写页面最主要的就是css，在一个vue文件里面，你可以直接在<style></style>里面去写css，也可以使用以下形式去引用。

<style scoped>
    @import '../../static/css/sb-admin-2.min.css';
    @import '../../static/vendor/fontawesome-free/css/all.min.css';
</style>

然后开始编写组件

<template >
	//省略若干样式标签
	<form class="user">
         <p v-if="check==false" style="color:red;">email or password is error, please try again</p>
          <div class="form-group">
          <!--绑定Email-->
              <input type="email" class="form-control form-control-user"
                  id="exampleInputEmail" aria-describedby="emailHelp"
                  placeholder="Enter Email Address..." v-model="email">
          </div>
          <div class="form-group">
          <!--绑定密码-->
              <input type="password" class="form-control form-control-user"
                  id="exampleInputPassword" placeholder="Password" v-model="password">
          </div>
          <div class="form-group">
              <div class="custom-control custom-checkbox small">
                  <input type="checkbox" class="custom-control-input" id="customCheck">
                  <label class="custom-control-label" for="customCheck">Remember
                      Me</label>
              </div>
          </div>
          <!--绑定单机登录事件-->
          <button class="btn btn-primary btn-user btn-block" @click="login">
              Login
          </button>
       </from>
</template>

<script>
export default {
  name: 'Login',
  data(){
      return{
          email: "",
          password: "",
          check: true,
          url:'/mainPage'
      }
  },
  methods: {
      login: function(){
          console.log(this.email+":"+this.password)
          this.$axios.post('http://127.0.0.1:8081/login?email='+this.email+"&password="+this.password)
            .then(
                (response) =>{
                    console.log(response);
                    if(response.data.success==true||response.data.success=='true'){
                      this.$router.push({ path: this.url })

                    }else{
                        this.check=false;
                    }
              }
        )
      }
  }
}
</script>

我们上面已经使用了axios来使用ajax，但是cli整合包里没有axios，所以需要自己去下载

npm install --save axios vue-axios

axios的使用可见官方文档：http://www.axios-js.com/zh-cn/docs/vue-axios.html
然后我们需要把下载js引入，在main.js里面:

import axios from 'axios'
Vue.prototype.$axios = axios

然后随便写一个用于登录之后跳转的组件，在router/index.js里面配置好路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/mainPage',
      name: 'MainPage',
      component: MainPage
    }
  ]
})

接下来就是搭建springboot和数据库进行交互了。详情请见https://blog.csdn.net/qq_41910359/article/details/117237775