JDBC
jdbc 专门用来 通过java程序 连接 数据库。是一套标准，本质上就是用jar包里的各种工具类。
导入jar包(丰富的工具类)
获取和数据库的连接(用户名、密码)
通过程序执行SQL
通过程序处理结果
package cn.tedu.jdbc;
import java.sql.*;
//测试 jdbc
//需求：查询cgb2104库里的students表里的所有数据
public class Test1 {
public static void main(String[] args) throws Exception {
//1,注册驱动
Class.forName("com.mysql.jdbc.Driver");
//2,获取和数据库的连接
//String url= "jdbc:mysql://localhost:3306/cgb2104?characterEncoding=utf8";//指定要连接哪个数据库
String url= "jdbc:mysql:///cgb2104?characterEncoding=utf8";//指定要连接哪个数据库
String user= "root" ; //使用的用户名
String pwd= "root" ; //使用的密码
Connection conn = DriverManager.getConnection(url, user, pwd);
//3,获取传输器,执行SQL
Statement st = conn.createStatement();
//4,执行SQL
ResultSet rs = st.executeQuery("select * from students");
//5,解析结果集
while( rs.next() ){//next()判断结果集中是否有数据
for (int i = 1; i <= 5 ; i++) {
//获取每列的值并打印
System.out.println( rs.getString(i) );
}
}
//6,释放资源
rs.close(); //关闭结果集
st.close();//关闭传输器
conn.close();//关闭连接
}
}
SQL注入
/*自己准备user2表(id/name/password),准备数据
CREATE TABLE `user2` (
`id` int(11) PRIMARY KEY auto_increment,
`name` varchar(10) default NULL,
`password` varchar(10) default NULL
) ;
*/
//需求：利用jdbc,根据用户名和密码查询cgb2104库里的user表
//SQL注入攻击问题
private static void login() {
try{
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql:///cgb2104?characterEncoding=utf8";
Connection conn = DriverManager.getConnection(url, "root", "root");
Statement st = conn.createStatement();
// String sql ="select * from user2 where name='jack' and password='123456'";//写死了String user = new Scanner(System.in).nextLine();//用户输入jack'#
String pwd = new Scanner(System.in).nextLine();
//SQL注入攻击问题：本质上是因为SQL语句中出现了特殊符号#,改变了SQL语义
String sql ="select * from user2 where name='"+user+"' and password='"+pwd+"'";
ResultSet rs = st.executeQuery(sql);//执行查询的SQL,返回结果集
if(rs.next()){
System.out.println("登录成功~");
}else{
System.out.println("登录失败~");
}
st.close();
conn.close();
}catch(Exception e){
e.printStackTrace();//有异常,直接打印异常信息
//System.out.println("执行失败。。。");//上线
}}
解决方案
//解决SQL注入攻击的方案
private static void login2() {
try{
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql:///cgb2104?characterEncoding=utf8";
Connection conn = DriverManager.getConnection(url, "root", "root");
// Statement st = conn.createStatement();不行,不安全,会被SQL攻击String user = new Scanner(System.in).nextLine();//用户输入jack'#
String pwd = new Scanner(System.in).nextLine();
//?叫占位符 ,SQL的骨架
String sql ="select * from user2 where name=? and password=?";
//先把SQL骨架发给数据库执行
PreparedStatement ps = conn.prepareStatement(sql);
//给SQL里的? 设置参数
ps.setString(1,user);//给第一个?设置值是user
ps.setString(2,pwd);//给第二个?设置值是pwd
ResultSet rs = ps.executeQuery();//执行拼接好的SQL,返回结果集if(rs.next()){
System.out.println("登录成功~");
}else{
System.out.println("登录失败~");
}
ps.close();
conn.close();
}catch(Exception e){
e.printStackTrace();//有异常,直接打印异常信息
//System.out.println("执行失败。。。");//上线
}
}
HTML
静态页面 超文本标记语言，是指可以在网页中加入比文本更丰富的内容
标记有很多，要写开始标记和结果标记 <html></html>
CSS
美化静态页面 用来修饰网页的，变得好看。层叠样式表stylesheet
js
让网页动起来
Jquery
用来简化JS的写法，综合使用了HTML css js。语法： $(选择器).事件
json
是一种轻量级的数据交换格式。指定了 浏览器 和 服务器 之间数据传输的格式。
格式: {“name”:“jack”,“age”:“18”}字符串
ajax
是异步的技术（js and xml），用来局部刷新网页。
在不刷新整个网页的前提下，局部更新数据
是一种用于创建快速动态网页的技术
JS提供的 运用到Dom的技术 原生的 兼容性很差
jQuery
$.ajax({
type: //要使用的请求方式
url: //要使用的请求路径
contentType: //要传递的数据类型
data: //要拼接的数据
dataType: //数据类型
success: function(data){ //成功时的方案
},
error: function(data){ //失败时的方案
}
})
Vue 需要导入文件 vue.js和axios.js
语法:axios.get(url).then( a=>( a表示服务器返回的结果 ) )
需要放行js请求 要不前端报错 访问不到
在Controller层加上@CrossOrigin
访问网页 网页会直接发起ajax请求 请求服务器的数据 服务器把数据返回交给ajax
继续解析 最终实现局部刷新网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue提供的ajax技术</title>
<!-- 1. 导入vue.js和axios.js -->
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<!-- 发起ajax请求,异步访问,局部刷新-->
</head>
<body>
<!-- 2. 准备数据渲染区,利用插值表达式获取值 -->
<div id="app">
123{{info}}
</div>
<!-- 3. 创建Vue对象 -->
<script>
new Vue({
el : "#app", // 挂载点
data : { //数据区
info : ' '
},
mounted : function(){//发起ajax请求
//ajax 访问 服务器的数据
axios.get('http://localhost:8080/car/get').then(
//箭头语法,其中a表示服务器返回的数据
a => (
//修改info的值,a.data是固定写法用来获取a的值
this.info = a.data
)
)
}
})
</script>
</body>
</html>
dom
本质就是把网页文件看做一个Document文档对象. 提供了一套API, 可以操作网页中的所有元素
获取对象: window.document
常用的方法:
按照id的值获取元素: getElementById(id属性的值)–只会获取到一个元素
按照name的值获取元素: getElementsByName(name属性的值)–获取到多个元素 , 存入数组
按照class的值获取元素: getElementsByClassName(class属性的值)–获取到多个元素 , 存入数组
按照标签名的值获取元素: getElementsByTagName(标签的名字)–获取到多个元素 , 存入数组
直接向网页输出: write()
常用的属性:
title–返回网页的标题
id–设置或返回元素的id
innerHTML–设置或返回元素的内容
vue
一个渐进式的前端框架. 渐进式是指按需配置
mvvm框架 m model 数据模型 v view 视图 vm 让model和view产生关系
松耦合 双向绑定 简化dom操作 数据动态更新
核心思想是数据驱动 组件化的前端开发 操作的是数据
https://cn.vuejs.org
导入vue.js 准备数据渲染区 准备数据（js对象） 把数据渲染到挂载点
准备Vue对象
el属性是用来描述元素（挂着点） data属性是具体要展示的数据
显示数据的过程叫渲染
插值表达式 {{ }} vue的固定语法 获得变量的值
data 三种形式
第一种形式
data : {
msg : "hello vueeee~~~"
}第二种形式:定义函数,返回对象
data:function(){
return {
msg:"hi~vue"
}
},
第三种形式:定义函数,es6的简写法
data(){
return {msg:"vue hi~"
}
}
高级用法 v-命令
指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等
v-model 双向绑定 修改一方同时修改相同的另一方，达到数据同时更新
v-cloak 还没看到效果 先展示插值表达式
在标签中增加指令：v-cloak
增加style标签，[v-cloak]属性选择器，设置先不展示display:none;
实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题
<style>
[v-cloak]{}
</style>
v-if
用来判断,类似于java的if else if else,判断成立就显示不成立就不显示
v-show和v-if一样也可以判断,只是条件不满足也会在页面加载,隐藏而已
v-for循环 可以通过下标获得 可以循环 一般下标是i 数据是o
<h1 v-for="o in data里数组的名字">{{o}}</h1>
<h1 v-for="o,i in data里数组的名字">{{i}},{{o}}</h1>
v-on 用来绑定事件 点击按钮触发函数
<button v-on:click="show()">v-on:click 点我</button>
@是一种简写形式简化了v-on
<button @click="show()">v-on:click 点我</button>
v-bind 用来获取变量的值
<a v-bind:href="url">{{链接}}</a>
<a :href="url">{{链接}}</a>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
