基于vue.js和Spring Boot，搭建一个前后端分离的登录项目

一、前端
Vue.js + iview

1、先查看本机是否安装了node.js、npm、和vue
使用cmd命令行窗口进行查看，输入之后，均显示对应的版本，证明安装成功！！！

如果没有安装，可以参考前面的一篇博客：
基于idea，从零开始搭建第一个vue项目

2、打开idea，新建一个网页项目。这里取名为login，安装步骤，依次填写项目名称和对应的地址

3、初始化包结构（因为已经安装的vue，所以减去了一些复杂的工程）

在Terminal中输入命令：

vue init webpack login

初始化设置可以参考下图：

4、在Terminal中依次输入下面三条黄色字体的命令

5、安装iview

• 第一步，先停止vue项目（在控制台按ctrl+c，然后再输入y，停止vue项目）
• 第二步，输入命令：npm install --save iview

6、在login —> src ——> main.js 中添加iview

加入代码：

import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)

加入之后需要重新运行项目，然后就可以使用iview了

7、使用iview

• 第一步，在login —> src —> components 目录下新建一个Login.vue文件
  

• 第二步，打开iview官网，找到Form表单，复制代码到Login.vue中，

官网地址：iview官网

代码如下：

<template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
        }
    }
</script>

• 第三步，修改login —> src —> router目录下的app.vue文件

修改代码如下所示：（即将页面的地址映射为Login页面）

<template>
    <div id="app">
        <Login></Login>
    </div>
</template>
<script>
    import Login from '@/components/Login'
    export default {
        name: 'App',
        components: {
            'Login': Login
        },
        data() {
            return {}
        }
    }
</script>
<style>
    #app {
        text-align: center;
        margin-top:400px ;
    }
</style>

• 第四步，运行项目，查看效果

虽然单调的一些，但是总体思想差不多！！！

8、修改Login.vue代码并且安装和使用axios

• 第一步，在Login.vue组件中，有一个提交的方法，当校验通过时，会提示“Success!”，失败时会提示“Fail!”,所以我们可以在校验通过的时候提交表单到后台。

代码：

handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }

• 第二步，安装axios，
  停止项目，在命令行输入：npm install axios -S

• 第三步，在main.js中使用axios，

首先导入下面的代码，引入axios

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

然后，在Login.vue中，将methods里面的代码替换如下：

handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: '',//请求的地址
                            method: 'post',//请求的方式
                            data: this.formInline//请求的表单数据
                        }).then(res => {
                            console.info('后台返回的数据', res.data);
                        }).catch(err => {
                            console.info('报错的信息', err.response.message);
                        });
                    } else {
                        this.$Message.error('表单校验失败!');
                    }
                })
            }

至此，前端项目的搭建就完成了 ！！！

====================================================

二、后端
Spring Boot

1、新建一个新的spring initializr工程，这里我们使用默认的项目名demo，在Dependences时选择一个Web模块

2、新建User.java和LoginController.java

• User.java

• LoginController.java

package com.example.demo.controller;

import com.example.demo.entity.User;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

/**
 * @Author gaojunlong
 * @Date 2020/8/24
 * @Time 17:37
 * @Version 1.0
 */

@RestController
@RequestMapping("/rest")
public class LoginController {

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public Boolean Login(@RequestBody User user){
        System.out.println("用户名：" + user.getUserName());
        System.out.println("密码：" + user.getPassword());

        return Boolean.TRUE;
    }
}

3、修改spring boot的端口号

因为Spring Boot默认的端口号已经被前端占用了，所以为了避免冲突，在application.properties中将Spring Boot的端口号改为8081

4、回到前端项目，修改Login.vue

将Login.vue的url修改为：localhost:8081/rest/login

=此时运行项目还会报错，需要进一步修改=

1、找到 login —> config 目录下的 index.js文件

将proxyTable的修改如下：

proxyTable: {
        '/rest': {
            target: 'http://localhost:8081',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,
            pathRewrite: {
                '^/rest': '/rest'
            }
        }
    }

2、重新修改Login.vue中提交表单的方法

代码如下：

handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: '/rest/login',//请求的地址
                            method: 'post',//请求的方式
                            data: this.formInline//请求的表单数据
                        }).then(res => {
                            console.info('后台返回的数据', res.data);
                        }).catch(err => {
                            console.info('报错的信息', err.response.message);
                        });
                    } else {
                        this.$Message.error('表单校验失败!');
                    }
                })
            }

3、测试

• 在登录页面输入用户名和密码，然后点击Signin。
  
• 在Spring Boot项目的控制台查看是否有结果输出，输出的在登录界面中输入的用户名和密码，即表示搭建成功 ！！！
  

项目结构
有不了解的地方，可以根据我的项目结构进行相应的更改

• 前端（圈出来的表示是新加的或者要做修改的）
  
• 后端（圈出来的表示是新加的或者要做修改的）

参考博客：https://www.jianshu.com/p/bbc455d86a22