家具网购项目实现01

1.项目开发环境搭建

创建一个web项目，添加需要的jar包（暂不使用Maven）

依照5.1的表格来创建项目的大体分层：

2.功能01-搭建前端页面

2.1需求分析/图解

2.2思路分析

略

2.3代码实现

  1. 将前端人员给的静态页面拷贝到web目录下即可

    资源详见：https://github.com/liyuelian/furniture_mall.git

  2. 配置Tomcat


  3. 点击Rebuild Pproject，让项目能识别新拷贝的资源。

  4. 启动Tomcat（启动过后一定要保证out目录下有拷贝进来的资源）


2.4完成测试

在浏览器访问项目首页http://localhost:8080/furniture_mall/

3.功能02-会员注册前端js校验

3.1需求分析/图解

需求如下：

  1. 验证用户名，必须由字母、数字、下划线组成，并且长度为6到10位
  2. 验证密码，必须由字母、数字、下划线组成，并且长度为6到10位
  3. 邮箱格式验证：常规验证即可
  4. 验证码：后面实现

3.2思路分析

  1. 使用jquery+正则表达式即可
  2. 绑定事件，按要求验证，如果有错误，给出提示信息（不要用弹窗）

3.3代码实现

web/views/member/login.html

仅展示部分代码，详细代码请看https://github.com/liyuelian/furniture_mall.git

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge"/>

    <title>家居网购</title>

    <!--这里先使用相对路径，后面再修改，使用base-->

    <!--引入jquery-->

    <script type="text/javascript" src="../../script/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        $(function () {//页面加载完毕后执行的function

            //直接在页面的structure结构中找到对应的注册接口==>id="sub-btn"

            //ctrl+home 定位到页面最上方

            //ctrl+end 定位到页面最下方

            //点击绑定事件

            $("#sub-btn").click(function () {

                //获取用户输入的用户名==>自己看前端给的页面

                var usernameVal = $("#username").val();

                // alert(usernameVal)

                // 编写正则表达式进行验证

                //1. 验证用户名，必须由字母、数字、下划线组成，并且长度为6到10位

                var usernamePattern = /^[\w_]{6,10}$/;

                if (!usernamePattern.test(usernameVal)) {

                    //展示错误提示-属性过滤器

                    $("span[class='errorMsg']").text("用户名格式不对，必须由字母、数字、下划线组成，并且长度为6到10位");

                    return false;//不提交，返回false

                }

                // 2. 验证密码，必须由字母、数字、下划线组成，并且长度为6到10位

                var passwordVal = $("#password").val();

                // alert(password)

                var passwordPattern = /^[\w_]{6,10}$/;

                if (!passwordPattern.test(passwordVal)) {

                    //展示错误提示-基本过滤器

                    $("span.errorMsg").text("密码格式不对，必须由字母、数字、下划线组成，并且长度为6到10位");

                    return false;//不提交，返回false

                }

                //3.两次密码要相同

                //得到第二次输入的密码

                var repwdVal = $("#repwd").val();

                if (repwdVal != passwordVal) {

                    //展示错误提示

                    $("span.errorMsg").text("输入的两次密码不相同");

                    return false;//不提交，返回false

                }

                // 4. 邮箱格式验证：常规验证即可

                var emailVal = $("#email").val();

                //在java中转义符为两个\\，在js中转义符为一个\

                var emailPattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

                if (!emailPattern.test(emailVal)) {

                    //展示错误提示

                    $("span.errorMsg").text("邮箱格式不正确");

                    return false;//不提交，返回false

                }

                //如果上面的信息格式都正确，就可以提交表单信息了

                // return true;

                //因为还没有写后台代码，这里暂时使用提示信息表示

                $("span.errorMsg").text("验证通过...");

                return false;

            })

        })

    </script>

</head>

	略

<body>

</body>

</html>

3.4代码测试

4.功能03-会员注册后端

4.1需求分析/图解

  1. 会员注册信息，验证通过后
  2. 提价给服务器，如果用户名在数据库中已经存在，后台给出提示信息，返回重新注册
  3. 如果用户名没有重复，完成注册，并返回注册成功的页面

4.2思路分析-模块框架图

在实际开发中，数据库表和表之间应该避免使用外键，因为外键会让性能下降

4.3代码实现

4.3.1数据库和表格

根据上述分析，应该先创建数据库和表格

-- 创建项目需要的数据库和表

-- 创建数据库furns

CREATE DATABASE furns;

USE furns;

-- 创建用户表格member

CREATE TABLE `member`(

`id` INT PRIMARY KEY AUTO_INCREMENT,

`username` VARCHAR(32) NOT NULL UNIQUE,

`password` VARCHAR(32) NOT NULL,

`email` VARCHAR(64)

)CHARSET utf8 ENGINE INNODB;

-- 插入测试数据

INSERT INTO member (`username`,`password`,`email`)

VALUES('admin',MD5('admin'),'li@qq.com');

SELECT * FROM member;

4.3.2创建entity

注意一定要和数据库表格字段类型对应

package com.li.furns.entity;

/**

 * @author 李

 * @version 1.0

 */

public class Member {

    private Integer id;

    private String username;

    private String password;

    private String email;

    //一定要提供一个无参构造器，底层使用反射创建Member对象时会使用到

    public Member() {

    }

    public Member(Integer id, String username, String password, String email) {

        this.id = id;

        this.username = username;

        this.password = password;

        this.email = email;

    }

    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;

    }

    public String getEmail() {

        return email;

    }

    public void setEmail(String email) {

        this.email = email;

    }

}

4.3.3数据库工具类

详细代码请看https://github.com/liyuelian/furniture_mall.git

  1. JDBCUtilsByDruid.java
  2. druid.properties配置文件
  3. 创建测试类JDBCUtilsByDruidTest

4.3.4DAO

详细代码请看https://github.com/liyuelian/furniture_mall.git

  1. BasicDAO

  2. MemberDAO-接口

  3. MemberDAOImpl-接口实现类

  4. 创建测试类MemberDAOImplTest

4.3.5Service层

详细代码请看https://github.com/liyuelian/furniture_mall.git

  1. MemberService-接口
  2. MemberServiceImpl-接口实现类
  3. 创建测试类MemberServiceImplTest

4.3.6接通WEB层

详细代码请看https://github.com/liyuelian/furniture_mall.git

  1. 创建RegisterServlet，完成注册功能
  2. 在web.xml文件中配置RegisterServlet
  3. 修改了注册界面的表单提交路径，使用base设置固定的参考路径

RegisterServlet：

package com.li.furns.web;

import com.li.furns.entity.Member;

import com.li.furns.service.MemberService;

import com.li.furns.service.impl.MemberServiceImpl;

import javax.servlet.*;

import javax.servlet.http.*;

import java.io.IOException;

public class RegisterServlet extends HttpServlet {

    //定义一个属性MemberService

    private MemberService memberService = new MemberServiceImpl();

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request, response);

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //接收用户注册信息--参数名要以前端页面的变量名为准

        String username = request.getParameter("username");

        String password = request.getParameter("password");

        String email = request.getParameter("email");

        //如果返回false，说明该用户信息可以注册

        if (!memberService.isExistsUsername(username)) {

            //构建一个member对象

            Member member = new Member(null, username, password, email);

            if (memberService.registerMember(member)) {

                //如果注册成功，请求转发到register_ok.html

                request.getRequestDispatcher("/views/member/register_ok.html")

                        .forward(request, response);

            } else {

                //注册失败，请求转发到register_fail.html

                request.getRequestDispatcher("/views/member/register_fail.html")

                        .forward(request, response);

            }

        } else {//否则不能进行注册

            //请求转发到login.html

            //后面可以加入提示信息

            request.getRequestDispatcher("/views/member/login.html")

                    .forward(request, response);

        }

    }

}

4.4代码测试

redeployTomcat，在浏览器访问http://localhost:8080/furniture_mall/views/member/login.html

在注册表单中写入数据，点击注册：

查看数据库，成功插入数据：

day02-功能实现01的更多相关文章

  1. Node.js mm131图片批量下载爬虫1.01 增加断点续传功能

    这里的断点续传不是文件下载时的断点续传,而是指在爬行页面时有时会遇到各种网络中断而从中断前的页面及其数据继续爬行的过程,这个过程和断点续传原理上相似故以此命名.我的具体做法是:在下载出现故障或是图片已 ...

  2. python开发学习-day02(元组、字符串、列表、字典深入)

    s12-20160109-day02 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  3. C#6.0 新增功能

    连载目录    [已更新最新开发文章,点击查看详细] C# 6.0 版本包含许多可提高开发人员工作效率的功能. 这些功能的总体效果是让你编写的代码更简洁.更具可读性. 该语法不像许多常见做法那样繁琐. ...

  4. C#3.0新增功能09 LINQ 标准查询运算符 04 运算

    连载目录    [已更新最新开发文章,点击查看详细] 本篇主要介绍标准查询运算符的常用运算功能. 01 对数据排序 排序操作基于一个或多个属性对序列的元素进行排序. 第一个排序条件对元素执行主要排序. ...

  5. 如何利用快照（ snapshot ）功能快速定位性能问题

    我们常常会遇到这样的困惑,收到用户或者客服的反馈,平台使用有问题,但是测试人员搭建环境后又没办法复现故障,最后导致问题没法解决,眼睁睁地看着用户流失. 这是因为线上生产环境非常复杂.很多时候是偶发性  ...

  6. 201871030138-杨蕊媛 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告

    项目 内容 班级博客链接 https://edu.cnblogs.com/campus/xbsf/2018CST 这个作业要求链接 https://www.cnblogs.com/nwnu-daizh ...

  7. 老男孩Python全栈第2期+课件笔记【高清完整92天整套视频教程】

    点击了解更多Python课程>>> 老男孩Python全栈第2期+课件笔记[高清完整92天整套视频教程] 课程目录 ├─day01-python 全栈开发-基础篇 │ 01 pyth ...

  8. Spring的IOC和AOP之深剖

    今天,既然讲到了Spring 的IOC和AOP,我们就必须要知道 Spring主要是两件事: 1.开发Bean:2.配置Bean.对于Spring框架来说,它要做的,就是根据配置文件来创建bean实例 ...

  9. Tomcat服务器配置以及相关配置文件介绍

    摘自:http://blog.163.com/ny_lonely/blog/static/18892427320136925044357/ context.xml 文件   配置属性说明     用于 ...

  10. 欢迎进入MyKTV前后台点歌系统展示

    一个项目,一分收获:一个项目,一些资源.Ktv项目也是一样的,所以我想分享我的收获,让你们获得你需要的资源. 一. 那MyKTV点歌系统具体的功能有哪些呢?我们就来看看吧! 1.MyKTV前台功能: ...

随机推荐

  1. vscode展示子文件夹

    取消勾选设置-功能-compact Folders

  2. iOS Social和Accounts简单使用

    ACAccountStore *account = [[ACAccountStore alloc] init]; ACAccountType *type = [account accountTypeW ...

  3. vue通过插件实现PDF生成以及下载

    第一步: 安装插件 npm install --save html2canvas //将html转换成图片 npm install jspdf --save //将图片生成pdf 第二步: 在需要的地 ...

  4. 【LeetCode第 313 场周赛】忘光光

    比赛链接 最近不怎么打比赛,不能马上反应过来考察的是什么,全部忘光光了... 6192. 公因子的数目 题意: 给定 \(a\) 和 \(b\),问两者的公因子数量 数据范围:\(1\leq a,b\ ...

  5. core3商城DDD实战（一）建模

    我所在学校部门的一个校园商城项目(学生售卖二手物品与发布悬赏求助等,在线上确认,校园内线下交易) 我们使用DDD的软件开发方法,这是我们进入编程世界上手的第二个项目,从创建仓库到现在已经过去二十多天, ...

  6. VLQ & Base64 VLQ 编码方式的原理及代码实现

    目录 VLQ Base64 VLQ VLQ VLQ (Variable-length quantity)是一种通用的,使用任意位数的二进制来表示一个任意大的数字的一种编码方式. 编码实现: ** 对数 ...

  7. C语言------选择结构

    仅供借鉴.仅供借鉴.仅供借鉴(整理了一下大一C语言每个章节的练习题.没得题目.只有程序了) 文章目录 1 .实训名称 2 .实训目的及要求 3 .源代码及运行截图 4.小结 1 .实训名称 实训4:选 ...

  8. XAF新手入门 - 前言

    很多小伙伴在第一次接触XAF时,会被它的丰富功能及开箱即用的特点所吸引,即使在不了解XAF的情况下,也能够依葫芦画瓢创建一个功能丰富的应用,但当应用到实际项目中时,你会发现与之前的愿景差距很大,很多都 ...

  9. 【lwip】07-链路层收发以太网数据帧源码分析

    目录 前言 7.1 链路层概述 7.2 MAC地址的基本概念 7.3 以太网帧结构 7.4 以太网帧结构 7.5 以太网帧报文数据结构 7.6 发送以太网数据帧 7.7 接收以太网数据帧 7.8 虚拟 ...

  10. 独立按键控制led灯

    #include "regx51.h"typedef unsigned int u16; void delay_us(u16 time){ while(time--){} }voi ...