一、項目目的

1.掌握Web前端工程開發的基本流程；

2.掌握Web前端工程開發的基本流程；

二、項目內容

使用html，jsp，servlet，el表達式，tomcat等javaweb學習過程中所用到的知識。

然后做一個人員的管理系統，實現登錄注冊，增刪改查的功能。

三、項目過程

本項目涉及到使用數據庫的使用，沒學數據庫的一定先學完數據庫。

我們想一想做一個項目首先需要什么呢？

?那肯定是先想好你要做什么項目。就比如我想做一個管理信息的項目。

那第二步呢？你首先要需要一個頁面對吧，不管是靜態的還是動態的，就像當初我們學js的時候，我們需要一個按鈕，然后給它綁定單擊事件，然后他才能實現一定的功能。

所以呢，我們需要先想好自己的頁面，和頁面之間的跳轉，比如我先有個登錄界面，然后嘞我要跳轉到那個界面，一定要銜接的上。

?第三步，我們想，我們點擊登錄它實現一定的功能，那我數據到哪里了呢那肯定是數據庫了。我們要把數據存到數據庫才能方便調用。

?下面是創建幾個表格，只要是需要存儲數據的，就建表就對了。

用于算法信息的界面?

CREATE TABLE `suanfa` (`title` varchar(100) NOT NULL COMMENT '標題',`acurl` varchar(100) NOT NULL COMMENT '活動地址',`pingtai` varchar(100) DEFAULT NULL COMMENT '平臺',`yaoqingma` varchar(100) DEFAULT NULL COMMENT '邀請碼',`jieshushijian` varchar(100) DEFAULT NULL COMMENT '結束時間',`zhuangtai` varchar(100) DEFAULT NULL COMMENT '狀態',`cankaodaan` varchar(100) DEFAULT NULL COMMENT '參考答案',`id` int(40) NOT NULL AUTO_INCREMENT,PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8

?用于人員的信息管理

CREATE TABLE `t_manage` (`id` int(20) NOT NULL AUTO_INCREMENT COMMENT '編號',`name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '姓名',`banji` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '班級',`phonenumber` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '電話',`email` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '郵箱',`fuzeren` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '負責人',`fangxiang` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '方向',`bokeurl` varchar(400) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '博客地址',PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8

?用于注冊登錄界面

CREATE TABLE `t_user` (`id` int(11) NOT NULL AUTO_INCREMENT,`username` varchar(20) NOT NULL,`password` varchar(20) NOT NULL,`email` varchar(100) DEFAULT NULL,PRIMARY KEY (`id`),UNIQUE KEY `username` (`username`) ) ENGINE=InnoDB AUTO_INCREMENT=45 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci

?我悄悄的打開了idea，就是這個東東

我就在那敲啊敲啊，然后就是亂碼和報錯，啊啊我真的是，一個bug好長時間都沒解決

言歸正傳，改學習了，

建一個工程，在工程中建一個模塊

?具體的操作，csdn有，大家可以去搜搜

先給大家看看我的目錄

不要在意是書還是人，俺也是小白，俺需要學習和借鑒，嘿嘿嘿

?

因為要用到數據庫，所以咱們先連接數據庫

我用的阿里云的durid連接池，大家用之前先導包

然后把它添加到模塊的library當中

暫時我們用這兩個jar包

編寫JdbcUtils

package com.gukeyang.pro.utils;import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid.pool.DruidDataSourceFactory;import java.io.InputStream; import java.sql.Connection; import java.sql.SQLException; import java.util.Properties;public class JdbcUtils {private static DruidDataSource dataSource;static {try {Properties properties = new Properties();// 讀取 jdbc.properties屬性配置文件InputStream inputStream = JdbcUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");// 從流中加載數據properties.load(inputStream);// 創建 數據庫連接 池dataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);} catch (Exception e) {e.printStackTrace();}}/*** 獲取數據庫連接池中的連接* @return 如果返回null,說明獲取連接失敗<br/>有值就是獲取連接成功*/public static Connection getConnection(){Connection conn = null;try {conn = dataSource.getConnection();} catch (Exception e) {e.printStackTrace();}return conn;}/*** 關閉連接，放回數據庫連接池* @param conn*/public static void close(Connection conn){if (conn != null) {try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}}

?配置文件，我放在了資源包下

連接數據庫的配置文件

容易錯的地方cj那個地方還有book 這個是自己的數據庫名

下面的就是自己訪問數據庫的賬號密碼

driverClassName=com.mysql.cj.jdbc.Driver url=jdbc:mysql://localhost:3306/book?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8&useSSL=false username=root password=123456 #最小空閑連接數 initialSize=5 #最大連接數 maxActive=10

?編寫測試類JdbcUtilsTest，看看自己的連接是否成功

package com.gukeyang.pro.test;import com.gukeyang.pro.utils.JdbcUtils; import org.junit.Test;import java.sql.Connection;public class JdbcUtilsTest {@Testpublic void testJdbcUtils(){for (int i = 0; i < 100; i++){Connection connection = JdbcUtils.getConnection();System.out.println(connection);JdbcUtils.close(connection);}}}

?編寫User（對象）

生成get和set方法，構造器和toString方法

package com.gukeyang.pro.pojo;public class User {private Integer id;private String username;private String password;private String email;public User() {}public User(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;}@Overridepublic String toString() {return "User{" +"id=" + id +", username='" + username + '\'' +", password='" + password + '\'' +", email='" + email + '\'' +'}';} }

?然后去寫方法，先編寫一個UserDao的接口，然后實現它的方法

package com.gukeyang.pro.dao;import com.gukeyang.pro.pojo.User;public interface UserDao {/*** 根據用戶名查詢用戶信息* @param username 用戶名* @return 如果返回null,說明沒有這個用戶。反之亦然*/public User queryUserByUsername(String username);/*** 根據 用戶名和密碼查詢用戶信息* @param username* @param password* @return 如果返回null,說明用戶名或密碼錯誤,反之亦然*/public User queryUserByUsernameAndPassword(String username, String password);/*** 保存用戶信息* @param user* @return 返回-1表示操作失敗，其他是sql語句影響的行數*/public int saveUser(User user);}

?從我們的目的看出，我們需要增刪改查

所以我們把這個寫成一個BaseDao的類，然后我們的實現類實現功能只需要繼承它就可以了。

?我們用的是dbutils工具類，里面是已經封裝好的增刪改查的功能

我們只需要創建queryrunner對象，連接數據庫，進行調用功能就可以了

package com.gukeyang.pro.dao.impl;import com.gukeyang.pro.utils.JdbcUtils; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanHandler; import org.apache.commons.dbutils.handlers.BeanListHandler; import org.apache.commons.dbutils.handlers.ScalarHandler;import java.sql.Connection; import java.sql.SQLException; import java.util.List;public abstract class BaseDao {//使用DbUtils操作數據庫private QueryRunner queryRunner = new QueryRunner();/*** update() 方法用來執行：Insert\Update\Delete語句** @return 如果返回-1,說明執行失敗<br/>返回其他表示影響的行數*/public int update(String sql, Object... args) {Connection connection = JdbcUtils.getConnection();try {return queryRunner.update(connection, sql, args);} catch (SQLException e) {e.printStackTrace();} finally {JdbcUtils.close(connection);}return -1;}/*** 查詢返回一個javaBean的sql語句** @param type 返回的對象類型* @param sql 執行的sql語句* @param args sql對應的參數值* @param <T> 返回的類型的泛型* @return*/public <T> T queryForOne(Class<T> type, String sql, Object... args) {Connection con = JdbcUtils.getConnection();try {return queryRunner.query(con, sql, new BeanHandler<T>(type), args);} catch (SQLException e) {e.printStackTrace();} finally {JdbcUtils.close(con);}return null;}/*** 查詢返回多個javaBean的sql語句** @param type 返回的對象類型* @param sql 執行的sql語句* @param args sql對應的參數值* @param <T> 返回的類型的泛型* @return*/public <T> List<T> queryForList(Class<T> type, String sql, Object... args) {Connection con = JdbcUtils.getConnection();try {return queryRunner.query(con, sql, new BeanListHandler<T>(type), args);} catch (SQLException e) {e.printStackTrace();} finally {JdbcUtils.close(con);}return null;}/*** 執行返回一行一列的sql語句* @param sql 執行的sql語句* @param args sql對應的參數值* @return*/public Object queryForSingleValue(String sql, Object... args){Connection conn = JdbcUtils.getConnection();try {return queryRunner.query(conn, sql, new ScalarHandler(), args);} catch (Exception e) {e.printStackTrace();} finally {JdbcUtils.close(conn);}return null;}}

之后我們開始寫實現類UserDaoImpl

package com.gukeyang.pro.dao.impl;import com.gukeyang.pro.dao.UserDao; import com.gukeyang.pro.pojo.User;public class UserDaoImpl extends BaseDao implements UserDao {@Overridepublic User queryUserByUsername(String username) {String sql = "select `id`,`username`,`password`,`email`from t_user where username = ?";return queryForOne(User.class, sql, username);}@Overridepublic User queryUserByUsernameAndPassword(String username, String password) {String sql = "select `id`,`username`,`password`,`email` from t_user where username = ? and password = ?";return queryForOne(User.class, sql, username,password);}@Overridepublic int saveUser(User user) {String sql = "insert into t_user(`username`,`password`,`email`) values(?,?,?)";return update(sql, user.getUsername(),user.getPassword(),user.getEmail());}}

大家注意寫的時候sql語句不要寫錯了，

寫好之后我們需要對Dao持久層進行測試UserDaoTest

package com.gukeyang.pro.test;import com.gukeyang.pro.dao.UserDao; import com.gukeyang.pro.dao.impl.UserDaoImpl; import com.gukeyang.pro.pojo.User; import org.junit.Test;public class UserDaoTest {UserDao userDao = new UserDaoImpl();@Testpublic void queryUserByUsername() {if (userDao.queryUserByUsername("admin") == null ){System.out.println("用戶名可用！");} else {System.out.println("用戶名已存在！");}}@Testpublic void queryUserByUsernameAndPassword() {if ( userDao.queryUserByUsernameAndPassword("admin","admin") == null) {System.out.println("用戶名或密碼錯誤，登錄失敗");} else {System.out.println("查詢成功");}}@Testpublic void saveUser() {System.out.println( userDao.saveUser(new User(null,"wzg16802", "123456", "wzg168@qq.com")) );} }

如果成功運行，大家就可以進行下一步

這里做一個補充，要不然大家會比較迷

為什么我們有了Dao還要寫Service層

接下來我們就開始寫User的service層

實現登錄和注冊

package com.gukeyang.pro.service;import com.gukeyang.pro.pojo.User;public interface UserService {/*** 注冊用戶* @param user*/public void registUser(User user);/*** 登錄* @param user* @return 如果返回null，說明登錄失敗，返回有值，是登錄成功*/public User login(User user);/*** 檢查 用戶名是否可用* @param username* @return 返回true表示用戶名已存在，返回false表示用戶名可用*/public boolean existsUsername(String username); }

實現類

package com.gukeyang.pro.service.impl;import com.gukeyang.pro.dao.UserDao; import com.gukeyang.pro.dao.impl.UserDaoImpl; import com.gukeyang.pro.pojo.User; import com.gukeyang.pro.service.UserService;public class UserServiceImpl implements UserService {private UserDao userDao = new UserDaoImpl();@Overridepublic void registUser(User user) {userDao.saveUser(user);}@Overridepublic User login(User user) {/*** 咱們的登錄，只是需要查詢數據庫即可！！！** QQ登錄 ！！！* 1、查詢用戶名和密碼* 2、查詢天氣信息* 3、查詢QQ郵箱幾封未讀郵件* 4、查詢QQ空間留言數* 5、還要查詢QQ游戲 有沒有什么更新* 6、查詢QQ的黃鉆，什么什么鉆，的皮膚信息。* 7、還要查詢個個好友的登錄IP和登錄位置信息* 8、發QQ好友登錄提示音*/return userDao.queryUserByUsernameAndPassword(user.getUsername(), user.getPassword());}@Overridepublic boolean existsUsername(String username) {if (userDao.queryUserByUsername(username) == null) {// 等于null,說明沒查到，沒查到表示可用return false;}return true;} }

測試

package com.gukeyang.pro.test;import com.gukeyang.pro.pojo.User; import com.gukeyang.pro.service.UserService; import com.gukeyang.pro.service.impl.UserServiceImpl; import org.junit.Test;import static org.junit.Assert.*;public class UserServiceTest {UserService userService = new UserServiceImpl();@Testpublic void registUser() {userService.registUser(new User(null, "bbj168", "666666", "bbj168@qq.com"));userService.registUser(new User(null, "abc168", "666666", "abc168@qq.com"));userService.registUser(new User(null, "wzg168", "123456", "111@qq.com"));}@Testpublic void login() {System.out.println( userService.login(new User(null, "wzg168", "123456", null)) );} /*User{id=4, username='wzg168', password='123456', email='111@qq.com'} */@Testpublic void existsUsername() {if (userService.existsUsername("wzg16888")) {System.out.println("用戶名已存在！");} else {System.out.println("用戶名可用！");}} }

然后就是tomcat，我們要寫servlet程序，讓頁面跳轉到servlet程序，執行調用相應的功能，然后返回結果。也就是我們在頁面上看到的結果。

?首先應該有這個，然后我們寫servlet程序

頁面的請求，到ser

vlet程序中，我們為了防止亂碼，先設置字符集，然后通過反射找到相應的我們寫的方法

我們首先寫一個BaseServlet

package com.gukeyang.pro.web;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.lang.reflect.Method;public abstract class BaseServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html; charset=UTF-8");//獲取隱藏表單項的action的值String action = request.getParameter("action");//利用反射獲取相應的用戶行為，避免使用大量的if else//我們只需要在下面編寫相應的方法即可，修改密碼，綁定郵箱，綁定手機號等業務try {//獲取action鑒別對象，獲取相應的業務Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);//調用目標業務method.invoke(this,request,response );} catch (Exception e) {e.printStackTrace();}}//因為圖書管理板塊的提交方式是Get請求，所以我們讓doGet執行doPost相同的操作protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request,response);} }

然后寫我們的UserServlet 讓其繼承于BaseServlet

這個程序要求我們要熟練應用httpservlet的dopost和doget方法，靈活使用請求轉發和請求重定向，還有我們的域對象，我們把數據存到域對象，然后在頁面中調用域中的數據。

package com.gukeyang.pro.web;import com.gukeyang.pro.pojo.User; import com.gukeyang.pro.service.UserService; import com.gukeyang.pro.service.impl.UserServiceImpl; import com.gukeyang.pro.utils.WebUtils;import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.Map;public class UserServlet extends BaseServlet {private UserService userService = new UserServiceImpl();// @Override // protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // String action = req.getParameter("action"); // //判斷是哪個表單提交了 // if ("regist".equals(action)){ // regist(req,resp); // }else if("login".equals(action)){ // login(req,resp); // } // } // // @Override // protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // // }/*** 處理登錄的功能** @param req* @param resp* @throws ServletException* @throws IOException*/protected void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1、獲取請求的參數String username = req.getParameter("username");String password = req.getParameter("password");// 調用 userService.login()登錄處理業務User loginUser = userService.login(new User(null, username, password, null));// 如果等于null,說明登錄 失敗!if (loginUser == null) {// 把錯誤信息，和回顯的表單項信息，保存到Request域中req.setAttribute("msg", "用戶或密碼錯誤！");req.setAttribute("username", username);// 跳回登錄頁面req.getRequestDispatcher("pages/user/login.jsp").forward(req, resp);}else if(username.equalsIgnoreCase("admin")){req.getRequestDispatcher("pages/user/login_success.jsp").forward(req, resp);}else{// 登錄 成功//跳到成功頁面login_success.jspreq.getRequestDispatcher("pages/user/login_success_user.jsp").forward(req, resp);}}/*** 處理注冊的功能** @param req* @param resp* @throws ServletException* @throws IOException*/protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1、獲取請求的參數String username = req.getParameter("username");String password = req.getParameter("password");String email = req.getParameter("email");String code = req.getParameter("code");//反射 // User user = new User(); // WebUtils.copyParamToBean((Map) req,user);if ("6n6np".equalsIgnoreCase(code)||"123456".equalsIgnoreCase(code)) { // 3、檢查 用戶名是否可用if (userService.existsUsername(username)) {System.out.println("用戶名[" + username + "]已存在!");// 把回顯信息，保存到Request域中req.setAttribute("msg", "用戶名已存在！！");req.setAttribute("username", username);req.setAttribute("email", email);// 跳回注冊頁面req.getRequestDispatcher("pages/user/regist.jsp").forward(req, resp);} else {// 可用 // 調用Sservice保存到數據庫userService.registUser(new User(null, username, password, email)); // // 跳到注冊成功頁面 regist_success.jspreq.getRequestDispatcher("pages/user/regist_success.jsp").forward(req, resp);}} else {// 把回顯信息，保存到Request域中req.setAttribute("msg", "驗證碼錯誤！！");req.setAttribute("username", username);req.setAttribute("email", email);System.out.println("驗證碼[" + code + "]錯誤");req.getRequestDispatcher("pages/user/regist.jsp").forward(req, resp);}}}

然后需要去配置一下，找到web.xml

<servlet><servlet-name>userServlet</servlet-name><servlet-class>com.gukeyang.pro.web.UserServlet</servlet-class></servlet><servlet-mapping><servlet-name>userServlet</servlet-name><url-pattern>/userServlet</url-pattern></servlet-mapping>

?在頁面登錄的表單中，設置隱藏域和action的值，然后跳轉到相應的servlet程序，執行相應的功能。

剩下的兩個People和Suanfa和這個思路一樣

就是一些細節不一樣

?這就是剛說的把查詢到的map對象保存到域中，然后調出，顯示到頁面

?就像這樣，把存到數據庫的數據顯示出來

我們接下來看看功能：增刪改查，這是項目中間必不可少的功能

1.增加

我們需要一個表單，來收集信息，然后將它提交到servlet程序，通過add功能添加到數據庫

2.刪除

就是找到相應的數據的id刪除整個javabean對象，

3.修改

我們先應該請求，把數據從數據庫中回顯到表單當中，然后再修改其中的值，從新提交表單完成對數據的修改

4.查詢

通過某一參數查詢，姓名或者id等等，我們通過某個參數，從數據庫中查找然后被返回到request域中去，我們頁面再從域中把數據顯示出來。

下面說一下我的用戶和管理層

其實我想的是，我固定一個管理員賬號，我根據是不是管理員賬號，跳轉不同的頁面

下面是兩個頁面，當然用戶頁面要隱藏一些功能。

四、項目結果

?

目前是只寫了人員管理和算法，因為剩下兩個和前兩個的基本思路都是一樣的，所以并沒有往下進行完善。

? ? ?這就是項目的最終成果，基本功能都實現了，然后我還增加了上傳文件和前后臺，就是用戶和管理員的界面和功能不一樣，上面的展示的都是管理員界面，雖然我用的方法簡單，但是基本實現了用戶和管理員的分離。

五、實驗心得

1、掌握Web前端開發的基礎知識；

2、掌握Web前端工程開發的基本流程；

3、掌握HTML、CSS、JavaScript；

4、掌握Tomcat的使用和常見的bug

六、項目完整代碼

阿里云盤分享? ? ? ? ?提取碼 ： zu73

總結

以上是生活随笔為你收集整理的Web项目之管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。