快速搭建VUE+SpringBoot前后端分离项目

VUE部分

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

1.安装Node

1. 百度nodejs,官网第一条进去 https://nodejs.org/en/
   
2. 第一个是稳定版，第二个是最新的，一般都是下载稳定版本，所以点击第一个下载，下载完成后直接双击运行安装
3. 一直下一步就好了，最后点击这个Add to PATH，这样你就不用自己去配置环境变量，不然还得自己配置环境变量，配置的话也不难，百度教程很多。最后Install，等待安装完成，完成之后Finish，NODE就安装完成了。检验一下是否可用，打开命令窗口，输入node --version，检验npm是否可用，命令窗口输入npm --version，这时候有版本号就表示安装成功。
   

2.安装VUE脚手架

1. cmd运行

npm install -g @vue/cli 
or
yarn global add @vue/cli`

2. 查看版本
   vue --version
   

3.VUE3.0介绍和优点

vue3.0增加了UI界面，不用在敲命令行就可以快速的创建项目和添加插件，推荐新手使用3.0以上版本

4.创建项目

1. 在命令行中执行vue ui,如果没有问题会直接弹出操作界面，没有弹出的话可以自己输入http://localhost:8000/
2. 点击左上角项目管理器
   
3. 可以创建也可以导入，我们这次新创建一个项目
   
4. 添加项目名，点击下一步
   
5. 选择默认配置，点击创建完成
   
   6.稍等一会项目就创建完了
   

5.如何快速安装插件

1. 选择插件导航栏
2. 点击添加插件，在搜索框中搜索需要的插件
   
3. 点击安装

6.如何启动项目

1. 点击任务，选择第一个server，点击运行就可以启动项目
2. 点击启动app，就会自动弹出vue界面
   

SpringBoot部分

1. File------>New------>Project

2. spring Assistant------>选择JDK版本------->Next
   

3. 填写包名称----->项目名称--------->Next
   

4. 选择web项目------>Next
   

5. 更改项目保存路径
   

6. 第5步完成即可创建项目成功
   

7. 将src标注成sources
   

8. 编写相关的Controller、Service

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorld {
    @RequestMapping("/hello")
    public String hello(){
        return "hello world !";
    }
}

9. 启动主程序
   

10. 访问localhost:8080/hello,如下图
    

如何前后端分离开发

通过一个简单的用户验证来讲解如何开发

1.开发前端简单界面

为了方便开发，我们引入饿了吗UI

1. 引入element ui
   
2. 引入Axios依赖
   
   在main.js中引用axios

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from 'axios'
Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.config.productionTip = false

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

2. 前台代码

3. 效果图
   

2.解决跨域问题

vue3.0与1.0，2.0不同，需要自己创建配置文件，在根目录下创建vue.config.js,在启动时就会自动加载配置文件

module.exports = {
    devServer:{
    //所有通过'api'调用的请求都会转发到'http://localhost:8090/'下面
        proxy:{
            '/api':{
                target:'http://localhost:8090/',
                changeOrigin: true,
                 pathRewrite: {
                                    "^/api": ""
                                }
            }
        }
    }
}

3.通过Ajax调用后端接口

4.后台接口开发

创建用户VO

package com.example.demo;

public class user {
    private String name;
    private String password;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

创建Controller

package com.example.demo;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class login {
    @PostMapping(value = "/login")
    //@ApiImplicitParam(name = "id", value = "id值", paramType = "path", required = true, dataType = "Integer")
    public boolean login(user user) {
        System.out.println("name :"+user.getName()+"password :"+user.getPassword());
        //简单演示，直接把用户名和密码写死
        if("user".equals(user.getName())&&"user".equals(user.getPassword())){
            return true;
        }else{
            return false;
        }
    }
}

5.效果图

如果输入错误的

成功