【知了堂项目实训】utovr 后台管理系统

本贴最后更新于 1944 天前,其中的信息可能已经事过景迁

1. MVC 模型

1.1 定义

MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC 被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。(来源:百度百科)

  • View:视图,展示数据(前台技术)
  • Controller:控制器,完成接收用户的请求,根据用户请求去调度后台的程序,然后响应数据给前端。请求 Request/响应 Response
  • Model:数据模型,用户想看到的数据用程序封装起来

图解如下(图片来源于百度百科)
MVC 模型图

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 的驱动包。
  1. 配置连接数据库相关的参数:用户名,密码,地址,驱动程序类
  2. 加载驱动程序类 Class.forName(...)
  3. 建立连接 Connection
  4. 执行 SQL 语句 PrepareStatement
  5. 返回结果集
  6. 关闭连接 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 = 异步 JavaScriptXML标准通用标记语言的子集)。
  • 异步的无数据刷新技术
  • 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 网页通过 JavaScript 发送请求给服务器,然后服务器处理结束后将数据返回给 JavaScript,最后通过 JavaScript 来将数据显示到网页里面。

图解如下(图片来源于百度百科)
Ajax 图

//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- -> 前端网页

  1. Dao 层获取数据库数据
  2. Service 层引入 dao 中的方法
  3. Servlet 层中用户信息列表的数据发送
  4. 利用 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('数据添加成功');
                }
            }
        });
    });

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...