場(chǎng)景：公司要開(kāi)發(fā)一個(gè)新的項(xiàng)目，但是我們的前端就一個(gè)，還要忙著維護(hù)處理其他的項(xiàng)目，但是后端人員比較多，所以就要求后臺(tái)管理系統(tǒng)的頁(yè)面由后端人員開(kāi)發(fā)，實(shí)在不會(huì)的找前端協(xié)助，這就沒(méi)辦法了，只能自己上了！

題外話：上次寫(xiě)了vue的搭建，這次記錄下頁(yè)面開(kāi)發(fā)，前后端是怎么樣分離開(kāi)發(fā)的，給自己的目標(biāo)是先寫(xiě)一個(gè)登錄頁(yè)面內(nèi)，后臺(tái)判斷賬戶(hù)名密碼，驗(yàn)證通過(guò)后返回code碼，前端跳轉(zhuǎn)到下一個(gè)頁(yè)面即OK！

Login.vue

首先我們開(kāi)發(fā)登錄頁(yè)面組件，右鍵 src\components 文件夾，New -> Vue Component，命名為 Login，如果沒(méi)有 Vue Component 這個(gè)選項(xiàng)，可以選擇新建一個(gè) File，命名為 Login.vue 即可。代碼如下：

<template>
    <div>
        用戶(hù)名:<input type="text" v-model="loginForm.username" placeholder="請(qǐng)輸入用戶(hù)名"/>
        <br><br>
        密碼：<input type="password" v-model="loginForm.password" placeholder="請(qǐng)輸入密碼"/>
        <br><br>
        <button v-on:click="login">登錄</button>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data () {
            return {
                loginForm:{
                  username:'',
                  password:''
                },
                responseResult:[]
            }
        },
        methods:{
            login() {
                this.$axios
                    .post('/login', {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    })
                    .then(successRespones =>{
                        if (successRespones.data.code === 200) {
                            this.$router.replace({path: '/home'})
                        }
                    })
                    // eslint-disable-next-line no-unused-vars
                .catch(failResponse => {
                })
            }
        }
    }
</script>

<style scoped>

</style>

Home.vue

右鍵 src\components 文件夾，新建一個(gè) directory，命名為 home，再在 home 下新建一個(gè)Home.vue ，即首頁(yè)組件，這里暫時(shí)不做過(guò)多開(kāi)發(fā)，先隨便寫(xiě)個(gè) Hello World。

<template>
    <div>
        Hello World!
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

設(shè)置反向代理

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 設(shè)置反向代理，前端請(qǐng)求默認(rèn)發(fā)送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:18181/api'
// 全局注冊(cè)，之后可在其他組件中通過(guò) this.$axios 發(fā)送數(shù)據(jù)
Vue.prototype.$axios = axios
Vue.config.productionTip = false

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

因?yàn)槭褂昧诵碌哪K axios，所以需要進(jìn)入到項(xiàng)目文件夾中，執(zhí)行 npm install --save axios，以安裝這個(gè)模塊。

配置頁(yè)面路由

修改src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// 導(dǎo)入剛才編寫(xiě)的組件
import Home from '@/components/home/Home'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        // 下面都是固定的寫(xiě)法
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/home',
            name: 'Home',
            component: Home
        }
    ]
})

重新注冊(cè)路由，修改App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

啟動(dòng)項(xiàng)目

前端頁(yè)面已經(jīng)寫(xiě)出來(lái)了，后臺(tái)寫(xiě)個(gè)接口。

創(chuàng)建后臺(tái)項(xiàng)目并提供接口

springboot創(chuàng)建項(xiàng)目這里不再說(shuō)了，實(shí)在搞不了的可以私聊我，下面直接貼代碼

實(shí)體類(lèi)

package org.jeemp.api.pojo;

import lombok.Data;

/**
 * @author JackRen
 * @date 2021-03-07 11:46
 * @description:
 */
@Data
public class User {

    int id;
    String username;
    String password;

}

自定義返回類(lèi)

package org.jeemp.api.common;

import lombok.Data;

/**
 * @author JackRen
 * @date 2021-03-07 11:47
 * @description:
 */
@Data
public class Result {

    //響應(yīng)碼
    private int code;

    public Result(int code) {
        this.code = code;
    }

}

接口

package org.jeemp.api.controller;

import org.jeemp.api.common.Result;
import org.jeemp.api.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

import java.util.Objects;

/**
 * @author JackRen
 * @date 2021-03-07 11:48
 * @description:
 */
@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
        // 對(duì) html 標(biāo)簽進(jìn)行轉(zhuǎn)義，防止 XSS 攻擊
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("111111", requestUser.getPassword())) {
            String message = "賬號(hào)密碼錯(cuò)誤";
            return new Result(400);
        } else {
            return new Result(200);
        }
    }

}