Vue + Spring Boot 项目实战（三）：先后端结合测试（登陆页面开发）

时间 2020-01-13 标签 vue spring boot 项目实战三先后端结合测试登陆页面开发

前面咱们已经完成了前端项目 DEMO 的构建，这一篇文章主要目的以下：javascript

1、打通先后端之间的联系，为接下来的开发打下基础
2、登陆页面的开发（无数据库状况下）
css

本篇目录

3.前端相关配置

4.后端开发

5.测试项目

前言：关于开发环境

每位 Coder 都有本身偏好的开发工具，从大的方面划分主要有文本编辑器流和 IDE 流两种，我有一段时间也喜欢用编辑器（Sublime Text、Vim），但对我来讲开发效率确实不如使用 IDE 高，因此就放弃了。不过须要修改某一代码片断时，使用编辑器仍是比较便捷的。html

虽然说你们能够按照本身的状况任意选择工具，但作教程只能顾及其中一种，因此很差意思了读者大人们。前端

我比较习惯用 IntelliJ IDEA，在 Java 后端方面地位没得说，然而我前端也是用它作的。。。说实话没感到有什么不稳当的地方，界面什么的都和 WebStorm 差很少，只要不是只用 Eclipse 的同窗，应该不会以为别扭。vue

（用 Eclipse 的同窗，是时候尝试改变了 /手动狗头）java

第一篇文章也放上了 GitHub 的地址，有些小伙伴可能没看到，这里再放一遍：ios

https://github.com/Antabot/White-Jottergit

追到第三篇的同窗都是动手能力比较强的了，今天我测试了一下，按照项目的 README 运行基本没有问题，有兴趣的小伙伴能够搞一下，若是发现新的问题请在评论区指出，感谢。github

1、后端项目建立

这个就很简单了。在 IDEA 中新建项目，选择 Spring Initializr，点击 Next

输入项目元数据，Next

选择 Web -> Web，Next

最后是项目名称和项目地址，Finish 后等待项目自动初始化便可。

运行 Application.java

访问 http://localhost:8080，发现弹出了错误页面，OK，这就对了，由于咱们啥页面都没作啊。
web

2、登陆页面开发

1.关于先后端结合

注意咱们的项目是先后端分离的，这里的结合意思不是就不分离了，是如何把这俩分离的项目串起来用。

前面提到过先后端分离的意思是先后端之间经过 RESTful API 传递 JSON 数据进行交流。不一样于 JSP 之类，后端是不涉及页面自己的内容的。

在开发的时候，前端用前端的服务器（Ngix），后端用后端的服务器（Tomcat），当我开发前端内容的时候，能够把前端的请求经过前端服务器转发给后端（称为反向代理），这样就能实时观察结果，而且不须要知道后端怎么实现，而只须要知道接口提供的功能，两边的开发人员（两个我）就能够各司其职啦。

艾玛作一个完整的教程真不容易，遇到的每一个知识点感受都能讲一堆。上次的文章被一位老哥反问是否是太着急了，也不知道是什么意思，我本身反思多是讲的不够细吧，这里我就再啰嗦一下讲两句 正向代理 和 反向代理。

正向代理就是，你要访问一个网站，好比“谷弟弟”，而后发现访问不到，因而你访问了一个能访问到“谷弟弟”的代理服务器，让它帮你拿到你想浏览的页面。

反向代理就是，你访问了一个网站，你觉得它是“谷弟弟”，但其实它是“谷姐”，“谷姐”知道你实际上是想找她弟，就取回“谷弟弟”的内容给你看。做为用户的你，是不知道有这个过程的，这么作是为了保护服务器，不暴露服务器的真实地址。

知乎上有张神图能够描述这两种过程

2.前端页面开发

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(successResponse => { if (successResponse.data.code === 200) { this.$router.replace({path: '/index'}) } }) .catch(failResponse => { }) } } } </script>

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

AppIndex.vue

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

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

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

<style scoped> </style>

3.前端相关配置

设置反向代理

修改 src\main.js 代码以下：

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，以安装这个模块。

配置页面路由

修改 src\router\index.js 代码以下

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
    }
  ]
})

跨域支持

为了让后端可以访问到前端的资源，须要配置跨域支持。

在 config\index.js 中，找到 proxyTable 位置，修改成如下内容

proxyTable: {
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

注意若是不是在最后的位置，大括号外须要添加一个逗号。

运行项目

执行 npm run dev，或双击 dev（start 也同样）脚本，查看登陆页面效果。

注意地址是 localhost:8080/#/login ，中间有这个 # 是由于 Vue 的路由使用了 Hash 模式，是单页面应用的经典用法，但连尤雨溪本人都以为不太好看，因此能够在路由配置中选择使用 History 模式，但会引起一些问题，须要在后端做出处理，因此这里先不更改，以后我单独写一篇关于这个的文章。

教程的内容简化了一下，我作的是这个样子的。。。

呃，总之这个页面的功能都是同样的。

4.后端开发

User 类

在 Login.vue 中，前端发送数据的代码段为

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

后端如何接收这个 JS 对象呢？咱们很天然地想到在须要建立一个形式上一致的 Java 类。

打开咱们的后端项目 wj，首先在 src\main\java\com\evan\wj 文件夹（就是你本身的 web 项目的包）下，新建一个 pojo 包（package），而后新建 User类，代码以下

package com.evan.wj.pojo;

public class User {
    int id;
    String username;
    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;
    }
}

Result 类

Result 类是为了构造 response，主要是响应码。新建 result 包，建立 Result 类，代码以下

package com.evan.wj.result;

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

}

实际上因为响应码是固定的，code 属性应该是一个枚举值，这里做了一些简化。

LoginController

Controller 是对响应进行处理的部分。这里咱们设定帐号是 admin，密码是 123456，分别与接收到的 User 类的 username 和 password 进行比较，根据结果返回不一样的 Result，即不一样的响应码。前端若是接收到成功的响应码（200），则跳转到 /index 页面。

在 wj 下新建 controller 包，新建 LoginController 类，代码以下

package com.evan.wj.controller;

import com.evan.wj.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;

import com.evan.wj.pojo.User;

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

最后，在 src\main\resources 文件夹下找到 application.properties 文件配置端口，即加上 server.port=8443（初始应该是空白的，后期还要配置数据库等）

5.测试项目

同时运行前端和后端项目，访问 localhost:8080/#/login，输入用户名 admin，密码 123456

点击肯定，成功进入 localhost:8080/#/index

经过这篇文章，但愿你们能够直观地感觉到先后端分离项目中先后端的过程，以后的功能开发基本思路就是在后端开发 Controller，在前端开发不一样的组件，这个顺序能够随意。实际的项目应该是先后端人员根据功能需求约定好接口，而后齐头并进，以提升开发效率。

接下来一段时间须要写的内容大概有如下这些：

数据库的引入
后端拦截器的配置
部署项目时会遇到的一些坑
使用 Element 辅助前端开发
公共组件的开发

顺序我再想想，教程作的比较慢，你们能够在 GitHub 上看项目的进度。

查看系列文章目录：
https://learner.blog.csdn.net/article/details/88925013

上一篇：Vue + Spring Boot 项目实战（二）：搭建 Vue.js 项目

下一篇：Vue + Spring Boot 项目实战（四）：数据库的引入