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

最新推荐文章于 2024-04-02 21:05:53 发布

gao_jun1

最新推荐文章于 2024-04-02 21:05:53 发布

阅读量554

点赞数 2

分类专栏： vue Spring Boot 文章标签： java

本文链接：https://blog.csdn.net/gao_jun1/article/details/108201918

版权

Spring Boot 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

vue

9 篇文章 1 订阅

订阅专栏

一、前端
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

gao_jun1

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
基于vue.js和Spring Boot，搭建一个前后端分离的登录项目

一、前端Vue.js + iview1、先查看本机是否安装了node.js、npm、和vue使用cmd命令行窗口进行查看，输入之后，均显示对应的版本，证明安装成功！！！如果没有安装，可以参考前面的一篇博客：基于idea，从零开始搭建第一个vue项目2、打开idea，新建一个网页项目。这里取名为login，安装步骤，依次填写项目名称和对应的地址3、初始化包结构（因为已经安装的vue，所以减去了一些复杂的工程）在Terminal中输入命令：vue init webpack log.
复制链接

扫一扫