CGB2104-Day10

1. 项目前后端搭建

1.1 后端系统搭建

1.1.1 创建后端项目

1.1.2 创建步骤

1. POM.XML文件 1.parent标签 2.依赖项 3.插件
2. 主启动类
3. POJO 路径jt-common\src\main\java\com\jt\pojo的POJO 全部复制 com.jt.pojo
4. VO jt-common\src\main\java\com\jt\vo 全部复制 com.jt.vo
5. Mapper 只写UserMapper的层级
6. Service
7. Controller
8. Mapper接口的代理
9. 粘贴赋值配置文件!!!

1.1.3 编辑Pom.xml文件

1. <?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 http://maven.apache.org/xsd/maven-4.0.0.xsd“>
<modelVersion>4.0.0</modelVersion>

<groupId>com.jt</groupId>
<artifactId>jt</artifactId>
<version>1.0-SNAPSHOT</version>

<!—1.parent标签—>
<!—集中定义版本号—>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.1</version>
<relativePath/> <!— lookup parent from repository —>
</parent>


<!—2.添加依赖项—>
<!—依赖: 项目中需要添加什么功能,则依赖什么jar包.-->
<dependencies>
<!—引入SpringMVC功能—>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!—SpringBoot的测试功能—>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>

<!—SpringBoot核心机制: “开箱即用”
只需导入特定的jar包文件 则可以直接使用其中的功能
根本原因: SpringBoot是对框架的简化,内部进行了扩展,无需程序员操作.
—>
<!—支持热部署 —>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>

<!—引入插件lombok 自动的set/get/构造方法插件 —>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>

<!—引入数据库驱动 —>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>

<!—springBoot数据库连接 —>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>

<!—spring整合mybatis-plus MP中包含了mybatis的包所以将原来的包删除 —>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>

</dependencies>


<!—3.添加build标签—>
<!—该插件是SpringBoot项目打包时必须添加的.
如果没有该插件 则导致jar包不能运行
—>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.5.1</version>
</plugin>
</plugins>
</build>

</project>

1.1.4 编辑主启动类

1.1.4 准备pojo文件

说明: 从jt-common中的课前资料 粘贴复制POJO文件

复制后的效果

1.1.5 准备VO文件

1).复制VO的路径

2). 复制后的效果

1.1.6 整体结构如图

2 前端项目搭建

2.1 启动前端脚手架

2.2 运行前端项目

前端项目效果展现

2.3 检查前端路径

1). 检查前端路径

2). Hbuilder 展现
根据上述目录结构,利用Hbuilder打开文件

3 前端脚手架结构说明

3.1 关于.vue文件说明

之前编辑页面时采用.html文件进行操作, 但是在Vue脚手架项目 所有的页面都是.vue结尾.
.vue数据结构 分为三部分: 1.页面主体内容 template(html页面内容.) 2.JS操作部分. 3.页面样式的渲染.

3.2 脚手架文件结构

3.3 main.js说明

说明: main.js 是控制整个脚手架的运行的初始的JS. 在其中一般设定公共的依赖信息(设定全局变量)

1. 引入样式/JS/CSS
   
2. 组件之间参数传递问题 父子组件通过属性prototype实现参数传递.
   
3. 组件之间插件传递
   
4. 实例化VUE对象 该对象指定渲染的页面,与页面中的区域.
   

3.4 App.vue 页面说明

说明: App.vue类似于index.html. 通过router-view 实现组件的动态的展现. 该路由占位符中显示的组件内容,通过路由进行控制.

3.5 脚手架中的路由

3.6 脚手架加载流程图

4. 关于ElementUI工具说明

4.1 后端项目导入组件说明

说明: 后端中使用ElementUI工具,需要引入和声明2部分操作.

1. import Vue from ‘vue’
import {
Button,
Form,
FormItem,
Input,
Message,
Container,
Header,
Main,
Menu,
Aside,
Submenu,
MenuItemGroup,
MenuItem,
Breadcrumb,
BreadcrumbItem,
Card,
Row,
Col,
Table,
TableColumn,
Switch,
Tooltip,
Pagination,
Dialog,
MessageBox,
Tag,
Tree,
Select,
Option,
Cascader,
Alert,
Tabs,
TabPane,
Steps,
Step,
CheckboxGroup,
Checkbox,
Upload

} from ‘element-ui’

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Select)
Vue.use(Option)
Vue.use(Cascader)
Vue.use(Alert)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Steps)
Vue.use(Step)
Vue.use(CheckboxGroup)
Vue.use(Checkbox)
Vue.use(Upload)

//将弹框组件挂载到Vue对象中 用户可以使用this关键字调用
Vue.prototype.$message = Message
//通过MessageBox函数定义 消息提示框
Vue.prototype.$confirm = MessageBox.confirm
    

4.2 ElementUI入门案例

4.2.1 定义elementUI组件

4.2.2 定义elementUI路由

需求: 通过http://localhost:8080/#/elementUI访问ElementUI.vue组件
实现: 编辑index.js 实现路由跳转

4.2.3 elementUI 入门案例讲解

1).找到页面组件Demo

2). 项目中引入组件

3). 引入组件
说明 在element.js中引入组件

4). 声明组件

5). 效果展现

4.3 用户登录页面实现

4.3.1 阿里图标库

说明: 如果elementUI中没有需要的图标,则可以通过阿里矢量图获取.

4.3.2 ElementUI中的form表单

5 SpringMVC流程

5.1 Servlet机制

Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成动态Web内容。
总结: Servlet是JAVA实现前后端数据交互的一种机制

5.2 核心对象

1. Request对象
2. Response对象
   

5.3 SpringMVC调用流程图

5.3.1 重要的组件

1. 前端控制器 DispatcherServlet 实现请求的流转
2. 处理器映射器 实现了请求路径与方法之间的映射.
3. 处理器适配器 处理器的管理器 内部有N个处理器. 针对不同的用户请求 调用不同的处理器完成任务
4. 视图解析器 直线页面路径的拼接

5.3.2 SpringMVC程序启动前状态说明

父子容器概念:
1.Spring容器(内存中的一大块空间)由于IOC/DI的机制,可以作为第三方的管理者 所以作为父级.
2.SpringMVC容器,其中只负责Controller层的相关的对象的管理.

说明: 当SpringMVC容器启动时,提前将SpringMVC中的所有请求路径方法方法完成映射.

5.3.3 SpringMVC运行流程

1. 用户发起请求时,第一步经过前端控制器,

2. 但是前端控制器 只负责请求的转发和响应.不做任何业务处理.将请求转发给处理器映射器.

3. 处理器映射器接收到前端控制器的请求之后,查询自己维护的服务列表信息.
   如果服务列表中没有这个URL的key. 该程序不能处理用户的请求,则返回特定数据,前端控制器接收之后响应用户404.
   如果服务列表中有该URL key 则说明请求可以正常执行. 将该方法的对象返回给前端控制器.

4. 前端控制器将返回的方法进行接收,但是由于前端控制器只负责转发和响应,不能直接执行该方法.所以交给处理器适配器执行.

5. 处理器适配器根据方法的类型(xml配置文件/注解/其他方法),处理器适配器在自己的处理器库中挑选一个最为合适的处理器去执行该方法. 当处理器执行该方法时标识业务开始. 将最终的处理的结果通过ModelAndView对象进行包裹,返回给前端控制器.
   ModelAndView: Model: 代表服务器返回的业务数据 View: 服务器端返回的页面的名称

6. 视图解析器 将View中的数据进行解析 拼接一个完整的页面路径 前缀/hello后缀

7. 视图渲染: 将数据与页面进行绑定. 这样用户就可以在页面中看到具体的数据.

8. 由于现在流行前后端分离. 所以SpringMVC省略了视图解析和视图渲染.只有前5步. 核心注解: @ResponseBody 省略6-7步