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表中,最后重定向到列表頁面。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM