java基础到工作过程

/div>

p>上述我们讲解的角色分工, 是在一个项目组中比较标准的角色分工, 但是在实际的项目中, 有一些项目组由于人员配置紧张, 可能并没有专门的架构师或测试人员, 这个时候可能需要有项目经理或者程序员兼任。

/p>

/h3>

/p>

p>在我们日常的软件开发中，会涉及到软件开发中的三套环境， 那么这三套环境分别是: 开发环境、测试环境、生产环境。 接下来，我们分别介绍一下这三套环境的作用和特点。

/p>

p>

1). 开发环境(development)

/p>

p>我们作为软件开发人员，在开发阶段使用的环境，就是开发环境，一般外部用户无法访问。

/p>

p>比如，我们在开发中使用的MySQL数据库和其他的一些常用软件，我们可以安装在本地， 也可以安装在一台专门的服务器中， 这些应用软件仅仅在软件开发过程中使用， 项目测试、上线时，我们不会使用这套环境了，这个环境就是开发环境。

/p>

p>

2). 测试环境(testing)

/p>

p>当软件开发工程师，将项目的功能模块开发完毕，并且单元测试通过后，就需要将项目部署到测试服务器上，让测试人员对项目进行测试。那这台测试服务器就是专门给测试人员使用的环境， 也就是测试环境，用于项目测试，一般外部用户无法访问。

/p>

p>

3). 生产环境(production)

/p>

p>当项目开发完毕，并且由测试人员测试通过之后，就可以上线项目，将项目部署到线上环境，并正式对外提供服务，这个线上环境也称之为生产环境。

/p>

blockquote style="margin-top: 5px; margin-bottom: 5px; padding-left: 1em; margin-left: 0px; border-left: 3px solid rgb(238, 238, 238); opacity: 0.6;">

拓展知识:

准生产环境: 对于有的公司来说，项目功能开发好, 并测试通过以后，并不是直接就上生产环境。为了保证我们开发的项目在上线之后能够完全满足要求，就需要把项目部署在真实的环境中, 测试一下是否完全符合要求啊，这时候就诞生了准生产环境，你可以把他当做生产环境的克隆体，准生产环境的服务器配置, 安装的应用软件(JDK、Tomcat、数据库、中间件 …) 的版本都一样，这种环境也称为 “仿真环境”。

ps.由于项目的性质和类型不同，有的项目可能不需要这个环境

/blockquote>

/h2>

p>在开发瑞吉外卖这个项目之前，我们需要全方位的来介绍一下当前我们学习的这个项目。接下来，我们将从以下的五个方面， 来介绍瑞吉外卖这个项目。

/p>

/h3>

/p>

p>本项目（瑞吉外卖）是专门为餐饮企业（餐厅、饭店）定制的一款软件产品，包括 系统管理后台 和 移动端应用 两部分。其中系统管理后台主要提供给餐饮企业内部员工使用，可以对餐厅的分类、菜品、套餐、订单、员工等进行管理维护。移动端应用主要提供给消费者使用，可以在线浏览菜品、添加购物车、下单等。

/p>

p>本项目共分为3期进行开发：

/p>

/colgroup>

tbody>

/tbody>

strong>产品原型

/strong>，就是一款产品成型之前，由产品经理绘制的一个简单的框架，就是将页面的排版布局展现出来，使产品的初步构思有一个可视化的展示。通过原型展示，可以更加直观的了解项目的需求和提供的功能。

p>

注意事项：

产品原型主要用于展示项目的功能，并不是最终的页面效果。

/p>

img src='https://s2.51cto.com/images/blog//_64dce49e.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='Java外包形式 java外包工作内容_后端_05' title="image-" style="width: 282px; visibility: visible;">

strong>1). 管理端

/strong>

colgroup>

col span="1" width="401.004">

col span="1" width="401.017">

/tr>

/tr>

java基础到工作过程

/tr>

/tr>

/tr>

/tr>

/tr>

td data-transient-attributes="table-cell-selection" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-row" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-row" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-row" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-row" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-row" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-column" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

td data-transient-attributes="table-cell-selection" class="table-last-column table-last-row" style="min-width: auto; overflow-wrap: break-word; margin: 4px 8px; border: 1px solid rgb(217, 217, 217); padding: 4px 8px; cursor: default; vertical-align: top;">

/td>

p>角色

/p>

p>权限操作

/p>

p>后台系统管理员

/p>

p>登录后台管理系统，拥有后台系统中的所有操作权限

/p>

p>后台系统普通员工

/p>

p>登录后台管理系统，对菜品、套餐、订单等进行管理 (不包含员工管理)

/p>

p>C端用户

/p>

p>登录移动端应用，可以浏览菜品、添加购物车、设置地址、在线下单等

/p>

strong>序号

/strong>

strong>表名

/strong>

strong>说明

/strong>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

br>

上述的表结构, 我们目前先简单的结合页面原型了解一下, 大概有那些表, 每张表结构中存储什么样的数据, 有一个印象。对于具体的表结构, 以及表结构中的字段, 在讲解具体的功能开发时, 我们再详细介绍。

3.2 Maven项目搭建

3.2.1 创建maven项目

1). 在idea中创建maven project, 项目名称 reggie_take_out

2). 检查项目编码

3). 检查maven配置

4). 检查JDK版本

JDK的版本选择1.8;

3.2.2 搭建基础环境

1).在pom.xml中导入依赖

2).在工程的resources目录下创建application.yml文件,并引入配置

3).创建包 com.itheima.reggie , 并编写启动类

@Slf4j :

是lombok中提供的注解, 用来通过slf4j记录日志。

当搭建完上述的基础环境之后, 就可以通过引导类, 启动该项目。

3.2.3 前端静态资源导入

我们作为服务端开发工程师， 我们课程学习的重心应该放在后端的业务代码上， 前端的页面我们只需要导入课程资料中的前端资源， 前端页面的代码我们只需要能看懂即可。

1). 导入静态资源

将上述两个目录中的静态资源文件, 导入到项目的resources目录下:

2). 创建配置类WebMvcConfig，设置静态资源映射

用于在Springboot项目中, 默认静态资源的存放目录为 : “classpath:/resources/”, “classpath:/static/”, “classpath:/public/” ; 而在我们的项目中静态资源存放在 backend, front 目录中, 那么这个时候要想访问到静态资源, 就需要设置静态资源映射。

3). 访问测试

4. 后台系统登录功能

4.1 需求分析

1). 页面原型展示

2). 登录页面成品展示

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

3). 查看登录请求

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

此时报404，是因为我们的后台系统还没有响应此请求的处理器，所以我们需要创建相关类来处理登录请求 ；

4). 数据模型(employee表)

5). 前端页面分析

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

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

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

4.2 代码开发

4.2.1 基础准备工作

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

1). 创建实体类Employee

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

所属包: com.itheima.reggie.entity

2). 定义Mapper接口

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

所属包: com.itheima.reggie.mapper

3).Service接口

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

所属包: com.itheima.reggie.service

4). Service实现类

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

5). Controller基础代码

所属包: com.itheima.reggie.controller

6). 导入通用结果类R

此类是一个通用结果类，服务端响应的所有结果最终都会包装成此种类型返回给前端页面。

所属包: com.itheima.reggie.common

A. 如果业务执行结果为成功, 构建R对象时, 只需要调用 success 方法; 如果需要返回数据传递 object 参数, 如果无需返回, 可以直接传递null。

B. 如果业务执行结果为失败, 构建R对象时, 只需要调用error 方法, 传递错误提示信息即可。

4.2.2 登录逻辑分析

处理逻辑如下：

①. 将页面提交的密码password进行md5加密处理, 得到加密后的字符串

②. 根据页面提交的用户名username查询数据库中员工数据信息

③. 如果没有查询到, 则返回登录失败结果

④. 密码比对，如果不一致, 则返回登录失败结果

⑤. 查看员工状态，如果为已禁用状态，则返回员工已禁用结果

⑥. 登录成功，将员工id存入Session, 并返回登录成功结果

4.2.3 代码实现

技术点说明:

A. 由于需求分析时, 我们看到前端发起的请求为post请求, 所以服务端需要使用注解 @PostMapping

B. 由于前端传递的请求参数为json格式的数据, 这里使用Employee对象接收, 但是将json格式数据封装到实体类中, 在形参前需要加注解@RequestBody

4.3 功能测试

代码实现完毕后, 启动项目, 访问url: http://localhost:8080/backend/page/login/login.html , 进行登录测试。

在测试过程中， 可以通过debug断点调试的方式来跟踪程序的执行过程，并且可以查看程序运行时各个对象的具体赋值情况。而且需要注意, 在测试过程中，需要将所有的情况都覆盖到。

1). 问题说明

当我们在进行debug端点调试时, 前端可能会出现如下问题: 前端页面的控制台报出错误-超时;

2). 解决方案

前端进行异步请求时, 默认超时10000ms , 可以将该值调大一些。

由于修改了JS文件，需要手动清理一下浏览器缓存，避免缓存影响，JS不能及时生效。

5. 后台系统退出功能

5.1 需求分析

在后台管理系统中，管理员或者员工，登录进入系统之后，页面跳转到后台系统首页面(backend/index.html)，此时会在系统的右上角显示当前登录用户的姓名。

如果员工需要退出系统，直接点击右侧的退出按钮即可退出系统，退出系统后页面应跳转回登录页面。

1). 退出页面展示

2).前端页面分析

A. 发起post请求, 调用服务端接口 /employee/logout 执行退出操作 ;

B. 删除客户端 localStorage 中存储的用户登录信息, 跳转至登录页面 ;

5.2 代码实现

需要在Controller中创建对应的处理方法, 接收页面发送的POST请求 /employee/logout ，具体的处理逻辑：

A. 清理Session中的用户id

B. 返回结果

5.3 功能测试

1). 代码实现完毕后, 重启服务, 访问登录界面 http://localhost:8080/backend/page/login/login.html ;

om:90%;" />

点击 [外链图片转存中…(img-dxaTllac-50)] 将会调用一个js方法logout, 在logout的方法中执行如下逻辑:

[外链图片转存中…(img-7p1RL7sI-51)]

A. 发起post请求, 调用服务端接口 /employee/logout 执行退出操作 ;

B. 删除客户端 localStorage 中存储的用户登录信息, 跳转至登录页面 ;

5.2 代码实现

需要在Controller中创建对应的处理方法, 接收页面发送的POST请求 /employee/logout ，具体的处理逻辑：

A. 清理Session中的用户id

B. 返回结果

5.3 功能测试

1). 代码实现完毕后, 重启服务, 访问登录界面 http://localhost:8080/backend/page/login/login.html ;

2). 登录完成之后, 进入到系统首页 backend/index.html, 点击右上角 [外链图片转存中…(img-CIxT0is3-1650770029652)] 按钮 执行退出操作, 完成后看看是否可以跳转到登录页面 , 并检查localStorage。

[外链图片转存中…(img-wKnkbraj-54)]

[外链图片转存中…(img-BQyEPMGe-56)]