【瑞吉外卖】day02:后台系统登录、退出功能(一)

简介: 后台系统登录、退出功能

4. 后台系统登录功能


4.1 需求分析


1). 页面原型展示

image.png

2). 登录页面成品展示

登录页面存放目录 /resources/backend/page/login/login.html

image.png

3). 查看登录请求

通过浏览器调试工具(F12),可以发现,点击登录按钮时,页面会发送请求(请求地址为http://localhost:8080/employee/login)并提交参数 username和password, 请求参数为json格式数据 {"username":"admin","password":"123456"}。

image.png

4). 数据模型(employee表)

image.png

5). 前端页面分析

image.png

当点击 "登录" 按钮, 会触发Vue中定义的 handleLogin 方法:


image.png

在上述的前端代码中, 大家可以看到, 发送登录的异步请求之后, 获取到响应结果, 在响应结果中至少包含三个属性: code、data、msg 。

由前端代码,我们也可以看到,在用户登录成功之后,服务端会返回用户信息,而前端是将这些用户信息,存储在客户端的 localStorage 中了。

localStorage.setItem('userInfo',JSON.stringify(res.data))

4.2 代码开发


4.2.1 基础准备工作

在进行登录功能的代码实现之前, 首先在我们的工程下创建包结构:

image.png

1). 创建实体类Employee

该实体类主要用于和员工表 employee 进行映射。 该实体类, 也可以直接从资料( 资料/实体类 )中拷贝工程中。

所属包: com.itheima.reggie.entity

image.png

2). 定义Mapper接口

在MybatisPlus中, 自定义的Mapper接口, 需要继承自 BaseMapper。

所属包: com.itheima.reggie.mapper

@Mapper

public interface EmployeeMapper extends BaseMapper<Employee>{

}

3).Service接口

本项目的Service接口, 在定义时需要继承自MybatisPlus提供的Service层接口 IService, 这样就可以直接调用 父接口的方法直接执行业务操作, 简化业务层代码实现。

所属包: com.itheima.reggie.service

public interface EmployeeService extends IService<Employee> {

}

4). Service实现类

所属包: com.itheima.reggie.service.impl

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;

import com.itheima.reggie.entity.Employee;

import com.itheima.reggie.mapper.EmployeeMapper;

import com.itheima.reggie.service.EmployeeService;

import org.springframework.stereotype.Service;

@Service

public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper,Employee> implements EmployeeService{

}

5). Controller基础代码

所属包: com.itheima.reggie.controller

import lombok.extern.slf4j.Slf4j;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

@Slf4j

@RestController

@RequestMapping("/employee")

public class EmployeeController {

   @Autowired

   private EmployeeService employeeService;

 

}    

相关文章
|
1天前
|
小程序 测试技术 API
外卖小程序实战-接单后小票机自动打印订单
外卖小程序实战-接单后小票机自动打印订单
9 0
|
12月前
|
小程序 JavaScript 开发者
小程序短信验证码登录,1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
小程序短信验证码登录,1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
527 0
|
12月前
|
移动开发 Android开发
实战:第七章:微信H5支付时用户有微信分身停留5秒后未选择哪个微信分身,也未支付就被动回调到商户支付是否完成的页面...
实战:第七章:微信H5支付时用户有微信分身停留5秒后未选择哪个微信分身,也未支付就被动回调到商户支付是否完成的页面...
114 0
|
存储 JSON 前端开发
基于Springboot外卖系统04:后台系统用户登录+登出功能
如果前端与后台接口之间不存在跨域问题,那么推荐使用cookie和session来记录登录状态。如果前端与服务器接口之间存在跨域问题,那么就要使用token的方式来维持登录状态。
189 0
|
SQL 前端开发 Java
校园外卖点餐系统——Day01【项目简介、开发环境搭建、后台系统登录和退出功能】
校园外卖点餐系统——Day01【项目简介、开发环境搭建、后台系统登录和退出功能】
169 0
校园外卖点餐系统——Day01【项目简介、开发环境搭建、后台系统登录和退出功能】
|
小程序 数据安全/隐私保护 开发者
支付宝小程序模板开发,协助商家一键创建小程序
支付宝也有通过接口创建小程序的服务。抽空更新了通过接口创建小程序的功能,集成到自己的系统,可以更方便协助商家创建小程序。
301 1
支付宝小程序模板开发,协助商家一键创建小程序
|
JSON 前端开发 Java
第二篇:吉瑞外卖项目__后台登录功能开发_后台退出功能开发
第二篇:吉瑞外卖项目__后台登录功能开发_后台退出功能开发
372 0
第二篇:吉瑞外卖项目__后台登录功能开发_后台退出功能开发
|
存储 JSON 前端开发
|
JSON 前端开发 测试技术
|
前端开发 测试技术 数据库