前后端分离项目后端基本流程

这里放一个项目，简单，适合对业务流程有一定了解的，写的很细了，看到不懂的地方看下链接项目，因为我也在用这项目练习，白卷项目。

最开始要在pom.xml文件里面添加依赖，方便写代码，每个人的pom文件需要的东西都不一样，这里就不放我的了

创建状态码文件，可以让你知道你写的接口返回给的数据成功了没有。

package com.evan.wj2.result;

import lombok.Data;

@Data
public class Result {
    //响应码
    private int code;

    public Result(int code) {
        //this.code表示类的变量，code是方法的参数，this.code=code就是把传入的值赋值给类的变量，实例化的时候就有值了。
        this.code = code;
    }
}

创建实体类，这是对应你数据库里面数据表的字段，就是说数据表里面有哪些字段，这里面也要写，这里存放的是用户信息

package com.evan.wj2.model;

import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.Id;

//使用data注解可以省略写set，get方法
@Data
//表示这是一个实体类
@Entity
//表示对应的数据表名是user
@TableName("user")
@JsonIgnoreProperties({"handler", "hibernateLazyInitializer"})
public class User {
    //声明id是user表里的主键
    @Id
    //swagger里面的注解，方便以后用swagger查看接口信息
    @ApiModelProperty(value = "用户id")
    private int id;
    @ApiModelProperty(value = "用户名")
    private String username;
    @ApiModelProperty(value = "密码")
    private String password;
}

创建DTO（数据传输对象），这里写的是登录接口，需要传输用户名和密码，DTO和实体类是有关系的，登陆时把数据传给前端的时候不可能把所有的数据传给前端，所以需要写一个DTO来存放需要传输的数据，这里注意实体类对应数据库表，DTO对应传输数据，不能搞混并混合使用，容易混淆。

package com.evan.wj2.dto;

import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

@Data
public class LoginDTO {
    @ApiModelProperty(value = "用户名")
    private String username;
    @ApiModelProperty(value = "密码")
    private String password;
}

配置数据库连接application文件

# 端口配置
server.port=8443

# 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/wj2?characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username=你的数据库用户名
spring.datasource.password=你的数据库密码
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

创建controller文件，我有一定基础，所以创建文件的顺序和别人应该不一样

package com.evan.wj2.controller;

import com.evan.wj2.dto.LoginDTO;
import com.evan.wj2.model.User;
import com.evan.wj2.result.Result;
import com.evan.wj2.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
//@RestController 是@controller和@ResponseBody 的结合
@RestController
public class LoginController {
    //自动注入
    @Autowired
    UserService userService;
    //这个注解是用来跨域的注解
    @CrossOrigin
    //前端的请求路径和HTTP请求方式
    @RequestMapping(value = "/api/login", method = RequestMethod.POST)
    //从前端requestbody请求体里接收前端用户输入的用户名和密码，存入LoginDTO里面
    public Result login(@RequestBody LoginDTO loginDTO) {
        //声明一个user对象，是User类型的，接收userService传过来的login数据
        User user = userService.login(loginDTO);
        //如果user不为空说明从数据库里拿到了数据
        if (user!=null){
            //返回200状态码，代表成功
            return new Result(200);
            //或者
        }else {
            //如果user为空，说明没有拿到数据，返回400的状态码，代表失败
            return new Result(400);
        }
    }
}

创建service文件，这里是interface接口不是class类

package com.evan.wj2.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.evan.wj2.dto.LoginDTO;
import com.evan.wj2.model.User;
//使用了mybatis-plus，所以这里要继承IService
public interface UserService extends IService<User> {

    User login(LoginDTO loginDTO);
}

在service文件夹里创建impl文件夹，再创建业务逻辑实现文件UserServiceImpl

package com.evan.wj2.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.evan.wj2.dto.LoginDTO;
import com.evan.wj2.mapper.UserMapper;
import com.evan.wj2.model.User;
import com.evan.wj2.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
//这个注解表示他是service层，不懂的去看看java三层架构
@Service
//这里也使用了mybatis-plus也继承ServiceImpl，然后实现UserService
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Autowired
    UserMapper userMapper;

    @Override
    //把前端传入的数据放入参数里
    public User login(LoginDTO loginDTO) {
        //这里使用了mybatis-plus，是对数据库发出指令，并不是直接修改数据库内容，这里进行查询操作
        QueryWrapper<User> loginWrapper = new QueryWrapper<>();
        //上面声明了loginWrapper对象，这里的意思是User表里得到的用户名要和传入的loginDTO数据得到的用户名相等
        loginWrapper.lambda().eq(User::getUsername, loginDTO.getUsername())
                //同上，把用户名改成密码
                .eq(User::getPassword, loginDTO.getPassword());
        //返回根据传入的数据查询出的结果，selectOne是BaseMapper里面的知识，也是mybatis-plus
        return userMapper.selectOne(loginWrapper);
    }
}

创建mapper文件，实际对数据库的一系列操作都是在mapper层操作，简单的单表查询和修改可以使用mybatis-plus来少写SQL语句，但面对多表操作就需要自己写SQL语句了，一般是在mapper曾里面写一个方法添加@Select，或者@Insert注解来写sql语句，不用在xml里面写复杂的配置

package com.evan.wj2.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.evan.wj2.model.User;
import org.apache.ibatis.annotations.Mapper;
//声明这是mapper
@Mapper
//这里也使用了mybatis-plus需要继承BaseMapper
public interface UserMapper extends BaseMapper<User> {
}

在这个项目里还需要跨域，直接复制后端源代码里config文件夹里面的MyWebConfigurer就行了

到这里一个登录就写完了，因为我也是新手，业务逻辑实现有可能写的不对但没发现，但大体上应该没问题

登录之后前端vue接收到200状态码，没有跳转页面，我前端不好，他那个前端源代码我改不来，有大佬看到的话可以改下前端的路由拦截器，链接放评论区，这里放我改的

原来的前端源代码在components文件夹下面的Login.vue里面，这是源代码

 methods: {
      login () {
        var _this = this
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(resp => {
            if (resp.data.code === 200) {
              var data = resp.data.result
              _this.$store.commit('login', data)
              var path = _this.$route.query.redirect
              _this.$router.replace({path: path === '/' || path === undefined ? '/admin/dashboard' : path})
            } else {
              this.$alert(resp.data.message, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {})
      }
      }
    }

我改的

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 => {
          })
      }
    }
  }

之后接收到200状态码就可以跳转页面了

如果你改完之后打开页面发现页面一片空白，打开（我用的谷歌，其他浏览器我不知道一不一样）浏览器控制台报"undefined" is not valid JSON错误，就点击控制台的应用，找到本地存储空间，把下面的东西鼠标右键清除，再打开就行了

这就是写一个接口的流程，登录这里没写完，因为我技术不达标写不到很完美的地步，而且一般加入公司后都是中途加入项目，登录接口这些最重要的东西别人肯定都写好了的，新手只需要关注怎么把数据库里的数据传到前端就好了，token和session这些东西可以以后等你技术更好了再去了解，反正我现在了解的挺痛苦的。