前后端分离式开发01

Posted 2022-11-06 cgblpx皮皮霞

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后端分离式开发01相关的知识，希望对你有一定的参考价值。

文章目录

1 前后端练习 - 模拟用户登录

1.1 需求

模拟用户登录过程,利用前后端分离的开发方式,完成项目练习

1.2 数据库表设计

jack 123 | rose 456 | tony 1234 | test 123456

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(80) DEFAULT NULL,
  `password` varchar(80) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `email` varchar(40) DEFAULT NULL,
  `status` tinyint(1) DEFAULT NULL,
  `created` datetime DEFAULT NULL,
  `updated` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

insert  into `user`(`id`,`username`,`password`,`phone`,`email`,`status`,`created`,`updated`) values 
(1,'jack','202cb962ac59075b964b07152d234b70','13111112222','1235678@qq.com',1,'2021-02-18 19:17:23','2021-03-26 14:47:20'),
(2,'rose','250cf8b51c773f3f8dc8b4be867a9a02','13111112223','1235678@qq.com',1,'2021-02-18 19:17:23','2021-05-21 17:34:32'),
(4,'tony','81dc9bdb52d04dc20036dbd8313ed055','13111112222','11@qq.com',1,'2021-03-22 21:25:06','2021-03-22 21:25:06'),
(5,'test','e10adc3949ba59abbe56e057f20f883e','17688888888','527161772@qq.com',1,'2021-05-10 19:01:45','2021-05-10 19:01:45');

1.3 后端项目结构

1.4 后端开发

1.4.1 修改pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>cn.tedu</groupId>
    <artifactId>ssm</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ssm</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>$spring-boot.version</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>cn.tedu.SsmApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

1.4.2 创建VO - SysResult类

VO：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来，SysResult统一前后端数据交互的格式

package cn.tedu.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.io.Serializable;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult implements Serializable 
    private Integer status;//状态码  200成功 201失败
    private String msg;//描述信息
    private Object data;//返回给页面的数据

    //封装几个方便调用的方法
    public static SysResult failed()
        return new SysResult(201,"调用失败!!",null);
    
    public static SysResult success()
        return new SysResult(200,"调用成功!!",null);
    
    public static SysResult success(Object data)
        return new SysResult(200,"调用成功!!",data);

1.4.3 创建启动类

package cn.tedu;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("cn.tedu.dao")//扫描dao层的接口文件所在包
public class SsmApplication 

    public static void main(String[] args) 
        SpringApplication.run(SsmApplication.class, args);

1.4.4 创建核心配置文件application.yml

server:
  port: 8091
#SpringBoot配置mysql信息
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql:///cgbtest?useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: root
#SpringBoot整合Mybatis配置
mybatis:
  #别名包
  type-aliases-package: cn.tedu.pojo
  #指定UserMapper.xml文件的位置
  mapper-locations: classpath:mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

1.4.5 创建pojo

pojo是简单的Java对象，其中有一些属性及其getter setter方法的类，没有业务逻辑，有时可以作为VO
BasePojo

package cn.tedu.pojo;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;
import java.util.Date;

//pojo基类，完成2个任务，2个日期，实现序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable 
    @TableField(fill = FieldFill.INSERT)
    private Date created;	//表示入库时需要赋值
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date updated;	//表示入库/更新时赋值.

User

package cn.tedu.pojo;

import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;
@Data
@Accessors(chain = true)
public class User extends BasePojo implements Serializable 
    private Integer id;
    private String username;
    private String password;
    private String phone;
    private String email;
    private Integer status;//1是启用0是停用

1.4.6 创建Controller层

Token：Token （令牌）是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的身份。如果这个 Token 在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。
使用token来标识当前用户，后端就能根据这个字段知道是哪个用户发起的请求了

package cn.tedu.controller;

import cn.tedu.dao.UserMapper;
import cn.tedu.pojo.User;
import cn.tedu.service.UserService;
import cn.tedu.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("user")
@CrossOrigin
public class UserController 
    @Autowired
    private UserService userService;

    @GetMapping("findAll")
    public List<User> findAll() 
        return userService.findAll();
    

    //登录,拿着账号.密码查库,查到了就返回token,没查到就返回null
    @PostMapping("login")
    public SysResult login(@RequestBody User user)
        String token = userService.login(user);
        if(null==token)
            return SysResult.failed();//登录失败
        return SysResult.success(token);//登录成功,返回token

1.4.7 创建Service层

MD5讯息摘要演算法（英语：MD5 Message-Digest Algorithm）, 一种被广泛使用的密码杂凑函数，可以产生出一个128位元（16位元组）的散列值（hash value）, 用于确保信息传输完整一致，（数字指纹）,MD5是不可逆的

接口文件

package cn.tedu.service;

import cn.tedu.pojo.User;

import java.util.List;

public interface UserService 
    List<User> findAll();
    String login(User user);

实现类

package cn.tedu.service;

import cn.tedu.dao.UserMapper;
import cn.tedu.pojo.User;
import cn.tedu.vo.SysResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;

import java.util.List;
import java.util.UUID;

@Service
public class UserServiceImpl implements UserService
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() 
        return userMapper.findAll();
    

    //登录,拿着账号.密码查库,查到了就返回token,没查到就返回null
    //密码还要加密处理,要拿着用户的明文密码 加密后 和 库里加密密码 对比->加密算法:md5/sha/md5hash..
    @Override
    public String login(User user) 
        //把明文密码获取出来,进行加密
        String pwd = user.getPassword();
        System.out.println(user+"=================="+pwd);
        //把明文密码加密,利用MD5算法
        /*
            MD5讯息摘要演算法（英语：MD5 Message-Digest Algorithm），
            一种被广泛使用的密码杂凑函数，可以产生出一个128位元（16位元组）的散列值（hash value）࿰以上是关于前后端分离式开发01的主要内容，如果未能解决你的问题，请参考以下文章 
 React项目配置6(前后端分离如何控制用户权限)
 详解篇一：浅析前后端分离的效率优势
 个人博客系统（前后端分离）
 百度工程师教你快速提升研发效率小技巧
 WEB开发中前后端分离的好处与区别
 前后端混合开发模式和前后端分离开发模式