前面两篇博客对Simple OKR项目的背景和开发环境的搭建进行了简单介绍。从这篇文章开始进入项目开发过程中遇到的一些问题和知识点的记录。在项目开发过程中会以功能点的形式进行介绍和记录，对于相对比较简单的功能点会在一篇博文当中进行记录，对于某些比较复杂的功能可能会分成几篇博文进行介绍。

这篇博文当中我们将建立一个简单的登录、注册页面，并实现简单的后端逻辑。

博主在开发过程当中喜欢先设置一个目标，然后在开发过程当中参照既定的目标开展相应的工作，否则蒙头写代码写到最后都不知道自己到底要干什么。

• 实现登录、注册页面
• 能够向后端发起Http请求
• 后端能够实现登录、等出功能
• 后端实现用户登录信息的储存

这次需要实现的功能相对比较简单，我们也来简单梳理一下完成上述工作过程中本文会简单介绍的知识点。

• HTTP请求
• 什么跨域
• 数据持久化
• Spring控制器和RESTful API的编写

废话不多说，直接开始代码实验，在一些操作过程当中给再穿插一些简单的理论知识介绍。

首先确保根据之前的教程Simple OKR项目简记 （二）：环境搭建完成基本开发环境的配置。本次实验需要用到文中所述的前后端开发环境。

首先我们打开之前创建的Vue 3的app工程目录安装element-plus这个包提供element-ui相关的组件

> yarn add element-plus

在views文件夹下面添加一个新的vue源代码文件Login.vue作为登录页面。

            
            
            
                
                
                    
                        
                    
                    
                        
                    
                    
                        Still haven't an account yet? Register one -->
                    
                    
                        Agree to simple app end user license
                    
                    Login
                
            
        

然后为了能够让这个页面能够被访问到，我们需要修改一下项目中的路由配置

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";

const routes: Array = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import( "../views/about.vue"),
  },
  {
    path: "/login",
    name: "Login",
    component: () => 
      import("../views/Login.vue")
  }
];

const router = createRouter({
  history: createWebHistory(process.env.base_URL),
  routes,
});

export default router;

这里可以看到Home是在代码的头部直接显式引入的，而about和login组件则是在router的规则当中引用的，这样引入的界面会在用户访问对应的url时才会被加载。

如果项目配置和代码均是正确的话，程序运行起来后的效果如下：

到这里前端的工作先告一段落，先把工作的重心转向后端RESTful API的开发。

如果读者跟着前一篇博文一起配置好了Spring Boot的项目应该已经得到了一个最基本的Spring的项目结构包含pom配置文件和SpringApplication的java源代码文件。现在我们就在这个项目的基础上添砖加瓦构建一个比较通用的Spring Boot后端项目包结构。

  okr
    ├─config    // 存放配置
    ├─controller    // api控制器
    ├─dao    // 数据持久层
    ├─dto    // 数据传输对象
    ├─entity    // 数据模型
    ├─service    // 功能服务
    │  └─impl    // 服务的实现
    ├─task    // 后台任务
    └─utils    // 工具

我们先在项目当中添加一个用户控制器UserController.java

package simple.okr.controller;



import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import simple.okr.dto.UserLoginDTO;

@Controller
@RequestMapping("/user")
public class UserController {
    
    
    @GetMapping("/greet/{username}")
    public ResponseEntity Greet(@PathVariable String username)
    {
        return ResponseEntity.ok("Welcome " + username);
    }

    @PostMapping("login")
    public ResponseEntity