一、JS
1、js引入方式
- 将js代码定义在html页面中的<script></script>中（<body>的底部）
- 将js代码定义在js文件中，通过<script src = ""></script>标签引入
书写规范：每行结尾以分号结尾，分号可以加也可以不加
2、变量/常量
- js是弱类型语言，变量可以存放不同类型的值
- 声明
- let 声明变量
- const 声明常量，一旦声明，值不可改变
- 输出语句
- windows.alert() 弹出警告框
- console.log() 写入浏览器控制台
- document.write() 向html的body内输出内容
3、数据类型
js中的基本数据类型
number、boolean、string、null、undefined
字符串反引号的使用场景，用于字符串拼接
console.log(`我叫${name},我今年${age}岁了`)
4、JS函数
js是弱类型语言，定义函数时，行参和返回值都无须指定类型
function add(a,b){
return a+b;
}
let add = function(a,b){
return a+b;
}
let add = (a,b) =>{
return a+b;
}
5、JS自定义对象语法
let 对象 = { 属性名：属性值，属性名：属性值，方法名：funtion(){}}
注意，在定义对象中的方法时，尽量不要用箭头函数
<script>
let h = {
name:"hahaha",
age:18,
sex:"女",
show: function(){
alert(`我叫${this.name},我今年${this.age}岁了`)
}
}
alert(h.name);
h.show();
</script>
6、JSON
json格式特点
json格式的文本所有的key必须用双引号引起来
json对象的两个方法
JSON.parse() 将json字符串转为js对象
JSON.stringify() 将js对象转为json字符串
7、DOM
1、什么是DOM
文档对象模型，js提供的专门用来操作网页内容的
2、如何获取DOM对象
document.querySelector('选择器')
document.querySelectorAll('选择器')
<body>
<h1 id="emmmmm">hahahahaha</h1>
<h1>fei</h1>
<h1>18888888</h1>
<script>
let a = document.querySelector('#emmmmm')
//let a = document.querySelector('h1');
a.innerHTML = "小名";
</script>
</body>
8、事件监听
事件源.addEventListener('事件类型'，要执行的函数)
<body>
<button id="btn1">我是一个点击按钮</button>
<button id="btn2">点击2</button>
<script>
document.querySelector("#btn1").addEventListener("click",() =>{
alert("点击1");
})
</script>
</body>
常见事件
鼠标事件
click ：鼠标点击
mouseenter：鼠标移入
mouseleave：鼠标移出
键盘事件
keydown：键盘按下触发
keyup：键盘抬起触发
焦点事件
focus：获得焦点触发
blur：失去焦点触发
表单事件
input：用户输入时触发
submit：表单提交时触发
9、JS模块化
用关键字export、import ，引用js文件的时候要用type="module"
export function printLog(msg){
console.log(msg);
}
import {printLog} from './utils.js'
<script src="demo.js" type="module"></script>
二、Vue
1、vue快速入门
准备工作
- 引入vue模块
- 创建vue的应用实例
- 定义元素（div），交给vue控制
数据驱动视图
- 准备数据
- 用插值表达式渲染
<body>
<div id="app">
<h1>{{message}}<h1>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
message:"hello world"
}
}
}).mount('#app')
</script>
</body>
2、常用指令
v-for
作用：列表渲染，遍历容器的元素
语法：
<h1 v-for="(item,index) in items" : key="item.id">
v-bind
场景：动态为标签属性绑定值（插值表达式，不能在标签内使用）
语法：
v-bind：属性="变量" ：属性="变量"
v-if 和 v-show
作用：根据条件判断，是否展示某元素
区别：
v-if：条件不成立，直接不渲染这个元素（不频繁切换的场景）
v-show：通过css样式，来控制元素的展示与隐藏（频繁切换的场景）
v-model
作用：表单元素上进行数据双向绑定，用于获取或设置表单项数据
注意：v-model = “变量” 变量必须在data中声明
v-on
作用：事件绑定
语法：v-on：click=“” / @click = “”
vue入门完整小代码
<body>
<div id="app">
<form>
<lable for="name">姓名:</lable>
<input type="text" id="name" name="name" v-model="searchForm.name" palceholder="请输入姓名">
<lable for="type">类别</lable>
<select id="type" name="type" v-model="searchForm.type">
<option value=""></option>
<option value="1" >果宝小子</option>
<option value="2">果宝女侠</option>
<option value="3">果宝机甲</option>
</select>
<button type="button" v-on:click="search">查询</button>
<button type="button" @click="clear">清空</button>
</form>
<table>
<tr v-for="(e,index) in message" :key="e.id">
<td>{{e.id}}</td>
<td>{{e.name}}</td>
<td><img v-bind:src="e.image" v-bind:alt="e.name" v-bind:style="{width: '400px',height: '400px'}"></td>
<td>
<!-- <span v-if="e.type == 1">果宝小子</span>-->
<!-- <span v-else-if="e.type == 2">果宝女侠</span>-->
<!-- <span v-else>果宝机甲</span>-->
<!--v-show 的使用方法 -->
<span v-show="e.type == 1">果宝小子</span>
<span v-show="e.type == 2">果宝女侠</span>
<span v-show="e.type == 3">果宝机甲</span>
</td>
</tr>
</table>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
methods:{
search(){
console.log(this.searchForm)
}
,clear(){
this.searchForm={
name:"",
type:""
}
}
},
data(){
return {
searchForm:{
name:"",
type:""
},
message:[{
id:1,
name:"菠萝吹雪",
image: "菠萝吹雪.jpg",
type:1
},
{
id:2,
name:"梨花诗",
image: "梨花诗.jpeg",
type:2
},
{
id:3,
name:"菠萝吹雪的机甲",
image:"菠萝吹雪的机甲.jpg",
type:3
}
]
}
}
}).mount('#app')
</script>
</body>
三、Maven
1、maven介绍
Maven的仓库是用来存储和管理jar包的
Maven中有这三类仓库，查找依赖（jar）的顺序从上到下
本地仓库
远程仓库（私服，比如一个公司自己整的）
中央仓库（全球仓库）
2、maven坐标
- 什么是坐标
Maven中的坐标是资源（jar）中的唯一标识，通过该坐标可以唯一定位资源位置
使用坐标来定义项目或引入项目中需要的依赖
- maven坐标主要组成
groupId：定义当前Maven项目隶属组织名称（通常是域名反写）
artifactId：定义当前Maven项目的名称
version：定义当前项目的版本号
SNAPSHOP：功能不稳定，尚处于开发中的版本，即快照版本
RELEASE：功能趋于稳定、当前更新停止，可用于发行的版本
- 导入Maven项目
建议将要导入的maven项目导入到你自己的项目目录下
建议选择maven项目的pom.xml文件进行导入
- 依赖管理
配置依赖的方式
<dependencies>
<dependency> </dependency>
</dependencies>
如何排除依赖(写在dependency里面)
<exclusions></exclusions>
注意事项
一旦依赖配置变更了，记得重新加载
3、Maven生命周期
三套生命周期
- clean：清理工作
- clean ：清理
- default：核心工作
- compile：编译
- test：测试
- package：打包
- install：安装
- site：生成报告，发布站点等
注意：在同一套生命周期中，当运行后面的阶段时，前面的阶段都会运行
比如运行install时，test肯定会先运行，但是clean不会，因为clean和install，test不是一套生命周期
四、JDBC
1、JDBC就是sun公司提供的一套操作关系型数据库的API（规范）
2、JDBC操作数据库的步骤
package com.kang;
import org.junit.jupiter.api.Test;
import java.sql.Connection;
import java.sql.Driver;
import java.sql.DriverManager;
import java.sql.Statement;
public class JdbcTest {
/**
* JDBC入门程序
* 测试修改操作
*/
@Test
public void testUpdate() throws Exception {
//1、注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//2、获取连接
String url = "jdbc:mysql://localhost:3306/数据库名字";
String username = "数据库账号";
String password = "数据库密码";
Connection connection = DriverManager.getConnection(url, username, password);
//3、获取sql语句执行对象
Statement statement = connection.createStatement();
//4、执行sql语句
int i = statement.executeUpdate("update emp set name = '吹小泡泡' where id = 9");
System.out.println("Sql语句执行成功,影响记录为：" + i );
//5、释放资源
statement.close();
connection.close();
}
}
预编译SQL的写法
public void testQuery() throws Exception {
//1、注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//2、获取连接
String url = "jdbc:mysql://localhost:3306/数据库名字";
String username = "数据库账号";
String password = "数据库密码";
Connection connection = DriverManager.getConnection(url, username, password);
// 预编译sql
//3、获取sql语句执行对象
String sql = "select * from user where id = ? and name = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1, 2);
preparedStatement.setString(2, "梨花诗");
//4、执行sql语句
ResultSet resultSet = preparedStatement.executeQuery();
//静态sql
// Statement statement = connection.createStatement();
// ResultSet resultSet = statement.executeQuery("select * from user where id = 1");
//5、处理结果集，填充到user对象中
while (resultSet.next()) {
User user = new User();
user.setId(resultSet.getInt("id"));
user.setUsername(resultSet.getString("username"));
user.setName(resultSet.getString("name"));
user.setAge(resultSet.getInt("age"));
user.setGender(resultSet.getString("gender"));
System.out.println(user);
}
//5、释放资源
resultSet.close();
preparedStatement.close();
connection.close();
}
使用预编译的写法有两个优点
- 安全
- 性能更高
3、数据库连接池
- 是一个容器，负责分配、管理数据库连接（Connection）
- 优势：资源复用、提升响应速度
- 切换数据库连接池，两步
- （1）pom文件中导入依赖
-
<dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.22</version> </dependency>（2）配置文件（application.properties）
-
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
五、Mybatis
1、Mybatis中 # 与 $ 的区别是什么
- #是占位符，会替换成？生成预编译SQL
- $是字符串拼接符号，将参数直接拼接在SQL中
六、细节相关
1、从前端传来的参数如何获取
- 方式一：通过原始的HttpServletRequest对象获取
- String xxx = request.getParameter("xxx");
- 方式二：通过@RequestParam注解进行参数绑定
- public Result del (@RequestParam("id")Integer deptId){}
- 方式三：保证请求参数名与形参变量名相同，直接接收（推荐）
注意：一旦加了@RequestParam注解，该参数必须传递，因为默认required为true
扫一扫
1388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
