Web前端(十)-利用IDEA结合mysql和html实现用户登录和注册、实现员工管理系统

BMI身体指数练习

  • BMI= 体重/(身高*身高) 体重(公斤) 身高(米)

    • 举例: 身高1米8 体重80公斤 bmi= 80/(1.8*1.8)

  • bmi 小于18.5 偏瘦 18.5-24正常 24-28偏胖 大于28 需要减肥了

  1. 创建boot2-1工程, 11改成8, SpringWeb打钩

  2. 在static里面创建bmi.html页面,页面中添加form表单,提交地址为/bmi,表单中两个文本框,name分别为身高h和体重w,最后一个提交按钮

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>BMI身体指数</title>
 </head>
 <body>
 <h3>测试BMI身体指数</h3>
 <form action="/bmi">
     <input type="text" name="height" placeholder="请输入身高(单位:m)">
     <input type="text" name="weight" placeholder="请输入体重(单位:kg)">
     <input type="submit" value="开始测试">
 </form>
 </body>
 </html>
  1. 创建controller包,并且在里面创建BMIController,添加Controller注解,在类中添加bmi方法处理路径为/bmi,获取传递过来的身高和体重,利用上面的公式得到bmi值,根据上面的范围给客户端返回对应的提示信息

 package com.example.boot21.controller;
 
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 @Controller
 public class BMIController {
    @RequestMapping("/bmi")
    @ResponseBody   //以返回值的方式给客户端响应数据
    public String bmi(float height,float weight){
        System.out.println("height = " + height + ", weight = " + weight);
        //计算bmi
        float bmi = weight/(height*height);
        if(bmi<18.5){
             return "偏瘦";
         }else if (bmi<24){
            return "正常";
        }else if(bmi<28){
             return "偏胖";
         }
         return "该锻炼了";
     }
 
 }

 

创建数据库以及用户表

 create database bootdb charset=utf8;
 use bootdb;
 create table user(id int primary key auto_increment,username varchar(50),password varchar(50),nick varchar(50),age int)charset=utf8;

 

工程中使用数据库需要做以下两件事

  1. 在pom.xml文件中添加数据库相关的两个依赖

     <!-- 连接MySQL数据库的依赖 -->
     <dependency>
         <groupId>mysql</groupId>
         <artifactId>mysql-connector-java</artifactId>
         <version>8.0.15</version>
     </dependency>
     <!-- 数据库连接池 -->
     <dependency>
         <groupId>com.alibaba</groupId>
         <artifactId>druid</artifactId>
         <version>1.1.21</version>
     </dependency>
  2. 在工程中创建utils包把之前jdbc工程中的数据库工具类DBUtils.java复制过来

 package com.example.boot21.utils;
 
 import com.alibaba.druid.pool.DruidDataSource;
 
 import java.sql.Connection;
 import java.sql.SQLException;
 
 public class DBUtils {
     private static DruidDataSource dds;
     static {
         //创建数据库连接池对象
         dds = new DruidDataSource();
         dds.setDriverClassName("com.mysql.cj.jdbc.Driver");
         //设置数据库连接信息
         dds.setUrl("jdbc:mysql://localhost:3306/bootdb?" +
                 "characterEncoding=utf8&" +
                 "serverTimezone=Asia/Shanghai");
         dds.setUsername("root");
         dds.setPassword("root");
         dds.setInitialSize(3);//设置初始连接数量
         dds.setMaxActive(5);//设置最大连接数量
    }
 
     /**
      * 封装获取连接方法
      */
     public static Connection getConn() throws SQLException {
         //从连接池中获取连接 异常抛出
         Connection conn = dds.getConnection();
         System.out.println(conn);
         return conn;
    }
 }
 

 

错误码500

  如果浏览器中显示错误码500,是因为执行业务代码的过程中出的错,错误原因需要从idea控制台中的提示信息查找。

 

登录功能

  1. 创建login.html页面

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>登录页面</title>
     </head>
     <body>
     <h3>登录页面</h3>
     <form action="/login">
         <input type="text" name="username" placeholder="用户名">
         <input type="password" name="password" placeholder="密码">
         <input type="submit" value="登录">
     </form>
     </body>
     </html>
  2. 在UserController里面

 package com.example.boot21.controller;
 
 import com.example.boot21.entity.User;
 import com.example.boot21.utils.DBUtils;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.sql.Connection;
 import java.sql.PreparedStatement;
 import java.sql.ResultSet;
 import java.sql.SQLException;
 
 @Controller
 public class UserController {
 
     @RequestMapping("/reg")
     @ResponseBody
     public String reg(User user){
         System.out.println("user = " + user);
         //获取连接
         try(Connection conn = DBUtils.getConn();){
             //要执行的SQL语句 ????占位符在下面进行设置,避免SQL注入
             String sql = "insert into user values(null,?,?,?,?)";
             //创建执行SQL执行的对象
             PreparedStatement ps = conn.prepareStatement(sql);
             ps.setString(1,user.getUsername());
             ps.setString(2,user.getPassword());
             ps.setString(3,user.getNick());
             System.out.println(user.getAge());
             ps.setInt(4,user.getAge());
             //执行SQL语句
             ps.executeUpdate();
 
        } catch (SQLException e) {
             e.printStackTrace();
        }
         return "注册成功!";
    }
 
     @RequestMapping("/login")
     @ResponseBody
     public String login(User user){
         System.out.println("user = " + user);
         //获取连接
         try(Connection conn = DBUtils.getConn();){
             //要执行的SQL语句: 通过用户名查询对应的密码
             String sql = "select password from user where username=?";
             //创建执行SQL执行的对象
             PreparedStatement ps = conn.prepareStatement(sql);
             ps.setString(1,user.getUsername());
             //执行SQL语句
             ResultSet rs = ps.executeQuery();
             //判断是否有查询到数据,进入方法说明查询到了用户
             if(rs.next()){
                 //pw代表数据库中的密码
                 String pw = rs.getString(1);
                 //user.getPassword()这是用户输入的密码
                 if(pw.equals(user.getPassword())){
                     return "登录成功!";
                }
                 return "密码错误!";
            }
        } catch (SQLException e) {
             e.printStackTrace();
        }
         return "用户名不存在";
    }
 }
 

 

第二遍注册和登录

  1. 创建工程boot2-1-1

  2. 在pom.xml中添加数据库相关两个依赖

  3. 在static里面添加 reg.html和login.html(从上一个工程中复制过来) 每次复制新文件到工程 ReBuild一下工程

  4. 创建utils包 把刚才工程中DBUtils复制到包下

  5. 创建entity包下的User实体类

  6. 创建controller包下的UserController 在里面实现注册登录业务

 

员工管理系统

  • 创建表

     use bootdb;
     create table emp(id int primary key auto_Increment,name varchar(50),salary int,job varchar(50))charset=utf8;

具体步骤:

  1. 创建boot2-3工程

  2. 在pom.xml中添加数据库相关两个依赖:连接MySQL数据库的依赖、druid数据库连接池

  3. 创建utils包,把DBUtils类从之前工程中复制过来(注意端口号)

  4. 创建index.html页面,里面添加3个超链接:添加员工、显示员工列表和修改员工信息

  5. 创建add.html页面,里面有form表单,提交地址为/add,新建输入框:name、salary、job、添加按钮。创建entity包,包下新建类Emp,定义属性:id、name、salary、job,添加get、set、toString()方法。创建controller包,包下新建类EmpController,在EmpController里面添加add方法处理/add请求,将接收到的参数封装到Emp对象中,通过jdbc代码把数据保存到emp表中,给客户端返回添加成功!

  6. 在EmpController中添加select方法,处理路径为/select,在方法中通过jdbc代码查询到所有员工信息,并且封装到Emp对象中,把对象添加到一个list集合中保存,最后面遍历list集合,拼接出html页面响应给客户端。

  7. 在EmpController中添加delete方法,处理路径为/delete,参数列表中接收传递过来的id,方法中通过jdbc代码删除id对应的数据,最后重定向到列表页面。

  8. 创建update.html页面,里面form表单提交地址为/update,创建输入框:id、name、salary、job、修改按钮,在EmpController中添加update方法处理路径为/update,接收到的参数封装到emp对象中,方法中通过jdbc代码把emp对象中的数据修改到emp表中,最后重定向到列表页面。

 

posted @ 2021-08-05 22:08  Coder_Cui  阅读(2161)  评论(0编辑  收藏  举报