从0搭建前后端分离项目——集成开发（三）

上一期，我们把后端的工程创建好了，现在我们用idea（我用的是这个编译器，大家可以自行选择）运行我们的项目！

访问我们的8080端口：localhost:8080
ok，我们能看到下面这张图！

看到这张图就对了，因为？我们什么页面都还没做呀（手动狗头）！

登录页面开发

• 我们本次项目是前后端分离的项目，我采用的是反向代理的方法，实现前端对后端进行访问。看了很多前辈的解说，我觉得比我讲的明白多了（支持百度），这里我简单的介绍一下什么是反向代理：
• 在开发的时候，前端用前端的服务器（Nginx），后端用后端的服务器（Tomcat），当我开发前端内容的时候，可以把前端的请求通过前端服务器转发给后端（称为反向代理）。
• 反向代理呢也有不暴露服务器真实地址，起到一个保护的作用。简单的来讲就是，你访问的那个网址并不是服务器的真是地址，你访问的那个地址他会把你想要的东西拿给你，但是你不知他是从哪里拿给你的。
• 我们讲到了反向代理，那也简略的聊一下，什么是正向代理呢？（滑稽）
• 正向代理呢，让小小白跟大家说一下自己的见解：顾名思义呢，就是啥，你想访问的东西你访问不到，这个时候你就要借助工具（就是这个正向代理）帮助你访问你想访问的网页！
• over，正向代理和反向代理我就啰嗦到这里了！

前端登录页面开发

• Login.vue
• 注意！现在该打开大家的前端工程了！首先我们在src/components目录下，创建一个Login.vue文件。代码如下：

<template>
  <div>
    <div class="container">
      <canvas id="canvas"></canvas>
      <div class="login-form">
        <div class="text">登录</div>
        <div class="form-item">
          <input type="text" v-model="loginForm.username" placeholder="用户名">
          <input type="password" v-model="loginForm.password" placeholder="密码">
        </div>
        <div class="btn" v-on:click="login">登录</div>
      </div>
    </div>
  </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(successResponse => {
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
          }
        })
        .catch(failResponse => {
        })
    }
  }
}
</script>

<style scoped>
  html {
    scrollbar-width: none;
  }
  #canvas {
    background: linear-gradient(to right, #fbc2eb, #a6c1ee);
    overflow: auto;
    z-index: -1;
  }
  .login-form {
    background-color: #ffffff91;
    width: 350px;
    height: 440px;
    border-radius: 15px;

    /* 定位到中心 */
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .text {
    /* 标题Login的样式 */
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    margin-top: 40px;
  }

  .form-item, .btn, .other {
    margin: 40px auto;
    width: 90%;
  }

  input {
    width: 80%;
    margin-top: 20px;
    padding: 10px;
    /* placeholder变更为大写字体 */
    text-transform: uppercase;
    /* 边框效果 */
    border: 0;
    outline: none;
    border-bottom: 1px solid #fbc2eb;
    background-color: #ffffff00;
  }

  input::placeholder {
    font-weight: bold;
    color: #acb7c9;
  }

  input:focus {
    /* 当输入框获取焦点时的效果 */
    border-bottom: 1px solid #ffffff91;
    animation: bBottom 2s infinite;
  }

  @keyframes bBottom {
    50% {
      border-bottom: 1px solid #a6c1ee;
    }
  }

  .btn {
    height: 40px;
    line-height: 40px;
    /* 字体 */
    color: #fff;
    font-weight: bold;
    letter-spacing: 10px;
    text-align: center;
    /* 鼠标样式 */
    cursor: pointer;
    /* 边框、背景 */
    border-radius: 10px;
    background: linear-gradient(to right, #fbc2eb, #a6c1ee, #fbc2eb);
    background-size: 200%;
  }

  .btn:hover {
    animation: btnAnimate 1s infinite;
  }

  @keyframes btnAnimate {
    50% {
      background-position: 200%;
    }
  }

  a {
    text-decoration: none;
    color: #fbc2eb;
  }
</style>

• 大家可以把我的css样式忽略掉，直接看我的HTML部分和接口部分。
• 写到这里，大家可以看到我的method部分，login方法中，意思是向后端 /login 发送请求数据，获得成功响应之后，跳转到我们的 /index目录中。实际上是把请求发送到了我们设置的默认URL http://localhost:8443/api/login
• 做到这里，我们再创建一个登陆成功后，跳转到的一个首页页面，这里我就直接附图了：
  再看一下，我的首页写了什么：

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

<script>
export default {
  name: 'Appindex'
}

好吧，就是啥都没写的一个文本（滑稽）。

• 从现在开始，我们是不是要向后端进行访问了？
• 开始设置我们的前端反向代理，改一下我们的main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

• 快来，看重点！axios这个模块我们可能要安装一下，上命令：npm install --save axios
• 接下来，我们配置一下我们的路由，上代码：

import Vue from 'vue'
import Router from 'vue-router'
// 导入编写的组件
import AppIndex from '../components/home/Appindex'
import Login from '../components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

• 配置完之后就可以运行啦：npm run dev
• 之后网页运行：localhost:8080/#/login
• 先看小白白的（动态JavaScript）登录效果图（搬运工的辣眼审美只能做到这种效果了^ - ^）：
  

后端登录测试

• 让我们写一下实体类
• 让我们看一下前端向后端发起请求的代码，思考一个问题：后端啊怎么接收呢？

.post('/login', {
          username: this.loginForm.username,
          password: this.loginForm.password
        })

• 让我们创建一个User实体类文件，上代码：

package com.lls.llsleader.entity;

public class User {
    private int id;
    private String username;
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

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

• 再写上我们的响应码

package com.lls.llsleader.entity;

//实际上由于响应码是固定的，code 属性应该是一个枚举值。
public class Result {
//    响应码
    private int code;

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

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }
}

这里做了一点简化，后续更近。

• 实体全部整理好了之后呢，我创建一个控制器，让我们能够把这些实体合理应用起来（这里只是个简单的demo，主要是看一下前后端是如何交互的，后面会升级。）上代码：
  

package com.lls.llsleader.controller;

import com.lls.llsleader.entity.Result;
import com.lls.llsleader.entity.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;

@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("123456", requestUser.getPassword())) {
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        } else {
            return new Result(200);
        }
    }
}

测试项目

• 同时运行前端和后端项目，访问 localhost:8080/#/login，输入用户名 admin，密码 123456
• 登录成功之后，会跳转到我们编写的Appindex页面中，到这里就成功了！咱们下期再见！
• 有些地方都简写了，如果中途碰到一些问题，欢迎大家私信留言评论，共同学习，共同进步！（手动狗头）