开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Java知识库 -> 电商小学期 - 智能家居网站结项报告 -> 正文阅读

[Java知识库]电商小学期 - 智能家居网站结项报告

前言：

「? Design & Build 」

????????三个专业三个方向，共同完成一个项目，分别为：

????????物联网?? 数据库的搭建及管理员相关

????????电管?? ? ?硬件设施的实现

????????电商?? ? ?用户方面的前后端

????????在本次项目开发中，自身经历了从0到对前后端的基本完备了解与操作，以此记录一下长达一个月的开发流程。包括自己对于项目开发的一些理解和我遇到的问题及思考。

? ? ? ? 提前说明：在小学期之前，本人只有JavaEE的基础，对于web开发，网络协议，css，JavaScript等等没有任何了解，项目结束之后也才刚开始系统的学习相关知识，所以一些描述较为个人并不专业。

项目简介（电商方向）：

? ? ? ?

????????要求开发Web应用程序

主要功能包括：

1. 与数据访问软件通信并检索/发送必要的信息。

2. 客户注册与登录

3. 显示家庭信息的当前状态与摘要（例如室内外温度的最低和最高时间段，设备的开关次数等）

更多功能包括但不限于：

1. 监测到任何欲动或任何窗户/门打开以供入室警报

2. 自主设计

项目理解：

????????与之前的C语言小学期一样，本质依然是对数据的操作，底层在于增删改查，上层在于显示。

????????只不过这次我们需要将数据存入数据库，这就涉及到数据库的设计，链接，数据规范等等。以及数据的显示从cmd变为web，这就涉及数据与网站的交互传输。这些为后端。

????????而关于数据怎么在web上面显示，这是前端。

项目开发

1.关键字

操作系统：MacOS

环境：IDEA（2021.2.1），MyEclipse ，HbuilderX

服务器：Tomcat（9.0.52）

后端：Java (1.8.0_221)

前端：Jsp，Html，Javascript，css

2.框架简介

?这里根据项目目录来介绍，左边为后端，右边为前端。

首先看左边

lib：jar包

src：后端的java文件

DAO：接口类，内部的Impl为对应的接口实现类

Email : 因为我在网页中添加了发送邮件的功能，所以这里建一个文件夹来存放相关函数

Entity ：项目中类的集合，比如用户类，设备类，里面定义好了自己的属性，即他的数据应该如何存放，从而与数据库里的table进行交互

Servelt ：里面的类全部extends HttpSevlet，即与jsp网页实现交互，进行数据传输的类

util ：工具包，存放比如数据库连接类等

target：这个放在下面说，与IDEA的artifacts相关

右边：

html：html会定义页面的内容，比如在html里写入一个button，那么打开网页就回出现一个button。

css ：css的作用为美化页面，比如你可以定义jsp和html网页中组件的颜色，样式，排版从而让他们更好看，比如button等等。

js ：JavaScript作用为控制一些页面的行为，利用定义好的js函数，你可以直接在网页上实现一些操作，比如点击一个button，他的颜色发生改变。

images：需要在网页上显示的图片组件

webfonts：因为pc端之间的不同，所以显示组件肯定会有所不同，而webfonts里面的组件发布在网络上这就可以让pc统一访问来显示，比如字体。

assets：也是css和js

jsp：可以理解为html+java代码。jsp允许写入一些java代码从而进行数据的传输（即上面提到的Servlet类）。但是因为jsp的存在，这个项目并不能说成前后端分离的开发。

（tip：关于jsp和html的区别）

你可以直接将html代码复制到jsp里，然后加上jsp的开头即可。但是html是可以直接打开的，而jsp需要部署到服务器才能打开。这个也好理解，因为jsp允许写入java代码，来从后台读取数值，如果不发到服务器上便没办法传输这些数据，那么自然也就打不开。所以在开发前端过程中，你可以先利用html进行内部组件，css和js的调整来使得页面更加美观。页面调整完备后复制进jsp里，然后添加java代码进行相应的操作。这样效率较高，因为每次部署服务器都需要时间。

WEB-INF

?这个文件夹在创建web项目的时候自动生成，包括里面的web.xml。在配置环境的过程中，网上的教程都让在该目录下新建一个classes，来存放.java编译后的class，lib依然是需要的jar包。关于web.xml的作用，与之前提过的jsp与HttpServlet继承类之间的对应关系有关，我们需要把之间的映射关系写入这样才能搭建起联系。

3.开发流程

当了解完以上框架之后，我们清楚了一个完整的web项目内应该有什么，那么应该如何从0开始。

在我最开始的时候，这些我全部都不知道，只是在课上老师给了个demo，是登录验证，连接了数据库以得到用户信息，但是demo的框架在开发过程中一直没变。

随后我又找到几个完整项目的代码，包括前后端。

最后总结出来web项目的开发流程如下：

1. 首先根据需求建立数据库，并且构建好数据库规范，包括命名以及数据库范式。这确保数据的存取规范，而成功的数据库是可以避免很多SQLExeption的。

2. 根据数据库的table内的entity和attributes建立Entity类，统一命名及数据结构。比如用户类，我们就要统一用户变量，比如Id，邮箱，密码等等。（这个我在开发后期改了好几次，就是因为开始没有定义完善，以及当你定义完成员变量后，IDEA等所有主流IDE是支持自动generate getter和setter的。请一定要用自动生成而不是自己写，这样的命名较为规范。）

package Entity;

public class User {
    private int userNo;
    private String userEmail;
    private String FName;
    private String IName;
    private String password;
    private int familyNo;

    public int getUserNo() {
        return userNo;
    }

    public void setUserNo(int userNo) {

        this.userNo = userNo;
    }

    public String getUserEmail() {
        return userEmail;
    }

    public void setUserEmail(String userEmail) {
        this.userEmail = userEmail;
    }

    public String getFName() {
        return FName;
    }

    public void setFName(String FName) {
        this.FName = FName;
    }

    public String getIName() {
        return IName;
    }

    public void setIName(String IName) {
        this.IName = IName;
    }

    public String getPassword() {
        return password;
    }

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

    public int getFamilyNo() {
        return familyNo;
    }

    public void setFamilyNo(int familyNo) {
        this.familyNo = familyNo;
    }
}

3. 然后我们需要与数据库进行连接，这里需要导入jdbc的jar包到lib里，然后配置好端口号等等，并且在util包内写好连接类，这里详细操作后续会说。

package util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnect {
    private final String DBDRIVER = "com.mysql.cj.jdbc.Driver" ;
    private final String DBURL = "jdbc:mysql://localhost/smarthome?useSSL=false&serverTimezone=UTC" ;
    private final String DBUSER = "root" ;
    private final String DBPASSWORD = "11111111" ;
    public Connection conn = null ;

    public DBConnect(){
        try{
            Class.forName(DBDRIVER) ;//指定连接类型
            this.conn = DriverManager.getConnection(DBURL,DBUSER,DBPASSWORD) ;//获取连接

        }catch (Exception e){
            e.printStackTrace();
        }
    }

    public Connection getConnection() {
        return this.conn;
    }

    //关闭数据库连接
    public void close(){
        try{
            this.conn.close();
        }catch (SQLException e){
            e.printStackTrace();
        }
    }
}

4. 连接完成后，便需要通过Java来对数据库进行操作，而关于需要如何操作，先在接口类中定义好。比如我需要用户登录，用户注册，用户注销等等。

package DAO;

import Entity.User;

public interface UserDAO {
    public User userLogin(User user) throws Exception;
    public int userLogout(User user) throws Exception;
    public int userRegister(User user) throws Exception;
    public int findEmail(String email) throws Exception;
    public int userChange_password(User user) throws Exception;
}

5. 然后我们可以去Impl去具体完成接口，比如用户登录，我们需要去数据库查询账户与密码是否对应。而这个操作的本质其实就是增删改查中的查，用户注册就是增，用户注销就是删，以此类推，而这四种操作方式基本都一个模版，所以代码基本相似。但是功能是跟着需求走的，你需要通过SQL来找到你想要的数据。

public class UserDAOImpl implements UserDAO {
    String sql= null ;
    PreparedStatement pstmt = null;
    DBConnect dbc = null ;

    @Override
    public User userLogin(User user) throws Exception {
        int flag = 0;
        User tempUser = null;
        try {
            sql="SELECT * FROM User WHERE userNo=? OR userEmail=? AND password=?";
            dbc= new DBConnect();
            pstmt = dbc.getConnection().prepareStatement(sql);
            pstmt.setInt(1, user.getUserNo());
            pstmt.setString(2, user.getUserEmail());
            pstmt.setString(3,user.getPassword());
            ResultSet rs=pstmt.executeQuery();
            if(rs.next()) {
                tempUser = new User();
                tempUser.setUserNo(rs.getInt("userNo"));
                tempUser.setUserEmail(rs.getString("userEmail"));
                tempUser.setFName(rs.getString("FName"));
                tempUser.setIName(rs.getString("IName"));
                tempUser.setPassword(rs.getString("password"));
                tempUser.setFamilyNo(rs.getInt("Family_familyNo"));
            }
            rs.close();
            pstmt.close();
        }catch(SQLException e) {
            e.printStackTrace();
        }finally {
            dbc.close();
        }
        return tempUser;
    }
}

?6. 我们根据账号密码从数据库得到相关信息后，我们需要从网站上得到用户输入的账号密码，那么就需要去jsp网页中添加输入的窗口，这里因为以及添加了css样式所以不太好阅读，总之就是两个input框。这里需要定义好input的name值，因为表单转发后，servlet需要通过name来获取attributes的值。

<!--/Login-->
<div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="login px-4 mx-auto mw-100">
                    <h5 class="text-center mb-4">Login Now</h5>
                    <form id="form_login" action="UserLogin" method="post">
                        <div class="form-group">
                            <label class="mb-2">userNo or Email address</label>
                            <label for="exampleInputEmail1"></label><input type="text" class="form-control" id="exampleInputEmail1" name="idOrEmail" aria-describedby="emailHelp" placeholder="" value="${idOrEmail}" required="">
                            <small id="emailHelp" class="form-text text-muted">We'll never share your information with anyone else.</small>
                        </div>
                        <div class="form-group">
                            <label class="mb-2">Password</label>
                            <label for="exampleInputPassword1"></label><input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="" required="">
                        </div>
                        <button type="submit" id="loginBtn" class="btn btn-primary submit mt-2">Sign In</button>
                        <a style="color: #e2a0a0"> ${errorMsg_log} </a>
                        <div class="text-right pb-4">
                            <a href="EmailCode.jsp" data-toggle="modal2" data-target="#exampleModalCenter" > Forgot password </a>
                            <span style="color: #8c9398"> | </span>
                            <a href="userLogin.jsp" data-toggle="modal2" data-target="#exampleModalCenter" >  Sign up</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--//Login-->

?7.然后我们需要在段jsp代码中填入一个form标签并为其添加action与method。在上面这张图中的form的action是UserLogin，method是post。其作用是当用户输入完账号密码之后，点击摁钮，网站会将这些数据以表单的形式提交，然后根据action的url去之前提到的web.xml进行对应来转发表单数据到指定的servelt类中。这里的welcome-file-list可以理解为打开的第一个页面，下面的servlet与servlet-mapping必须是成对出现的。servlet-name上下一致，为了方便阅读一般都定义成相应的java文件名，当然也可以写成别的。servlet-class就是form转发表单所到的类，url-patten就是上面提到的form的action，当然这个命名也是自己定义的。这段代码的意义就是用户的登录信息通过为UserLogin的action被转发到UserServlet这个类中进行操作。

    <welcome-file-list>
        <welcome-file>/userLogin.jsp</welcome-file>
    </welcome-file-list>



    <servlet>
        <servlet-name>UserLoginServlet</servlet-name>
        <servlet-class>Servlet.UserLoginServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>UserLoginServlet</servlet-name>
        <url-pattern>/UserLogin</url-pattern>
    </servlet-mapping>

?8. 其实可以将Servlet类理解成那个连接web上传来的数据与数据库内数据进行交互的地方，这是一个连接口，比如在下面这段代码中我从表单中读取出了账号密码，然后去上面写好的DAOImpl函数去数据库进行查询看是否存在这个用户，如果存在则跳转到登录成功界面，失败则重新输入。当然我这段代码里还混合了查询家庭设备并传给web端。

package Servlet;

import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import DAO.FamilyDAO;
import DAO.HwEDAO;
import DAO.Impl.FamilyDAOImpl;
import DAO.Impl.HwEDAOImpl;
import DAO.UserDAO;
import DAO.Impl.UserDAOImpl;
import Entity.HandwareEquipment;
import Entity.User;

public class UserLoginServlet extends HttpServlet{
    /**
     *
     */
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest req, HttpServletResponse res)
            throws IOException, ServletException{
    }

    public void doPost(HttpServletRequest req,HttpServletResponse res)
            throws IOException, ServletException{
        User user = new User();
        String idOrEmail = req.getParameter("idOrEmail");
        String password = req.getParameter("password");
        FamilyDAO familyDao = new FamilyDAOImpl();
        HwEDAO hwedao=new HwEDAOImpl();
        List<HandwareEquipment> result_list1 = null;
        List<User> result_list2 = null;
        int total=0;
        int humidity=0;
        int daw=0;
        int brightness=0;

        if(idOrEmail.contains("@")){
            user.setUserEmail(idOrEmail);
            user.setUserNo(-1);
        }
        else{
            user.setUserNo(Integer.parseInt(idOrEmail));
            user.setUserEmail("-1");
        }

        user.setPassword(password);

        UserDAO dao = new UserDAOImpl();
        User tempUser = null;

        try {
            tempUser =  dao.userLogin(user);
        }catch(Exception e) {
            e.printStackTrace();
        }

        if(tempUser!=null) {
            int familyNo=tempUser.getFamilyNo();
            try{
                total=hwedao.countTotal(familyNo);
                humidity=hwedao.countHum(familyNo);
                daw=hwedao.countDaW(familyNo);
                brightness=hwedao.countBri(familyNo);
                result_list1 = familyDao.queryHwE(familyNo);
                result_list2 = familyDao.queryUser(familyNo);
            }catch (Exception e){
                e.printStackTrace();
            }

            HttpSession session = req.getSession();
            session.setAttribute("userNo", user.getUserNo());
            session.setAttribute("FName",tempUser.getFName());
            session.setAttribute("IName",tempUser.getIName());
            session.setAttribute("familyNo",tempUser.getFamilyNo());


            if(result_list1!=null ||result_list2!=null) {
                session.setAttribute("HwE_List", result_list1);
                session.setAttribute("User_List",result_list2);
                session.setAttribute("Total",total);
                session.setAttribute("Humidity",humidity);
                session.setAttribute("DaW",daw);
                session.setAttribute("Brightness",brightness);
                req.setAttribute("successMsg_homepage", "Please check the following information!");
                res.sendRedirect("./Homepage.jsp");
            }
            else {
                req.setAttribute("errorMsg_homepage", "No result in Database");
                res.sendRedirect("./Homepage.jsp");
            }
        }
        else {
            req.setAttribute("errorMsg_log", "Error! Please try again!");
            req.setAttribute("idOrEmail", idOrEmail);
            req.getRequestDispatcher("./userLogin.jsp").forward(req, res);
        }
    }
}

?9.然后web收到信息后就会跳转到对应界面,我这里的后端逻辑为查询到用户匹配信息后会查到相应的家庭Id，然后进一步查询到家庭内设备信息，然后将这些数据打印出来。

10. 以上就是关于用户登录的整个开发流程，以此类推可以写出其他功能比如用户注册，设备查询等等。本质区别都在于对数据的操作。等这些功能实现后，就可以进行花里胡哨的操作了。因为我也同是负责了前端开发有些忙不过来，而我也没有系统的学过前端语言。于是就找了几个模版自己在上面修改。通过调整css里的配色及布局以达到自己想要的效果，增添一些js比如输入格式判断，也可以在后台添加一些花哨，我自己加了一个邮箱验证码的功能。

总之前端其实很简单，因为你可以看到<div>内是页面组件，而你只需要将你需要的组件替换掉模版内的组件，然后添加你自己的form，将name值全部定义好，这样就可以与后端连接起来。其实一般前端的代码都比较长，我找的模版大概六七千行，但其实比较有条理与逻辑，组件与组件之间是分开的。可以边看网页边看代码，耐着性子看一遍就知道怎么去修改。而且Chrome有Developer Tool，使得阅读源码更加方便。