1. MVC 模型
1.1 定义
MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC 被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。（来源：百度百科）
- View：视图，展示数据（前台技术）
- Controller：控制器，完成接收用户的请求，根据用户请求去调度后台的程序，然后响应数据给前端。请求 Request/响应 Response
- Model：数据模型，用户想看到的数据用程序封装起来
图解如下（图片来源于百度百科）
MVC 会经历两个流程：请求 + 响应
请求的流程：网页 → Controller → UserService → UserDao
响应的流程：UserDao → UserService → Controller → 网页
采用数据的响应方式是 ajax
1.2 分层思维（以登陆功能为例）
代码实现分层思维：
1.3 B/S 程序
B/S(Browser/Server,浏览器/服务器模式)：通过浏览器去找后台的 Java 程序，浏览器里输入地址。
2. JDBC 技术
2.1 简介
JDBC（Java DataBase Connectivity,java 数据库连接），它是一个利用 Java 程序来访问数据库，并能够操作数据库的技术。简单地说，JDBC 可做三件事：与数据库建立连接、发送 操作数据库的语句并处理结果。
2.2 开发步骤
需要重点关注的几个接口：Connection，Statement，ResultSet，PreparedStatement；注意要导入 MySQL 的驱动包。
- 配置连接数据库相关的参数：用户名，密码，地址，驱动程序类
- 加载驱动程序类 Class.forName(...)
- 建立连接 Connection
- 执行 SQL 语句 PrepareStatement
- 返回结果集
- 关闭连接 conn.close()
2.3 JDBC 程序测试过程
注意导入相应的包
//配置连接数据库相关的参数
public class TestJdbc {
String username = "root"; //用户名
String password = "1234"; //密码
String url = "jdbc:mysql://localhost:3306/student"; //地址
String driver ="com.mysql.jdbc.Driver"; //驱动程序类
//加载驱动程序类
{
try{
Class.forName(driver); //加载驱动
} catch(ClassNotFoundException e){ //捕获异常
e.printStackTrace();
}
}
/* 做测试看是否连接成功：查看连接数据库名称和版本号
* 点击m01方法名+run as junit test，即可执行方法
* 若在junit窗口出现MySQL版本号信息，则连接成功
*/
@Test
public void m01() throws SQLException{
Connection conn = DriverManager.getConnection(url,username,password);
DatabaseMetaData dmd = conn.getMetaData();
String name = dmd.getDatabaseProductName();
String version = dmd.getDatabaseProductVersion();
System.out.println(name+" "+version);
}
}
2.4 利用 JDBC 技术实现增删改查
#对学生表进行数据添加操作
@Test
public void m02() throws SQLException{
Connection conn = DriverManager.getConnection(url,username,password); //建立链接
String sql = "insert into student values(?,?)"; //向学生表添加数据，？站位
PreparedStatement ps = conn.prepareStatement(sql); //对即将执行的SQL语句进行预编译
ps.setInt(1, 1002); //1代表第一个？，1002代表？的值
ps.setString(2, "小红");
int i = ps.executeUpdate(); //执行数据更新操作(增删改)，语法结构类似Array.push()
System.out.println("i = "+i); //返回值为1或0，1代表插入成功，0代表插入失败
conn.close(); //关闭连接
}
#对学生表进行数据删除操作
@Test
public void m03() throws SQLException{
Connection conn = DriverManager.getConnection(url,username,password);
String sql1 = "delete from student where (son=1002) "; //通过id删除某一条数据
PreparedStatement ps = conn.prepareStatement(sql1); //对即将执行的SQL语句进行预编译
int i = ps.executeUpdate();
System.out.println("i = "+i); //返回值为1或0，1代表插入成功，0代表插入失败
conn.close();
}
#对学生表进行数据修改操作
@Test
public void m04() throws SQLException{
Connection conn = DriverManager.getConnection(url,username,password);
String sql2 = "update student SET sname='小张' where (son=1001) ";
PreparedStatement ps = conn.prepareStatement(sql2); //对即将执行的SQL语句进行预编译
int i = ps.executeUpdate();
System.out.println("i = "+i); //返回值为1或0，1代表插入成功，0代表插入失败
conn.close();
}
#对学生表进行数据查询操作
@Test
public void m05() throws SQLException{
Connection conn = DriverManager.getConnection(url,username,password);
String sql3 = "select *from student";
PreparedStatement ps = conn.prepareStatement(sql3); //对即将执行的SQL语句进行预编译
ResultSet rs = ps.executeQuery(); //执行查询并返回结果
while(rs.next()){ //循环向下移动，同时rs.next()返回布尔类型
//注意：只有布尔类型才能用到循环条件里面
int son = rs.getInt("son"); //获得值
String sname = rs.getString("sname"); //必须让java数据类型与数据库数据类型匹配
System.out.println(son+" "+sname);
}
conn.close();
}
3. Ajax 技术
3.1 Ajax 简介
- Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
- 异步的无数据刷新技术
- 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 网页通过 JavaScript 发送请求给服务器，然后服务器处理结束后将数据返回给 JavaScript，最后通过 JavaScript 来将数据显示到网页里面。
图解如下（图片来源于百度百科）
//ajax()方法的部分参数
$(document).ready(function () { //在页面内容都加载完后再执行以下代码
$.ajax({
url:'', //发送请求的地址
type:'', //请求方式 post或get
dataType:'', //预期服务器返回的数据类型
async:false, //默认值为ture，即所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
data:{ }, //发送到服务器的数据，将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
success:function () {
//请求成功执行函数
},
error:function (){
//请求失败执行函数
},
complete:function(){
//请求完成后回调函数(请求成功或失败之后均调用)
}
});
})
4.登陆功能的实现
登陆流程图：
4.1 搭建登陆界面
- 导入前端界面中 CSS,JS,图片素材
- 导入路径：WebContent(zui：开源 HTML5 跨屏框架)
4.2 制作后台的请求地址
1.制作一个后台的请求地址，它代表后台的 Java 程序。
2.请求的地址（URL）编写到哪个地方：
- HTML 的表单里面，<form action="地址" method="post">
- Servlet 后端处理登陆请求的程序，也需要配置 URL，并且要和表单里的 URL 一致
3.如果网页报错：HTTP 404 错误，则代表后端请求地址不对，或者是找不到后台程序
4.HTTP 请求方式：GET 和 POST 请求
- POST 请求一般是登陆，注册的表单数据发送，大数据文件上传
- GET 请求一般是网页中超链接请求
- POST 请求数据具备一定的安全性
5.获取表单里面提交的数据
- HttpServletRequest 接口作用：代表网页发送的请求，且里面装有网页发送过来的数据
- String getParameter(String name):获取网页中的数据（参数），通俗讲就是将网页里面的数据放到 java 程序里面
4.3 前端数据校验
解决方法：JS 正则表达式
window.onload = function() { // 监听：网页元素全部加载完成后再执行以下代码
var email = document.getElementById("email"); //获取email输入框中的值
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮箱验证的正则表达式
var form = document.getElementById("form");
var flag = false; // 全局变量
email.onchange = function() {
flag = reg.test(email.value);
if(flag) { // 正确的邮箱地址
email.style.borderColor = "green";
email.style.borderWidth = "1px";
email.style.borderStyle = "solid";
} else { // 错误的邮箱地址
email.style.borderColor = "red";
email.style.borderWidth = "1px";
email.style.borderStyle = "solid";
}
}
}
4.4 将页面数据发送给后台
View - ->Servlet (login.html 发送登录请求，请求方式是 post)
public class UserServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8"); // 解决中文乱码的问题
String email = req.getParameter("email"); // 变量 代表获取用户填写的邮箱地址
String password = req.getParameter("password");
}
}
Servlet - ->Service
public class UserService {
private UserDao userDao = new UserDao();
/**
* 登录业务功能代码
* 返回值: 1 和 0
* 数字1代表此用户账号和密码在数据库存在
* 数字0代表用户的账号和密码不存在
* @param email
* @param password
* @return
* @throws SQLException
*/
public int login(String email, String password) throws SQLException {
return 0;
}
}
Service - ->Dao
public int login(String email, String password) throws SQLException {
}
4.5 后台数据校验
在数据库中查找是否有对应的账号信息，若有则返回 1，若无则返回 0
public class UserDao {
String username = "root";
String pass = "1234";
String url = "jdbc:mysql://localhost:3306/utovr";
String driver = "com.mysql.jdbc.Driver";
public UserDao() {
try {
Class.forName(driver); // 加载驱动
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
/**
* 用户登录的数据库操作
* @param email
* @param password
* @return
* @throws SQLException
*/
public int login(String email, String password) throws SQLException {
String sql = "SELECT COUNT(user_id) FROM utovr_user WHERE user_email = ? AND user_password = MD5(?);"; // sql语句作用：查找数据库中的email和password值，若存在且对应则返回1
Connection conn = DriverManager.getConnection(url, username, pass); // 建立连接
PreparedStatement ps = conn.prepareStatement(sql); // 预编译
ps.setString(1, email); // 把方法里面参数赋值给SQL语句
ps.setString(2, password); // 把方法里面的参数赋值给SQL语句
ResultSet rs = ps.executeQuery(); // 执行查询语句
int i = 0;
if(rs.next()) {
i = rs.getInt(1); // 获取查询结果的第1列数据
}
conn.close(); // 关闭连接
return i;
}
4.6 返回校验结果实现页面跳转
Dao - -> Service
public class UserService {
private UserDao userDao = new UserDao(); //使用另一个类写的代码，则必须new一个对象
/**
* 登录业务功能代码
* 返回值: 1 和 0
* 数字1代表此用户账号和密码在数据库存在
* 数字0代表用户的账号和密码不存在
* @param email
* @param password
* @return
* @throws SQLException
*/
public int login(String email, String password) throws SQLException {
return userDao.login(email, password); //返回userDao类中login方法的值
}
}
Service - -> Servlet
public class UserServlet extends HttpServlet {
private UserService us = new UserService(); // 使用另一个类写的代码，则必须new一个对象
/**
* 登录功能
* @param req
* @param resp
* @throws IOException
* @throws ServletException
*/
public void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8"); // 解决中文乱码的问题
String email = req.getParameter("email"); // 变量 代表获取用户填写的邮箱地址（页面里面）
String password = req.getParameter("password");
int i = 0;
try {
i = us.login(email, password); //获取userService类中login方法的值
} catch (SQLException e) {
e.printStackTrace();
}
if(i == 1) {
// 页面的跳转
req.getRequestDispatcher("/WEB-INF/jsp/index.jsp").forward(req, resp);
} else {
// 账号和密码不正确时
System.out.println("Error....");
}
}
}
5. 用户管理界面的增删改查
5.1 显示用户数据到页面
打通 Dao- ->Service- ->Servlet- -> 前端网页
- Dao 层获取数据库数据
- Service 层引入 dao 中的方法
- Servlet 层中用户信息列表的数据发送
- 利用 Ajax 将数据显示到网页
// 将数据库中数据渲染到页面表格中
$.ajax({
url: 'user?method=listUser', //地址
type: 'GET', //请求方式
success: function(data) {
$("#usertable > tbody").empty(); // 清空以后的数据
$.each(data, function(i, n) { //遍历，i为索引，n为值
msg = "<tr>";
msg += '<td class="text-center"><input type="checkbox" name="checkbox"></td>';
msg += '<td class="text-center">'+ n.user_id +'</td>';
msg += '<td>'+ n.user_name +'</td>';
msg += '<td>'+ n.user_email +'</td>';
msg += '<td class="text-center">*************</td>';
msg += '<td class="text-center">';
msg += '<div class="btn-group">';
msg += '<button type="button" class="btn btn-xs '+ (n.user_status == 1 ? "btn-primary" : "") +'">启用</button>';
msg += '<button type="button" class="btn btn-xs '+ (n.user_status == 0 ? "btn-danger" : "") +'">禁用</button>';
msg += '</div>';
msg += '</td>';
msg += '<td class="text-center">'+ n.user_register_time +'</td>';
msg += '<td class="text-center"><a href="user?method=pageRedirect&page=update&user_id='+n.user_id+'&user_name='+n.user_name+'&user_email='+n.user_email+'&user_password='+n.user_password+'" class="btn btn-sm btn-success"><i class="icon-edit"></i> 编辑</a><button type="button" class="btn btn-sm btn-danger" onclick="deleteUser('+ n.user_id +',this)"><i class="icon-trash"></i> 删除</button></td>';
msg += "</tr>";
$("#usertable > tbody").append(msg); //在div里添加msg变量
});
},
dataType: 'json' //数据类型
});
5.2 删除用户数据
Ajax 代码
// 触发删除用户事件
function deleteUser(user_id, obj) {
// ajax操作
$.ajax({
url: 'user?method=deleteUser&user_id='+user_id,
type: 'GET',
success: function(data) {
if(data == "ok") {
$(obj).parent().parent().empty(); //删除数据
}
},
dataType: 'json'
});
}
5.3 添加用户数据
Ajax 代码
$("#user_submit").click(function() { //点击添加按钮执行函数
// 获取值
var user_name = $("#user_name").val();
var user_status = $("#user_status").val();
// Ajax的提交
$.ajax({
url: 'user', //地址
type: 'POST', //请求方式
data: {'method':'addUser','user_name':user_name,'user_status':user_status}, //添加的数据
dataType: 'json', //数据格式
success: function(data) { //请求成功执行函数
if(data == 1) {
window.alert('数据添加成功');
}
}
});
});
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于