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:
- 是一个基于Promise的HTTP客户端，用于浏览器和Node.js
- Axios对原生态的Ajax进行了封装，提供了更加方便的API
- 步骤：
1.安装axios：npm install axios
2.引入axios：import axios from ‘axios’
3.发送请求：axios.get(url)
- 官网：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}")
