spring-boot+vue实现前后端分离

一 . 前端的搭建

1 . 安装vue-cli开发环境

安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。
在命令行使用:

npm install vue-cli -g

来安装vue-cli;
安装完毕后使用vue -V的命令,

很多人会遇到这样的错误,直接复制路径,找到其所在的位置删除掉文件就好了.

出现版本号,说明已经顺利的把vue-cli安装到我们的计算机里了。

2 . 创建vue-cli项目

在命令行输入这个命令,会创建一个vue-cli项目,项目名可以自定义

vue init webpack 项目名

输入命令后，会询问我们配置几个简单的选项，根据自己的需要进行填写就可以了。

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
• Project description:项目描述，默认为A Vue.js project,可以不改。
• Author：作者，如果你有配置git的作者，他会读取。
• Install vue-router? 是否安装vue的路由插件，我们这里必须安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
• setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

3. 配置项目环境

1. cd 项目名 进入我们的vue项目目录。

2. npm install 安装我们的项目依赖包，也就是安装package.json里的包.

3. npm install vue-router --save-dev 安装路由插件

4. npm run dev 开发模式下运行我们的项目。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。

4. 配置路由

我们想要访问某个页面的时候,需要为页面配置路由才可以访问
打开路由配置文件:项目名/src/router/index.js
首先导入页面:import LoginView from '@/views/login.vue'
然后在数组routes中配置页面路由:

{
    path: '/loginView',
    component: LoginView
}

配置效果如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import LoginView from '@/views/login.vue'

Vue.use(Router)
export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/loginView',
            component: LoginView
        },
    ]
})

5 . 创建vue页面

1. 创建vue页面
   每一个vue页面分为3部分
   写HTML的

   与静态HTML页面有很大的相似性,但是vue作为JS框架有自己独特语法,需要记住

2. 引入elementUI组件
   为了页面美观,在这里使用elementUI组件来开发前端页面,参考饿了么ui官方文档,来将其引入我们的项目.
   饿了么UI官网

   npm i element-ui -S` 使用命令导入饿了么ui的包

   在main.js中配置其依赖才可以使用

   // 加载element-ui
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   

3. 使用elementui快速创建一个登陆页

<template>
    <div>
         <el-form :model="userInfo" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="userInfo.username" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="userInfo.password" autocomplete="off"></el-input>
    </el-form-item>
   
  <el-form-item>
    <el-button type="primary" @click="login('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>
<script>
</script>

4. 引入axios插件
   为了向服务器发出请求,我们在这里使用axios插件,使用插件需要引入相应的包,输入命令

   	npm install axios
   

由于axios不是vue的插件,不能向饿了么UI一样作为自定义的组件,需要我们每次发送请求时来使用.
为了使用方便,在main.js文件中修改其原型链.
其中的’http://localhost:8088’是后端服务器的端口,后面解决跨域使用

var axios = require('axios');
axios.defaults.baseURL = 'http://localhost:8088'
Vue.prototype.$http = axios;

5. 前端发送请求
   在登录页绑定一个点击登录的事件,

 <script>
export default {
     data() {
      return {
        userInfo: {
          username: '',
          password: ''
        }        
      }
    },
    methods:{
        login:function(ruleForm){
            this.$http//$http是main.js中自己定义的名字
            .post('dealLogin',{
              'username':this.userInfo.username,
              'password':this.userInfo.password
            })//表示请求方式和数据,数据是json格式的
            .then(res=>{
            //then是成功后的方法
            localStorage.setItem('username',this.userInfo.username);
            this.$router.push("/main");
            })
            .catch(error=>{
            //出现异常的方法
				alert("出现异常")
            });
        }
    }
}
</script>

6. CORS解决跨域

CORS是一个W3C标准，全称"跨域资源共享" (Cross-origin resource sharing)。

它允许浏览器向跨域服务器进行XMLHttpRequest请求，从而解决AJAX只能进行同源请求的限制。

跨域需要浏览器和服务器同时支持，现在的浏览器都支持跨域，老版本的IE不在此范围内。

6.1 前端跨域配置
由于前面已经为前端配置跨域,所以现在不需要再次配置了
6.2 后端跨域配置
首先将后端的端口号配置为8088,与步骤4保持一致
然后在需要请求的方法上添加注解,@CrossOrigin,就可以访问到后端的服务器了