文章目录

框架复习

一、Maven

1. 概念

  • 项目架构管理工具
  • 约定大约配置

2. 环境配置

配置环境变量

  1. 下载apache-maven-3.6.3-bin.tar.gz
  2. 配置环境变量M2_HOME、MAVEN_HOME ,添加 path 变量
  3. 检测配置是否成功

阿里云镜像

​ 外网下载慢，从阿里镜像下载

  1. apache-maven-3.6.1\conf\settings.xml 添加阿里云仓库配置
  2. 建立本地仓库maven-repo ,在settings.xml 文件中指定绝对路径

3. IDEA+Maven

  1. 新建普通Maven项目
  2. 标记文件夹
  3. 手动设置Maven 版本和仓库路径

4. 配置Tomcat

名字、热部署、路径

5. pom.xml 下载依赖

官网Maven仓库

二、Mybatis

1. 概念

一款持久层框架

Maven仓库中获取Mybatis依赖

2. 使用Mybatis

  1. 搭建数据库
  2. 新建Maven项目 导入Mybatis、mysql驱动依赖
  3. main/resource 路径下配置mybatis-config.xml文件（url 、username，password、driver）
  4. 编写工具类：加载xml配置文件流 → 获取sqlSessionFactory对象 → 获取sqlSession 实例
  5. 编写实体类，mapper接口（要实现的功能），mapper.xml配置文件（绑定接口）
  6. 在 mybatis-config.xml 文件中配置 mapper xml文件
  7. 测试
    1. 获取sqlsession 实例
    2. 调用getMapper() 方法 获取mapper接口实例
    3. 调用增删改查方法

注意 pom.xml文件中资源过滤使xml文件可以导出

map 作为参数 可用于多个参数类型

结果集映射 resultMap

日志

1. 导入 log4j 依赖
2. mybatis-config.xml配置
3. log4j properties配置文件

3. 注解开发

@select("select语句")
@delete("")
@update("")

4. 一对多 和 多对一

老师对学生 ：老师是对象（association） 学生是集合（collection）

按照查询嵌套处理

按照结果嵌套处理

5. 动态sql

6. 缓存

一级缓存

二级缓存

三、Spring

1. 概念

大杂烩、整合现有技术框架

2. IOC

控制反转 IOC DI（依赖注入），被动接受创建对象；xml 配置 或注解实现IOC

3. 使用spring

  1. 导入spring-webmvc依赖
  2. 编写实体类 pojo
  3. 配置beans.xml文件 (spring创建管理bean对象)
<bean id="UserDAOMysqlImpl" class="com.study.dao.UserDAOMysqlImpl"></bean>
<bean id="userService" class="com.study.service.UserServiceImpl">
        <property name="userDAO" ref="UserDAOMysqlImpl"></property>
        <!-- property 调用set方法赋值
        ref对应的是bean的id，代表实现类
        value对应的是具体的值
		-->
</bean>
  1. 测试
 public void test(){
        //解析xml文件，生成管理相应的bean对象
       ApplicationContext context = new ClassPathXmlApplicationContext("beans.xml");
       //参数为spring中的bean标签的id属性
        UserServiceImpl userService = (UserServiceImpl) context.getBean("userService");
        userService.getService();
 }

4. 依赖注入

1.  构造器注入 
2.  set注入：要求被注入的属性必须有set方法 ；Boolean is开头
3.  拓展注入：命名空间注入 （p命名空间/c命名空间）

5. 自动装配

Spring 会在上下文为某个bean寻找其依赖的 bean

装配机制

  1. xml显式配置 使用
    <bean id="cat" class="com.study.pojo.Cat"></bean>
    <bean id="dog" class="com.study.pojo.Dog"></bean>
    <bean id="person" class="com.study.pojo.Person" > 
        autowire="byName/byType" set方法 属性可以通过 id名/类型 装配
        <property name="name" value="快乐撸代码"></property>
        <property name="cat" ref="cat"></property>
        <property name="dog" ref="dog"></property>
     </bean>
  1. java显式配置
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration//代表一个配置类代替xml文件
@import("类名.class")  //导入其他配置类
public class CDPlayerConfig {

	@Bean(name="longelyHeartsClub")//注册bean
	public CompactDisc sgtPeppers() {
		return new SgtPeppers();
	}

    @Bean
	public CDPlayer cdPlayer() {
		return new CDPlayer(SgtPeppers());
	}
}

  1. 隐式bean发现机制和自动装配

    使用注解自动装配 ：引入约束 、开启注解支持 、@Autowired 、@Qualifier（value=""） 可指定唯一bean

    @Resource 指定name - byName - byType

6. 使用注解开发

导入 aop 的包

在配置文件中，引入context约束

开启注解支持，扫描包下的注解 使类可以装配到spring容器

 <!--开启注解支持:使值可以注入-->
    <context:annotation-config/>
<!--扫描包下的注解，使类可以装配到Spring容器-->
    <context:component-scan base-package="com.study.pojo"/>

注入

@Component("类bean id名") 注入容器 注册bean
    @Controller：web层
	@Service：service层
	@Repository：dao层
@value("") 属性注入
@Autowired("") @Resource 类注入

7. AOP

  1. 导入依赖 aspectjweaver

  2. 对于业务实现类 编写 前置/后置 增强类

    • spring API 实现AOP 配置文件 切入点 ，执行方法

    • 自定义类实现AOP 自定义类 -> 配置xml文件 切面 切入点 执行方法

    • 使用注解实现AOP 自定义类 方法上使用注解 @after(“切入点”) ，@before(“切入面”)，开启注解支持

8. 与Mybatis 整合

  1. 导入 mybatis 依赖
  2. 配置spring的xml文件
    • springfamework.jdbc 代替mybatis-config.xml 中的datasource配置
    • 使用 SqlSessionFactoryBean来创建 SqlSessionFactory(使用数据源)，注入SqlSessionTemplate
    • 绑定Mybatis配置文件,将该bean和mybatis-config.xml连起来,也可以将其和XXXMapper.xml文件绑定
    • 注册Mapper接口实现类，丢入sqlSessionTemplate

还可以直接继承 SqlSessionDaoSupport 实现 接口，注册bean

9. 事务

  • 声明式事务
  • 编码式事务

xml配置声明式事务

  1. 配置事务通知
  2. 配置事务切入（切入点）

四、springMVC

springMVC执行流程

1. 使用springMVC

  1. 新建模块 添加web框架支持
  2. 配置web.xml 注册DispatcherServlet，过滤请求，绑定springmvc-servlet.xml文件
  3. 配置 springmvc-servlet.xml 处理器映射器 处理器适配器 视图解析器
  4. 实现Controller接口，和模型层view交互处理数据，返回给视图解析器
  5. 注册bean Controller接口实现类
  6. 编写返回的jsp页面
  7. 配置 Tomcat 服务器

注意一些小问题 导入依赖，添加lib依赖

2. 注解开发SpringMVC

在 springmvc-servlet.xml 文件上配置

 <!-- 自动扫描包，让指定包下的注解生效,由IOC容器统一管理 -->
    <context:component-scan base-package="com.study.controller"/>
 <!-- 让Spring MVC不处理静态资源 -->
    <mvc:default-servlet-handler />
    <!--
通常，我们只需要手动配置视图解析器，而处理器映射器和处理器适配器只需要开启注解驱动即可，而省去了大段的xml配置
    支持mvc注解驱动
        在spring中一般采用@RequestMapping注解来完成映射关系
        要想使@RequestMapping注解生效	
        必须向上下文中注册DefaultAnnotationHandlerMapping
        和一个AnnotationMethodHandlerAdapter实例
        这两个实例分别在类级别和方法级别处理。
        而annotation-driven配置帮助我们自动完成上述两个实例的注入。
     -->
    <mvc:annotation-driven />

创建controller

​ @Controller 让Spring IOC容器初始化时自动扫描到

​ @RequestMapping 映射请求路径

创建视图层

3. RestFul风格

请求风格：http://localhost:8080/springAnnotation/t2/1/3

    @RequestMapping("/t2/{a}/{b}")
    public String test2(@PathVariable int a,@PathVariable int b, Model model){
        model.addAttribute("msg","RestFul风格: "+(a+b));
        return "hello";

springAnnotation/t2是路径

1/3是参数

/*在RequestMapping中可使用method属性指定
@RequestMapping(value = "/t1/{a}/{b}",method = RequestMethod.POST)
等效于
@PostMapping("/t1/{a}/{b}")

*/
@GetMapping
@PostMapping
@PutMapping
@DeleteMapping
@PatchMapping

4. 转发和重定向

forward 转发 不需要视图解析器

redirect 重定向

5. 回传参数

ModelAndView 和 ModelMap、Model

6. 解决表单乱码

配置web.xml文件

SSM框架整合

五、Vue

1. MVVM

MVVM 分离视图和模型：低耦合、可复用、独立开发、可测试

  • Model：模型层， 在这里表示JavaScript对象
  • View：视图层， 在这里表示DOM(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化， 并能够通知数据发生改变

Vue.js 是MVVM的实现者

2. Vue 语法

需要 IDEA 下载Vue插件

不需要DOM操作，就让div中的内容发生了变化，这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。

基础语法

​ v-bind 绑定标签的属性

​ v-if ,v-else ； 判断语句

​ v-if , v-else-if, v-else 判断语句

​ v-for 循环遍历

​ v-on 绑定事件响应方法

​ v-model 双向数据绑定（数据和视图一方跟着另一方发生变化）可绑定单行、多行文本、单选、复选框、下拉框

3. 组件

可重复使用的Vue模板

定义和使用组件

	<!--注册组件-->
Vue.component("yao",{ /*自定义组件名字   使用组件<yao></yao>*/
        template:'<h1 style=\"font-size: 16px\">快乐撸代码<h1>' /*组件模板*/
    });

传递参数到组件

<!--定义参数的组件-->
    Vue.component("yao",{
        props:['temp'],
        template:'<li>{{temp}}</li>'
    })
/*使用组件*/
    <!--3. 遍历Vue对象中的Data中的array数组, 通过v-bind 使自定义组件中的temp属性和遍历到的index 属性保持一致-->
    <yao v-for="index in array" v-bind:temp="index"></yao>

4. Axios异步通信

作用是实现Ajax异步通信

Axjos 基于 ES6规范，需要更改IDEA配置

使用Axios

​ 准备一段json数据 data.json ,使用Axios的get方法请求Ajax并封装数据到Vue实例数据对象

var vm = new Vue({
            el:"#vue",
            data(){
                /*在data中的json数据结构必须和Ajax响应回来的json数据格式匹配！*/
                return{
                    info:{
                        name:null,
                        address:{
                            country:null,
                            city:null,
                            street:null
                        },
                        url:null
                    }
                }
            },
            mounted(){/*钩子函数*/
                axios.get('../data.json').then(response=>(this.info=response.data))
            }

        });

5. 计算属性

缓存计算结果，节约系统开销

  • methods：定义方法， 调用方法使用currentTime1()， 需要带括号
  • computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号

6. 内容分发（插槽）

当组件A中有组件B和C，且B和C的值是动态的

  1. 在A组件中留两个插槽
  2. 编写B、C组件，且在组件中定义参数 来动态绑定值
  3. 实例化Vue并初始化数据，绑定div
  4. 使用A组件时，给B、C组件绑定Vue中data参数

自定义事件

在组件中删除Vue实例中的对象

  1. 定义Vue实例中的 removeItems 删除方法（下标参数）
  2. 在调用组件时 自定义事件名remove调用Vue实例中的 removeItems 删除方法（传入下标）
  3. 在定义组件时，自定义方法 removeMethods 调用remove方法
  4. 在定义组件template时，绑定按钮响应事件 removeMethods

事件响应 removeMethods -> 调用自定义事件remove -> 调用 removeItems 从而删除数据

7. vue-cli程序

环境

安装环境 Node.js

安装Vue-cli

Vue开发

  1. 创建工程
  2. 安装vue-routern
  3. 安装 element-ui
  4. 安装依赖 、sass加载器
  5. 启动测试

配置路由 嵌套路由

​ 路由参数传递

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue