场景：公司要开发一个新的项目，但是我们的前端就一个，还要忙着维护处理其他的项目，但是后端人员比较多，所以就要求后台管理系统的页面由后端人员开发，实在不会的找前端协助，这就没办法了，只能自己上了！

题外话：上次写了vue的搭建，这次记录下页面开发，前后端是怎么样分离开发的，给自己的目标是先写一个登录页面内，后台判断账户名密码，验证通过后返回code码，前端跳转到下一个页面即OK！

Login.vue

首先我们开发登录页面组件，右键 src\components 文件夹，New -> Vue Component，命名为 Login，如果没有 Vue Component 这个选项，可以选择新建一个 File，命名为 Login.vue 即可。代码如下：

<template>
    <div>
        用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
        <br><br>
        密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
        <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>

<template> 标签中随便写了一个登录的界面， methods 中定义了登录按钮的点击方法，即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /home。因为之前我们设置了默认的 URL，所以请求实际上发到了 http://localhost:18181/api/login

Home.vue

右键 src\components 文件夹，新建一个 directory，命名为 home，再在 home 下新建一个Home.vue ，即首页组件，这里暂时不做过多开发，先随便写个 Hello World。

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

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

<style scoped>

</style>

设置反向代理

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

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:18181/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

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

因为使用了新的模块 axios，所以需要进入到项目文件夹中，执行 npm install --save axios，以安装这个模块。

配置页面路由

修改src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import Home from '@/components/home/Home'
import Login from '@/components/Login'

Vue.use(Router)

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

重新注册路由，修改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>

启动项目

前端页面已经写出来了，后台写个接口。

创建后台项目并提供接口

springboot创建项目这里不再说了，实在搞不了的可以私聊我，下面直接贴代码

实体类

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;

}

自定义返回类

package org.jeemp.api.common;

import lombok.Data;

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

    //响应码
    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) {
        // 对 html 标签进行转义，防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("111111", requestUser.getPassword())) {
            String message = "账号密码错误";
            return new Result(400);
        } else {
            return new Result(200);
        }
    }

}

配置信息，修改端口

整体测试

启动后台项目

启动前端项目

登录账户admin 密码111111

号外：因公司需要开始学习前端基础，写的不对的地方欢迎指正！