冷静不了一点

Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架(基于数据渲染成用户能看到的界面)

使用 ES 模块构建版本
在本文档的其余部分我们使用的主要是 ES 模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

 html
 <div id="app">{{ message }}</div>

 <script type="module">
   import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

   createApp({
     setup() {
       const message = ref('Hello Vue!')
       return {
         message
       }
     }
   }).mount('#app')
 </script>

 注意我们使用了 <script type="module">，且导入的 CDN URL 指向的是 Vue 的 ES 模块构建版本。

vue的常用指令

v-for：列表渲染，遍历容器的元素或者对象的属性

     <body>
         <div id="app">
             <table border="3px" style="padding: 0; background-color: pink; width: 100px; height: 40px;">
                 <tr v-for="(u,index) in users" :key="index">
                     <!--index是指序号-->
                     <td>{{index +1}}</td>
                     <td>{{u.id}}</td>
                     <td>{{u.name}}</td>
                     <td>{{u.gender ===1?'男':'女'}}</td>
                 </tr>
             </table>
         </div>
         <script type="module">
             import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
             createApp({
                 data() {
                     return {
                         users: [
                             { "id": 1, "name": "张三", "gender": 1 },
                             { "id": 2, "name": "李四", "gender": 2 },
                             { "id": 3, "name": "王五", "gender": 1 }

                         ]
                     }

                 }
             }).mount('#app');

         </script>

v-bind：动态为HTML标签绑定属性值，如设置href css样式等

   注意：动态的为标签的属性绑定值，不能使用差值表达式，得使用v-bind指令。且绑定得数据，必须在data中定义。差值表达式不能出现在标签内部

v-if/v-else-if/v-else：条件性的渲染某元素，判定为true时渲染，否则反之

v-show: 根据条件展示某元素，区别在于切换的是display属性的值

 区别：
      1.v-if="表达式"，基于条件判断，来控制创建或移除元素节点(条件渲染)例如<span v-if="gender==1">男生</span> ，适用的场景`不频繁切换得场景`。
      2.v-show="表达式"，基于css样式display来控制显示与隐藏，适用的场景`频繁切换显示隐藏得场景`。

v-model：在表单元素上创建双向数据绑定

 <select id="position" name="position" v-model="Searchfrom.job">
 注意：v-model指令用于在表单元素上创建双向数据绑定。
     1. v-model指令用于在表单元素上创建双向数据绑定。
     2. 当表单元素的值发生改变时，绑定的数据也会发生改变。
     3. 当绑定的数据发生改变时，表单元素的值也会发生改变。

v-on：为HTML标签绑定事件

   <button type="button" v-on:click="search">查询</button>
   注意：v-on:事件名="方法名"，方法名不能加引号，且方法名必须在methods中定义。

Ajax

Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，获取服务器响应的数据。Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2.异步交互技术Axios:
1. 是一个基于Promise的HTTP客户端，用于浏览器和Node.js
2. Axios对原生态的Ajax进行了封装，提供了更加方便的API
3. 步骤：
  1.安装axios：npm install axios
  2.引入axios：import axios from ‘axios’
  3.发送请求：axios.get(url)
4. 官网：https://www.axios-http.cn可查看使用情况

Maven使用

maven的作用：

依赖管理、项目构建、统一项目结构(插件执行框架)
创建maven项目
导入maven项目

建议将要导入的maven项目直接复制到项目目录下

建议选择maven项目的pom.xml文件进行导入

依赖配置的方式例如：

         <dependencies>

         <dependency>

                 <groupId>org.springframework.boot</groupId>

                 <artifactId>spring-boot-starter-test</artifactId>

                 <scope>test</scope>

             </dependency>

         </dependencies>

移除依赖

         <exclusions>

             <exclusion>

                 <groupId>org.springframework.boot</groupId>

                     <artifactId>spring-boot-starter-test</artifactId>

             </exclusion>

         </exclusions>

生命周期

每套生命周期包含一些阶段，阶段都是有顺序的，后面的阶段依赖于前面的阶段

clean(clean阶段)：移除上一次构生成的文件

default(compile：编译项目源代码、test：使用合适的单元测试框架进行测试如junit、package：将编译后的文件打包，如jar\\waR等、install：		安装项目到本地仓库)

site(site阶段)

值得注意的是：在同一套生命周期中，当运行后面的阶段时，前面的阶段都会运行

执行指定周期的方式：
1.在ideal中，右侧的maven工具栏，选中对应的生命周期，双击运行

2.在ideal中，找到对应的项目，右键点击open in进入磁盘，用cmd命令行执行对应的生命周期的阶段

例如：mvn clean

单元测试Junit：

用法：测试类中的方法的正确性

优点（对于main方法而言）：测试代码与应用程序代码分开，便于维护；可以自动生成测试报告；一个测试方法执行失败，不影响其他的测试方法。

前置工作：在pom.xml文件中引入Junit的jar包依赖，然后在相应的项目中的main同级中的test文件中编写junit测试类

断言：

由于测试方法运行不报错，不代表业务方法逻辑没问题，所以通过断言可以检测方法运行结果是否和预期一致，从而判断业务方法的正确性。

    在测试方法中使用断言的方法：

                            Assertions.assertXxxx()

    就是接口的具体实现类，直接以参数的形式写出来

依赖范围：

     <dependency>

         <groupId>org.springframework.boot</groupId>

         <artifactId>spring-boot-starter-test</artifactId>

     <scope>test</scope>  指定maven的依赖范围，参见的取值有：compile（默认）、test、provided、runtime**

     </dependency>

maven常见爆红问题解决：

要是依赖下载不成功就会爆红，在maven本地仓库中生成了xxxx.lastUpdated文件，若是该文件不删除，依赖就不会再下载了

方法：
根据maven依赖的坐标，找到仓库中对于的xxxx.lastUpdated文件，删除，删除之后重新加载项目即可
或者在本地仓库中通过命令行的形式，执行del /s *.lastUpdated 批量删除指定目录下面的xxxx.lastUpdated文件，删除之后重新加载项目即可
注意：要是重新加载依赖，依赖下载之后还是爆红，此时可以关闭IDEA，重新打开IDEA加载项目即可

SpringBoot项目创建

SpringBoot的官网：spring.io
如何创建Spring web项目：
社区版IDEA：
示例：通过插件创建SpringBoot项目

打开 Settings/Preferences，进入 Plugins。

搜索并安装 Spring Assistant 插件。

重启IDEA后，新建项目时选择 Spring Assistant 标签。

按照提示填写项目信息并选择依赖，完成后即可生成SpringBoot项目。

org.springframework.boot spring-boot-starter-web 方法1：使用Spring官方工具

访问 Spring Initializr 网站，选择语言、依赖等配置后生成项目。下载解压后，用IDEA打开即可。

方法2：手动创建Maven项目

在IDEA中创建一个普通的Maven项目。

修改 pom.xml 文件，添加SpringBoot相关依赖。

配置主类和资源文件，如 application.yml。

@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}
通过以上方法，即使在社区版中也可以顺利开发SpringBoot项目。

Web基础——HTTP协议

HTTP协议特点：
1.基于TCP协议，面向连接，安全
2.基于请求——响应模型：一次请求对应一次响应
3.HTTP协议是无状态的协议：对于事务处理没有记忆功能。每次请求——响应都是独立的
缺点：多次请求间不能共享数据
优点：速度快

——所以在Web开发中一般使用会话解决上述多次请求间不能共享数据的问题

HTTP协议——请求数据格式：
请求行：请求方式、资源路径、协议
请求头：格式key-value
请求体：（对于POST请求独有的）存放请求的参数

对于两种不同的请求方式来说请求参数的存放位置是不同的，
GET：请求参数在请求行中，可见安全性不高，没有请求体
POST：请求参数在请求体中，不可见安全性高，POST请求大小是没有限制的

HTTP协议数据获取：
Web服务器（Tomcat）对HTTP协议的请求数据进行解析，并进行封装到HttpServletRequest，所以可以直接调用Controller方法的时候传递给了该方法。
HTTP响应数据：
Web服务器（Tomcat）对HTTP协议的请求数据进行解析，并进行封装到HttpServletRseponse ，所以可以直接调用Controller方法的时候传递给了该方法。

Mybatis入门：

mybatis 属于一种持久层框架，用于简化JDBC的开发。用于数据访问dao持久层

官网：https://mybatis.net.cn/getting-started.html

数据库连接池：是一个容器，负责分配管理数据库连接（Connection），允许应用程序重复使用一个现有的数据库连接，而不是在重新建立一个。同时释放空闲时间超过最大空闲时间的连接，来避免因为没有释放连接而引起的数据库连接遗漏。

切换数据库连接池（又spring boot默认的Hikari的数据库连接池转换到Druid）：，优势：资源复用，提升系统的响应速度，使用接口DataSource
1.在pom.xml配置文件中，加入配置信息

<dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
    </dependency>
    2.application.yml配置文件中
spring.datasource.type/url/driver-class-name/username/password

Mybatis中的#号和$号

#{...}:占位符。执行时，会将#{...}替换为？，生成预编译SQL，使用场景为参数值传递，安全性能高：
${...}：拼接符。直接将参数拼接在SQL语句中，存在SQL注入问题，使用场景为表明，字段名动态设置时使用，不安全，性能低

例子：

    @Delete("delete from dept where id=#{id}");
    @Select("selectn id,name,score from ${tableName} order by ${sortField}")