项目的前端的准备第一阶段

通过文件创建表

首先 , 创建一个数据库 , 首先在一个数据库中右键----->创建数据库即可
但是在这里注意 : 创建数据库的时候一定将字符集设置为下面图片的情况;

导入文件创建表

选中一个数据库 右键------>导入------->从sql转储文件导入数据库------->选中该文件夹(如下图所示)

什么是组件（component）

就是网页中的一个小模块，无论这个模块放到哪里都能够使用这个模块的功能，从而实现了复用性，这种思想就是组件化，
优点：提高了开发效率，代码的复用性；

项目前后端搭建

后端系统搭建

创建后端项目

创建步骤

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

编辑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 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>

编辑主启动类

准备pojo文件

说明: 从jt-common中的课前资料 粘贴复制POJO文件，具体的所有包在百度网盘中

复制后的效果

准备VO文件

复制VO的路径

复制后的效果

整体结构如图

前端项目搭建

启动前端脚手架

运行前端项目

启动前端脚手架

运行前端项目

前端项目效果展现

检查前端路径

1). 检查前端路径

Hbuilder 展现

根据上述目录结构,利用Hbuilder打开文件

前端脚手架(node.js)结构说明

作用:用一种统一的方式进行管理html css js vue等文件

关于.vue文件说明

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

template里面 : 是将html的页面引入到template里面将该页面进行展现

前端脚手架结构说明

在引入脚手架之后下面 的文件会自动的引入 , 这里的src用的是自己的 , 不是脚手架
在这里plugin文件中引入的ui是element

main.js说明

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

引入样式/JS/CSS

组件之间参数传递问题 父子组件通过属性prototype实现参数传递.

**这里的$http是引入axios定义的名字,\ast \ast \ast \ast 在使用$http就相当于是引入axios **
prototype只有使用该属性子级才能使用父级的参数

组件之间插件传递

父级向子集传递使用use 或者prototype 子向父传递参数使用export default

实例化VUE对象 该对象指定渲染的页面,与页面中的区域.

App.vue 页面说明

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

脚手架中的路由

脚手架加载流程图

关于ElementUI工具说明

使用ElementUI需要导入element的js或者在安装node.js的时候安装element的插件

4.1 后端项目导入组件说明

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

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

ElementUI入门案例

定义elementUI组件

定义elementUI路由

需求: 通过http://localhost:8080/#/elementUI访问ElementUI.vue组件

实现: 编辑index.js 实现路由跳转

在elementUI的文件按中

<template>
  <div>
    <h1>elementUI测试</h1>
    <!-- 按钮案例
      1.需要引入elementUI中的样式 需要导入标签(组件)
    -->
   <el-row>
     <el-button>默认按钮</el-button>
     <el-button type="primary">主要按钮</el-button>
     <el-button type="success">成功按钮</el-button>
     <el-button type="info">信息按钮</el-button>
     <el-button type="warning">警告按钮</el-button>
     <el-button type="danger">危险按钮</el-button>
   </el-row>

   <el-row>
     <el-button plain>朴素按钮</el-button>
     <el-button type="primary" plain>主要按钮</el-button>
     <el-button type="success" plain>成功按钮</el-button>
     <el-button type="info" plain>信息按钮</el-button>
     <el-button type="warning" plain>警告按钮</el-button>
     <el-button type="danger" plain>危险按钮</el-button>
   </el-row>

   <el-row>
     <el-button round>圆角按钮</el-button>
     <el-button type="primary" round>主要按钮</el-button>
     <el-button type="success" round>成功按钮</el-button>
     <el-button type="info" round>信息按钮</el-button>
     <el-button type="warning" round>警告按钮</el-button>
     <el-button type="danger" round>危险按钮</el-button>
   </el-row>

   <el-row>
     <el-button icon="el-icon-search" circle></el-button>
     <el-button type="primary" icon="el-icon-edit" circle></el-button>
     <el-button type="success" icon="el-icon-check" circle></el-button>
     <el-button type="info" icon="el-icon-message" circle></el-button>
     <el-button type="warning" icon="el-icon-star-off" circle></el-button>
     <el-button type="danger" icon="el-icon-delete" circle></el-button>
   </el-row>

   <hr />
   开关
   <el-switch
     v-model="value"
     active-color="#13ce66"
     inactive-color="#ff4949">
   </el-switch>

   <hr />
  <!--日期格式-->
  <div class="block">
     <span class="demonstration">默认</span>
     <el-date-picker
       v-model="value1"
       type="date"
       placeholder="选择日期">
     </el-date-picker>
   </div>

   <hr />
   <!-- 评分 -->
   <div class="block">
     <span class="demonstration">默认不区分颜色</span>
     <el-rate v-model="value1"></el-rate>
   </div>
   <hr />
   <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
   <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
   <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
   <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
    <hr />
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="70" status="warning"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>

  </div>
</template>

<script>
</script>

<style>
</style>

elementUI 入门案例讲解

1).找到页面组件Demo

项目中引入组件

引入组件

说明 在element.js中引入组件

声明组件

效果展现

用户登录页面实现

阿里图标库

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

ElementUI中的form表单

SpringMVC流程

Servlet机制

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

核心对象

Request对象

Response对象

SpringMVC调用流程图

重要的组件

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

SpringMVC程序启动前状态说明

父子容器概念:

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

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

SpringMVC运行流程

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

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

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

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

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

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

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

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