vue.js+iview+springboot搭建一個前后端分離登陸demo

今天的文章介紹的是vue.js+iview+springboot來搭建一個簡單的前后端分離登錄demo。

（項目目錄在最后）

一、前端（vue.js+iview）

在上一篇的文章《基于Idea從零搭建一個最簡單的vue項目》中，我們簡單的講解了如何用Idea搭建一個最簡單的vue.js。所以今天這篇文章中不做過多講解，只是簡單的一筆帶過，不明白的可以參考上一篇文章。

  • 1.新建一個靜態(tài)的網(wǎng)頁項目，這里我給項目取名為login
01.png
02.png
  • 2.初始化包結(jié)構(gòu)
05.png
06.png
  • 3.安裝iview

首先先停止vue項目（在控制臺按Ctrl+C，再按Y停止項目），停止以后執(zhí)行命令
npm install --save iview

07.png

  • 4.在main.js中加入iview

加入的代碼為
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)
如果main.js代碼報錯，是因為沒有支持ES6的語法，（alt+回車可以轉(zhuǎn)換為ES6的語法）

08.png

轉(zhuǎn)換為ES6語法，并且引入iview
09.png

到此為止iview就算是引入完成了，現(xiàn)在重新啟動一下項目（npm run dev）就可以來使用iview的樣式了。

  • 5.使用iview

首先，我們在工程目錄componets下新建一個Login.vue文件。并且登錄iview的官網(wǎng)找到Form表單組件。復制代碼到Login.vue中

10.png

為了方便，我直接貼出代碼

<template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="userName">
            <Input type="text" v-model="formInline.userName" 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: {
                    userName: '',
                    password: ''
                },
                ruleInline: {
                    userName: [
                        {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.vue完成后去修改app.vue文件。話不多說，直接上代碼。當然，代碼內(nèi)具體的語法需要你自己去了解。

<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>

好了，到此為止，vue的登錄頁面算是完成了。運行來看看效果。


12.png

哈哈，有點太過于單調(diào)了。但是頁面總是畫出來了，也算是成功了?，F(xiàn)在我們來修改Login.vue的代碼。

  • 6.修改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!');
                    }
                })
            }

vue.js官方推薦我們使用axios來發(fā)送異步請求。所以我們就使用axios來發(fā)送異步請求。
首先我們引入axios，并且使用axios。
安裝axios
在命令行內(nèi)輸入
npm install axios -S
進行安裝。
安裝完成后在main.js中使用axios，在main.js中加入以下代碼
import axios from 'axios'
Vue.prototype.$axios = axios
這樣就可以在全局中使用axios做請求了。
我們在表單校驗通過的時候使用axios來請求后臺。代碼如下

handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: '',//請求的地址
                            method: 'post',//請求的方式
                            data: this.formInline//請求的表單數(shù)據(jù)
                        }).then(res => {
                            console.info('后臺返回的數(shù)據(jù)', res.data);
                        }).catch(err => {
                            console.info('報錯的信息', err.response.message);
                        });
                    } else {
                        this.$Message.error('表單校驗失敗!');
                    }
                })
            }

到此為止，前端的搭建算是完成了，我們來搭建springboot作為后端，來實現(xiàn)一個簡單的登錄請求

三、后端（springboot）

  • 1.新建一個新的spring initializr工程，這里我們使用默認的項目名demo。在第三步的時候選擇web
13.png

14.png

15.png
  • 2.新建LoginController.java 和User.java
    LoginController.java代碼如下
package com.example.demo;

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;
/**
 * Created by 不愛編程的程序猿
 * 2018/11/8
 */
@RestController
@RequestMapping("/rest")
public class LoginController {

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public Boolean Login(@RequestBody User user) {
        System.out.printf("用戶名" + user.getUserName());
        System.out.printf("用戶密碼" + user.getPassword());
        return Boolean.TRUE;
    }

}

User.java代碼如下

package com.example.demo;

import javax.persistence.Entity;

/**
 * Created by 不愛編程的程序猿
 * 2018/11/8
 */

@Entity
public class User {

    //用戶名
    private String userName;
    //密碼
    private String password;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

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

由于springboot默認的端口是8080，但是被前端的項目占用了，所以我們需要修改端口，打開application.properties文件加入 server.port=8081即可修改端口號為8081，修改后啟動項目。后端項目已經(jīng)啟動，現(xiàn)在我們?nèi)デ岸藖碚埱蠛蠖说南到y(tǒng)。我們重新回到Login.vue文件，修改url為localhost:8081/rest/login

handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: 'localhost:8081/rest/login',//請求的地址
                            method: 'post',//請求的方式
                            data: this.formInline//請求的表單數(shù)據(jù)
                        }).then(res => {
                            console.info('后臺返回的數(shù)據(jù)', res.data);
                        }).catch(err => {
                            console.info('報錯的信息', err.response.message);
                        });
                    } else {
                        this.$Message.error('表單校驗失敗!');
                    }
                })
            }

打開登錄頁面輸入用戶密碼以后,發(fā)現(xiàn)瀏覽器的console控制臺報錯了，查找發(fā)現(xiàn)是跨域問題。


16.png

具體什么是跨域問題，這里不做講解，可以自行百度。
既然出現(xiàn)了跨域問題，自然得想辦法解決。我們打開
config下的index.js 打開后可以看到


17.png

我們將proxyTable修改為 
proxyTable: {
        '/rest': {
            target: 'http://localhost:8081',//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
            changeOrigin: true,
            pathRewrite: {
                '^/rest': '/rest'
            }
        }
    }

并且重新修改提交表單的請求方法為

handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: '/rest/login',//請求的地址
                            method: 'post',//請求的方式
                            data: this.formInline//請求的表單數(shù)據(jù)
                        }).then(res => {
                            console.info('后臺返回的數(shù)據(jù)', res.data);
                        }).catch(err => {
                            console.info('報錯的信息', err.response.message);
                        });
                    } else {
                        this.$Message.error('表單校驗失敗!');
                    }
                })
            }

在登錄頁面輸入賬號：喜歡的話點個贊 密碼：6666666 在后臺打個斷點就可以查看傳入的參數(shù)。

登錄
后臺斷點

這個項目只是簡單的做前后端分離的請求，前端具體如何跳轉(zhuǎn)頁面，這里不作講解，可以去學習vue的router路由。

  • 最后附上工程的目錄（沒有進行分包）
  • 前端 login工程
前端工程目錄
  • 后端工程
后端工程目錄
一個簡單的前后端分離項目搭建完成,喜歡的話幫忙點個贊就是給我最大的鼓勵，有一些寫的不好的或者不對的地方歡飲大家指出?；蛘哂心男┎皇呛苊靼椎牡胤娇梢栽谖恼孪路皆u論一起探討。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容