javaweb-web核心

Posted 2022-01-28 可能自洽

javaweb-web核心

一、用户登录注册案例

1.创建项目

1.1 选择骨架

1.2 request-demo

1.3 核对信息

2.准备工作

2.1 删除不需要的

2.2 添加缺失的目录 Directory

2.3 在 pom.xml 里导入 tomcat 插件，导入servlet、mybatis、mysql-connector依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>request-demo</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>request-demo Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.8</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.25</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>
</project>

2.4 在 webapp 下创建一些静态页面

2.5 idea 连接数据库并初始化表

-- 创建用户表
CREATE TABLE tb_user
(
    id       int primary key auto_increment,
    username varchar(20) unique,
    password varchar(32)
);

-- 添加数据
INSERT INTO tb_user(username, password)
values ('zhangsan', '123'),
       ('lisi', '234');

SELECT *
FROM tb_user;

2.6 写 User 类

package pojo;

public class User 

    private Integer id;
    private String username;
    private String password;

    public Integer getId() 
        return id;
    

    public void setId(Integer id) 
        this.id = id;
    

    public String getUsername() 
        return username;
    

    public void setUsername(String username) 
        this.username = username;
    

    public String getPassword() 
        return password;
    

    public void setPassword(String password) 
        this.password = password;
    

    @Override
    public String toString() 
        return "User" +
                "id=" + id +
                ", username='" + username + '\\'' +
                ", password='" + password + '\\'' +
                '';
    

2.7 核心配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///my_db?useSSL=false&amp;useServerPrepStmts=true"/>
                <property name="username" value="root"/>
                <property name="password" value="0000"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="mapper"/>
    </mappers>
</configuration>

2.8 创建 UserMapper 接口和 UserMapper.xml

package mapper;

import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import pojo.User;

public interface UserMapper 

    // 根据用户名和密码查询用户对象
    // 这里sql语句比较简单，采用注解开发
    // 注意这里要加上 @Param("") 取值要和 # 大括号里的值一致
    @Select("select * from tb_user where username=#username and password=#password")
    User select(@Param("username") String username, @Param("password") String password);

    // 根据用户名查询用户对象
    @Select("select * from tb_user where username=#username")
    User selectByUserName(@Param("username") String username);

    // 添加用户
    // id设置为null，之后会自动增
    @Insert("insert into tb_user values(null,#username,#password) ")
    void add(User user);

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mapper.UserMapper">

</mapper>

3.开始页面编码

3.0 工具类

代码重复:使用工具类解决
SqISessionFactory工厂只创建一次， 不要重复创建:使用静态代码块

package util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils 
    private static SqlSessionFactory sqlSessionFactory;

    static 
        //静态代码块会随者类的加载而自动执行，且只执行次
        try 
            String resource = "mybatis-config.xmL";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
         catch (IOException e) 
            e.printStackTrace();
        
    

    public static SqlSessionFactory getSqlSessionFactory() 
        return sqlSessionFactory;
    

3.1 登录页面

(1) 编写静态页面

Desert.jpg

login.css

* 
    margin: 0;
    padding: 0;


html 
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: url(../imgs/Desert.jpg) no-repeat 0px 0px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;


body 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;


#loginDiv 
    width: 37%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: rgba(75, 81, 95, 0.3);
    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
    border-radius: 5px;


#name_trip 
    margin-left: 50px;
    color: red;


p 
    margin-top: 30px;
    margin-left: 20px;
    color: azure;


input 
    margin-left: 15px;
    border-radius: 5px;
    border-style: hidden;
    height: 30px;
    width: 140px;
    background-color: rgba(216, 191, 216, 0.5);
    outline: none;
    color: #f0edf3;
    padding-left: 10px;


#username 
    width: 200px;


#password 
    width: 202px;


.button 
    border-color: cornsilk;
    background-color: rgba(100, 149, 237, .7);
    color: aliceblue;
    border-style: hidden;
    border-radius: 5px;
    width: 100px;
    height: 31px;
    font-size: 16px;


#subDiv 
    text-align: center;
    margin-top: 30px;


#loginMsg 
    text-align: center;
    color: aliceblue;

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
</head>

<body>
<div id="loginDiv">
    <form action="/request-demo/loginServlet" id="form">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p>Username:<input id="username" name="username" type="text"></p>

        <p>Password:<input id="password" name="password" type="password"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
            <a href="register.html">没有账号？点击注册</a>
        </div>
    </form>
</div>

</body>
</html>

(2) 创建一个 LoginServlet

package web;

import mapper.UserMapper;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import pojo.User;
import util.SqlSessionFactoryUtils;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter以上是关于javaweb-web核心的主要内容，如果未能解决你的问题，请参考以下文章
 
 Spring启动核心流程
 核心期刊论文需要注意些啥?
 Rpa的三大核心技术是啥？
 Spring核心接口是？
 使用 MKMapView、核心位置和核心数据
 CMS 中的核心模块和非核心模块有啥区别