Spring 框架复习

企业一

Springboot Mybatis

MAVEN配置文件

maven的配置文件settings.xml存在于两个地方：

• 安装的地方：${M2_HOME}/conf/settings.xml
• 用户的目录：${user.home}/.m2/settings.xml

setting.xml

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
<mirrors>
    <mirror>
      <id>nexus-aliyun</id>
      <mirrorOf>central</mirrorOf>
      <name>Nexus aliyun</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public</url>
    </mirror>
	 </mirrors>
    <servers>
    	<server>
      <id>deploymentRepo</id>
     	 <username>repouser</username>
      	<password>repopwd</password>
   		</server>
  </servers>
</settings>

pom.xml

<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">
    
    <groupId>com.winner.trade</groupId>
    <artifactId>trade-core</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    
    <!-- 打包的机制，如pom, jar, maven-plugin, ejb, war, ear, rar, par，默认为jar -->
    <packaging>jar</packaging>
    
    
    <!-- 定义本项目的依赖关系 -->
    <dependencies>
        
        <!-- 每个dependency都对应这一个jar包 -->
        <dependency>
            
            <!-- 一般情况下，maven是通过groupId、artifactId、version这三个元素值（俗称坐标）来检索该构件 -->
            <groupId>com.winner.trade</groupId>
            <artifactId>trade-test</artifactId>
            <version>1.0.0-SNAPSHOT</version>
            <!-- maven认为，程序对外部的依赖会随着程序的所处阶段和应用场景而变化，所以maven中的依赖关系有作用域(scope)的限制。
                scope包含如下的取值：compile（编译范围）、provided（已提供范围）、runtime（运行时范围）、test（测试范围）、system（系统范围） -->
            <scope>test</scope>
            <!-- 设置指依赖是否可选，默认为false,即子项目默认都继承:为true,则子项目必需显示的引入，与dependencyManagement里定义的依赖类似 。 -->
            <optional>false</optional>
            <!-- 屏蔽依赖关系。
                比如项目中使用的libA依赖某个库的1.0版，libB依赖某个库的2.0版，现在想统一使用2.0版，就应该屏蔽掉对1.0版的依赖 -->
            <exclusions>
                <exclusion>
                    <groupId>org.slf4j</groupId>
                    <artifactId>slf4j-api</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>
    
    <!-- 为pom定义一些常量，在pom中的其它地方可以直接引用
        使用方式 如下 ：${file.encoding} -->
    <properties>
        <file.encoding>UTF-8</file.encoding>
        <java.source.version>1.5</java.source.version>
        <java.target.version>1.5</java.target.version>
    </properties>
</project>

Yaml properties

yml最大的好处在于其拥有天然的树状结构，所以着手尝试将properties文件更改为yml文件，发现了几个要注意的地方：

1. 在properties文件中是以”.”进行分割的， 在yml中是用”:”进行分割;
2. yml的数据格式和json的格式很像，都是K-V格式，并且通过”:”进行赋值；
3. 在yml中缩进一定不能使用TAB否则会报很奇怪的错误；缩进只能用空格！！！！
4. 每个key的冒号后面一定都要加一个空格；
5. 如果你的项目中存在 application.properties 文件， application.yml 文件就只是一个摆设。

Mapper映射器

xml 数据库一对一对应

我们需要告诉 MyBatis 到哪里去找到这些语句。在MyBatis配置文件中包含了节点，这里就是MyBatis映射器。

• 接口映射器+xml映射器 方式时，在mybatis配置文件中引入映射器 代码如下 ：

<mappers>
 <mapper class="org.mybatis.builder.AuthorMapper"/>
</mappers>

Mvc设计模式

• M是指业务模型，V是指用户界面，C则是控制器

• Model View Controller

• 对应JavaWeb东西Model Jsp Servlet

• 对应SpringBoot东西 Model 不分离就算不同的模版引擎 Controller

MAVEN 工程类型

见上文Maven配置文件

pom, jar, maven-plugin, ejb, war, ear, rar, par

MYBATIS 优点

1. 与JDBC相比，减少了50%以上的代码量。
2. MyBatis是最简单的持久化框架，小巧并且简单易学。
3. MyBatis灵活，不会对应用程序或者数据库的现有设计强加任何影响，SQL写在XML里，从程序代码中彻底分离，降低耦合度，便于统一管理和优化，可重用。
4. 提供XML标签，支持编写动态SQL语句（XML中使用if, else）。
5. 提供映射标签，支持对象与数据库的ORM字段关系映射（在XML中配置映射关系，也可以使用注解）。

SpringBoot和Spring具体区别

Spring Boot基本上是Spring框架的扩展，它消除了设置Spring应用程序所需的复杂例行配置。
springBoot框架相对于springMvc框架来说，更专注于开发微服务后台接口，不开发前端视图，同时遵循默认优于配置，简化了插件配置流程，不需要配置xml，相对springmvc，大大简化了配置流程；

Mybatis-Plus缓存级别

缓存有一级缓存、二级缓存。

一级缓存是SqlSession级别的缓存。在操作数据库时需要构造sqlSession对象，在对象中有一个数据结构（HashMap）用于存储缓存数据。不同的sqlSession之间的缓存数据区域（HashMap）是互相不影响的。 一级缓存是默认开启的不用配置。

二级缓存是mapper级别的缓存，多个SqlSession去操作同一个Mapper的sql语句，多个SqlSession可以共用二级缓存，二级缓存是跨SqlSession的。二级缓存的开启（实体类必须序列化），然后在配置文件里面配置。

mybatis-plus:
  mapper-locations: classpath*:/mapper/*.xml
  call-setters-on-nulls: true
  configuration:
    #缓存开启
    cache-enabled: true

代码

Mybatis-Plus 测试类方法

@SpringBootTest
class MybatisplusApplicationTests {
    @Resource
    private UserMapper userMapper;
  
		/**
     * 查询全部
     */
    @Test
    void queryAll() {
        List<User> list = userMapper.selectList(null);
        System.out.println(list);
    }

 }

SpringBoot Controller的方法

访问路径 localhost/day0915/users/getall, service 自带的 getlist, 注解resbonsebody

@Controller
@RequestMapping("/users")
public class TestController {

    @Autowired
    private UserService userService;

    @ResponseBody
    @GetMapping("/getAll")
    public List<User> getAll() {
        List<User> list = userService.list();
        return list;
    }
}

Mapper文件UserMapper.msl User表 写出增删改查+标签+方法名字

Mapper

/**
 * @author loveliness
 */
@Mapper
public interface UserMapper extends BaseMapper<User> {

    List<User> getAllUser();

    int updateUserById(User user);

    int insertUser(User user);

    int deletUserById(int id);
}

xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
		"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="xyz.javaee.demo.mapper.UserMapper">
	<select id="getAllUser" resultType="xyz.javaee.demo.pojo.User">
		select *
		from `user`;
	</select>
	<update id="updateUserById" parameterType="xyz.javaee.demo.pojo.User">
		update `user`
		set username = #{username},
		    pwd      = #{pwd}
		where `uid` = #{uid}
	</update>
	<insert id="insertUser" keyColumn="uid" parameterType="xyz.javaee.demo.pojo.User">
		insert into `user` (username, pwd)
		values (#{username}, #{pwd})
	</insert>
	<delete id="deletUserById">
		delete
		from `user`
		where uid = #{id}
	</delete>
</mapper>

企业二

VUE框架

计算属性Compute

计算属性的特点

1. 计算属性中任意一个实例数据发生变化。计算属性就会重新计算，视图也会更新。
2. 每一个计算属性都包含一个getter和setter
3. 计算属性可以依赖多个Vue实例中的数据

我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护。

比如以下代码

<div>
    {{text.split(',').reverse().join(',')}}
</div>

表达式里面包含了3个操作，并不是很清晰，有时候可能会更加复杂，所以在遇到复杂的逻辑时，我们应该使用计算属性。上例可以用计算属性进行改写：

computed:{
          reverseText:funtion(){
          	return this.text.split(',').reverse().join(',');
      	}
      }

所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

【注意】虽然我们是以函数的形式书写计算属性的，但是在使用时，不能加（）

组件Computer

1. 组件是可复用的实例，一个网页中某一个部分需要在多场景中使用，可以抽成一个组件进行复用，提高代码复用性
2. 组件化开发能大幅度的提高应用开效率、测试性、复用性，
3. 合理划分组件，有助于提升应用性能，对数据频繁更新的内容单独创建一个组件。
4. 开发过程中组件应该是高内聚、低耦合，组件的本质就是独立和可复用代码组织单元
5. 遵循单项数据流的原则。

Emits为什么 干什么,声明自定义事件

• emits重要用于组件之间的通信，触发自定义事件，传递参数。

• 触发自定义事件在emits节点下声明的自定义事件，可以通过this.$emit(‘自定义事件的名称’)方法进行触发

• 自定义事件传参在调用this.$emit() 方法触发自定义事件时，可以通过第2 个参数为自定义事件传参

<!-- 子组件 Count -->
<template>
  <h3>Count 子组件 --- {{ num }}</h3>
  <button type="button" class="btn btn-danger" @click="add">+1</button>
</template>

<script>
export default {
  props: ['num'],
  emits: ['numchange'],
  methods: {
    add() {
      this.$emit('numchange', this.num + 1)
    }
  }
}
</script>

<count :num="count" @numchange="getNum"></count>

SPA单页面程序 优点

一、优点

1. 良好的交互体验
   　　单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅，web应用更具响应性和更令人着迷。

2. 良好的前后端工作分离模式
   　　后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。

3. 减轻服务器压力
   　　单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。

Create Mounted 区别

• created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
• mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

Computed和 Methods区别

1. computed是响应式的，methods并非响应式。
2. 调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
3. computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。
4. computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的

Watch 监听

watch监听器会监听data中数据的变化，只要一变化，就能够执行相应的逻辑
监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值

<div id="root">
　　<input type="text" v-model="cityName"/>
</div>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  } 
})

代码

Vites创建项目 配置Axios

npm init vite-app project-name

cd project-name

npm install

npm install axios -S

Main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

// 全局配置axios的请求根路径
axios.defaults.baseURL = '请求根路径'

// 将axios挂载到Vue上
Vue.prototype.$axios = axios
// 今后在每个.vue组件中要发起请求,直接调用 this.$axios.xxx

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

router 权限控制 brfore

import {createRouter, createWebHashHistory} from "vue-router";

const routes = [
    {
        path: '/page', component: () => import('../components/page.vue'),
        beforeEnter: () => {
            if (localStorage.getItem("token") === null) {
                console.log("未登陆")
                return {path: '/'}
            }
        },
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

// 导航转成路由
export default router

EventBus 不同组件的数据传递

全局注册版本

npm install --save mitt

Main.js

import { createApp } from 'vue'
import mitt from 'mitt'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$eventBus = new mitt()

触发

this.$eventBus.emit('my-event', "发送的内容")

监听事件的

this.$eventBus.on('my-event', data => {
  console.log(data)
})

非全局只需要共享同一个bus即可