1、新建一个Web Project，在WebRoot里面找到index.jsp，修改该文件自定义界面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="com.jianzhi.education.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./loaddata.js"></script>
<link rel="stylesheet" type="text/css" href="./css/my.css">
</head>
<body>
This is my JSP page. <br>
<% String rs = JavaMethod.getStr();
System.out.println("rs="+rs);%>
<table class="table x-noborder iSale" component="$UI/system/components/bootstrap/table/table"
id="table4">
<tbody class="x-list-template" id="listTemplate3">
<!-- <tr id="tr4" colspan="2">
<td id="template">
<a><img alt="" id="image22"
class="img-rounded img-responsive center-block" src="./img/one.jpg"/ οnclick="onOk()"></a>
<div id="div15" class="text text-center">
<h4 id="h43" class="text-white">限时秒杀</h4>
<h5 id="h51" class="text-white">长城</h5>
<h5 id="h54" class="text-danger">￥2922</h5>
</div>
</td>
</tr> -->
</tbody>
</table>
</body>
</html>
定义的CSS以及引用的JS文件：
$(function(){
var val = [{"desc":"易连恺和秦桑",
"name":"人生若如初相见",
"price":123,
"img":"./img/two.jpg"},
{"desc":"易连恺",
"name":"人生若如初相见",
"price":123,
"img":"./img/four.jpg"},
{"desc":"秦桑",
"name":"人生若如初相见",
"price":123,
"img":"./img/one.jpg"},
{"desc":"秦桑",
"name":"人生若如初相见",
"price":123,
"img":"./img/three.jpg"},
];
var temp = 0;
var url = "http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-06/19/232372-201706191929238991.jpg";
$.each(val,function(i,n){
console.log(i%2);
console.log(n.desc);
if(i%2 ==0){
temp = i;
$("#listTemplate3").append('<tr id=tr'+i+'>'
+ '<td id=\"template\">'
+ '<a><img id=\"image22\" class=\"img-rounded img-responsive center-block\" src='
+ n.img
+ " οnclick='onOk(\""
+ url
+ "\")'></a>"
+ '<div id=\"div15\" class=\"text text-center\">'
+ '<h4 id=\"h43\" class=\"text-white\">'
+ n.desc
+ '</h4>'
+ '<h5 id=\"h51\" class="text-white">'
+ n.name
+ '</h5>'
+ '<h5 id="h54" class="text-danger">'
+ n.price
+ '</h5>'
+ '</div>'
+ '</td>'
+ '</tr>')
}else{
var row = $("#template").clone();
row.find("#image22").attr("src",n.img);
row.find("#h43").text(n.desc);
row.find("#h51").text(n.name);
row.find("#h54").text(n.price);
row.appendTo("#tr"+temp);
}
});
})
function onOk(url){
window.location.href = url;
}
2、myeclipse与mysql连接
先下载mysql的安装包（下载5.5的比较靠谱，我下载的5.7的缺my-default.ini文件及data文件夹，点开闪退，各种问题）
安装过程设置用户名root，密码123456，字符集utf8，一路next，完成之后，在开始-所有程序找到mysql->mysql 5.5 command line client,
输入密码，创建数据库create database student；选择使用的数据库 use student;创建表，插入数据
在myeclipse上找到window->open perspective->DB browser,在DB Browser界面新建，弹出一个对话框配置，driver name 选择MYSQL相关的，名字随便取，URL为jdbc:mysql://localhost:3306/数据库名
user为root，password为123456，下面选择com.mysql.jdbc.Driver，然后进行test driver，测试成功就OK，finish后会出现你数据库里面的表
代码连接数据库：
package com.jianzhi.education;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
public class DBUtils {
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/education?useUnicode=true&characterEncoding=utf-8";
private static final String USER = "root";
private static final String PASSWORD = "123456";
public static void getConnect(){
try{
Class.forName(DRIVER);
Connection conn = DriverManager.getConnection(URL, USER, PASSWORD);
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from teacher");
while(rs.next()){
System.out.println(rs.getString(1)+rs.getString(3));
}
}catch(Exception e){
e.printStackTrace();
}
}
}
中间出了一个错误：找不到Class.forName，是因为我jar包没导进去，在src目录下新建一个libs文件夹，将mysql-connector-java-5.1.35-bin.jar拷贝到libs文件夹下
右键jar文件->build path -> add to build path,目录结构里就会出现Referenced Libraries文件夹，里面有mysql-connector-java-5.1.35-bin.jar
再右键运行项目->run as->java application,运行成功。
数据库各种乱码解决：
数据库设置如下：
mysql> show variables like 'character%';
+--------------------------+----------------------------
-----+
| Variable_name | Value
|
+--------------------------+----------------------------
-----+
| character_set_client | gb2312
|
| character_set_connection | gb2312
|
| character_set_database | latin1
|
| character_set_filesystem | binary
|
| character_set_results | gb2312
|
| character_set_server | utf8
|
| character_set_system | utf8
|
| character_sets_dir | C:\Program Files\MySQL\MySQ
my.ini文件设置：
default-character-set=gb2312
character-set-server=utf8
myeclipse设置：
window->preference->general->workspace->text file encoding->other:utf-8
设置好后重启myeclipse，重启mysql
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="com.jianzhi.education.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./loaddata.js"></script>
<link rel="stylesheet" type="text/css" href="./css/my.css">
</head>
<body>
This is my JSP page. <br>
<% String rs = JavaMethod.getStr();
System.out.println("rs="+rs);%>
<table class="table x-noborder iSale" component="$UI/system/components/bootstrap/table/table"
id="table4">
<tbody class="x-list-template" id="listTemplate3">
<!-- <tr id="tr4" colspan="2">
<td id="template">
<a><img alt="" id="image22"
class="img-rounded img-responsive center-block" src="./img/one.jpg"/ οnclick="onOk()"></a>
<div id="div15" class="text text-center">
<h4 id="h43" class="text-white">限时秒杀</h4>
<h5 id="h51" class="text-white">长城</h5>
<h5 id="h54" class="text-danger">￥2922</h5>
</div>
</td>
</tr> -->
</tbody>
</table>
</body>
</html>
定义的CSS以及引用的JS文件：
$(function(){
var val = [{"desc":"易连恺和秦桑",
"name":"人生若如初相见",
"price":123,
"img":"./img/two.jpg"},
{"desc":"易连恺",
"name":"人生若如初相见",
"price":123,
"img":"./img/four.jpg"},
{"desc":"秦桑",
"name":"人生若如初相见",
"price":123,
"img":"./img/one.jpg"},
{"desc":"秦桑",
"name":"人生若如初相见",
"price":123,
"img":"./img/three.jpg"},
];
var temp = 0;
var url = "http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-06/19/232372-201706191929238991.jpg";
$.each(val,function(i,n){
console.log(i%2);
console.log(n.desc);
if(i%2 ==0){
temp = i;
$("#listTemplate3").append('<tr id=tr'+i+'>'
+ '<td id=\"template\">'
+ '<a><img id=\"image22\" class=\"img-rounded img-responsive center-block\" src='
+ n.img
+ " οnclick='onOk(\""
+ url
+ "\")'></a>"
+ '<div id=\"div15\" class=\"text text-center\">'
+ '<h4 id=\"h43\" class=\"text-white\">'
+ n.desc
+ '</h4>'
+ '<h5 id=\"h51\" class="text-white">'
+ n.name
+ '</h5>'
+ '<h5 id="h54" class="text-danger">'
+ n.price
+ '</h5>'
+ '</div>'
+ '</td>'
+ '</tr>')
}else{
var row = $("#template").clone();
row.find("#image22").attr("src",n.img);
row.find("#h43").text(n.desc);
row.find("#h51").text(n.name);
row.find("#h54").text(n.price);
row.appendTo("#tr"+temp);
}
});
})
function onOk(url){
window.location.href = url;
}
2、myeclipse与mysql连接
先下载mysql的安装包（下载5.5的比较靠谱，我下载的5.7的缺my-default.ini文件及data文件夹，点开闪退，各种问题）
安装过程设置用户名root，密码123456，字符集utf8，一路next，完成之后，在开始-所有程序找到mysql->mysql 5.5 command line client,
输入密码，创建数据库create database student；选择使用的数据库 use student;创建表，插入数据
在myeclipse上找到window->open perspective->DB browser,在DB Browser界面新建，弹出一个对话框配置，driver name 选择MYSQL相关的，名字随便取，URL为jdbc:mysql://localhost:3306/数据库名
user为root，password为123456，下面选择com.mysql.jdbc.Driver，然后进行test driver，测试成功就OK，finish后会出现你数据库里面的表
代码连接数据库：
package com.jianzhi.education;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
public class DBUtils {
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/education?useUnicode=true&characterEncoding=utf-8";
private static final String USER = "root";
private static final String PASSWORD = "123456";
public static void getConnect(){
try{
Class.forName(DRIVER);
Connection conn = DriverManager.getConnection(URL, USER, PASSWORD);
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from teacher");
while(rs.next()){
System.out.println(rs.getString(1)+rs.getString(3));
}
}catch(Exception e){
e.printStackTrace();
}
}
}
中间出了一个错误：找不到Class.forName，是因为我jar包没导进去，在src目录下新建一个libs文件夹，将mysql-connector-java-5.1.35-bin.jar拷贝到libs文件夹下
右键jar文件->build path -> add to build path,目录结构里就会出现Referenced Libraries文件夹，里面有mysql-connector-java-5.1.35-bin.jar
再右键运行项目->run as->java application,运行成功。
数据库各种乱码解决：
数据库设置如下：
mysql> show variables like 'character%';
+--------------------------+----------------------------
-----+
| Variable_name | Value
|
+--------------------------+----------------------------
-----+
| character_set_client | gb2312
|
| character_set_connection | gb2312
|
| character_set_database | latin1
|
| character_set_filesystem | binary
|
| character_set_results | gb2312
|
| character_set_server | utf8
|
| character_set_system | utf8
|
| character_sets_dir | C:\Program Files\MySQL\MySQ
my.ini文件设置：
default-character-set=gb2312
character-set-server=utf8
myeclipse设置：
window->preference->general->workspace->text file encoding->other:utf-8
设置好后重启myeclipse，重启mysql
1840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
