javaweb基礎開發Servlet+jsp+mysql+html+css+js
(找一個前端模板,一大堆html,自己寫的沒有模板的美觀)
數據庫設計
來一個最基礎的用戶表
drop table if exists `myshop_user`; create table `myshop_user`( USER_ID varchar(32) not null, USER_NAME varchar(20) not null, USER_PASSWORD varchar(20) not null, USER_SEX varchar(1) not null, USER_BIRTHDAY datetime default null, USER_IDENITY_CODE varchar(60) default null, USER_EMAIL varchar(60) default null, USER_MOBLLE varchar(11) default null, USER_ADDRESS varchar(200) not null, USER_STATUS decimal(6,0) not null, primary key(`USER_ID`) )ENGINE=InnoDB default charset=utf8;
如果只是普通的日期那就太簡單了,想弄成當前時間
遇到的問題是mysql5.x居然不支持data datatime類型設置系統默認值即當前時間,
USER_BIRTHDAY datetime default null,
一開始我想設置USER_BRITHDAY的日期類型設置為當前時間為其默認值?
寫的 USER_BRITHDAY datetime default now(),報錯
想用當前時間,默認系統的值,只能 timestamp 類型,且 默認值設為 now() 或 current_timestamp()
如下
就可以這樣
USER_BIRTHDAY timestamp NULL default CURRENT_TIMESTAMP
就可以系統創建用戶的注冊時間。
不過最后我為了偷懶沒有用系統的默認時間即設置系統默認值,而是用的一個datetime
-------------------------------------------------------------------
有了數據庫,就需要創建數據庫對應的實體類(即entity)
package com.yang.entity; public class myshop_user { private String USER_ID; private String USER_NAME; private String USER_PASSWORD; private String USER_SEX; private String USER_BIRTHDAY; private String USER_IDENITY_CODE; private String USER_EMAIL; private String USER_MOBLLE; private String USER_ADDRESS; private int USER_STATUS; }
然后就是構造函數,set get就行,利用快捷鍵
------------------------------------------------------------
再寫一個對應的增加用戶的jsp,效果如圖
主要就是form tr td input這些html知識,比較簡單,但是過程麻煩,
<%-- Created by IntelliJ IDEA. User: E Date: 2020/5/28 Time: 20:47 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="admin_menu.jsp"%> <!--/sidebar--> <div class="main-wrap"> <div class="crumb-wrap"> <div class="crumb-list"><i class="icon-font"></i><a href="/jscss/admin/design/">首頁</a><span class="crumb-step">></span><a class="crumb-name" href="admin_user.jsp">用戶管理</a><span class="crumb-step">></span><span>新增用戶</span></div> </div> <div class="result-wrap"> <div class="result-content"> <%-- 跳轉到servlet由@WebServler或者xml寫的路徑,前面加一個項目名--%> <form action="/MyShop/manager/admin_douseradd" method="post" id="myform" name="myform"> <table class="insert-tab" width="100%"> <tbody> <tr> <th><i class="require-red">*</i>用戶名:</th> <td> <input class="common-text required" id="title" name="userName" size="50" value="" type="text"> </td> </tr> <tr> <th>用戶姓名:</th> <td><input class="common-text" name="name" size="50" value="" type="text"></td> </tr> <tr> <th>登錄密碼:</th> <td><input class="common-text" name="password" size="50" value="" type="text"></td> </tr> <tr> <th>確認密碼:</th> <td><input class="common-text" name="re-password" size="50" value="" type="text"></td> </tr> <tr> <th>性別:</th> <td> <input name="sex" value="man" type="checkbox" checked="checked">男 <input name="sex" value="woman"type="checkbox" >女 </td> </tr> <tr> <th>出生日期:</th> <td><input class="common-text" name="birthday" size="50" value="" type="text"></td> </tr> <tr> <th><i class="require-red">*</i>電子郵箱 </th> <td><input class="common-text" name="email" size="50" value="" type="text"></td> </tr> <tr> <th><i class="require-red">*</i>手機號碼 </th> <td><input class="common-text" name="mobile" size="50" value="" type="text"></td> </tr> <tr> <th><i class="require-red">*</i>送貨地址 </th> <td><input class="common-text" name="adress" size="50" value="" type="text"></td> </tr> <tr> <th></th> <td> <input class="btn btn-primary btn6 mr10" value="提交" type="submit"> <input class="btn btn6" onClick="history.go(-1)" value="返回" type="button"> </td> </tr> </tbody></table> </form> </div> </div> </div> <!--/main--> </div> </body> </html>
里面的class引入的css是都用的模板里的,直接引用即可,這也是前端模板的好處,好看。直接用,當然也可以不需要這些css
其他沒啥大問題,主要是如果有特殊需求,需要上傳文件的話需要enctype
<form enctype="multipart/form-data">
onClick="history.go(-1)"
history.back(-1)和history.go(-1)的區別
history.back(-1):直接返回當前頁的上一頁,數據全部消息,是個新頁面
history.Go(-1):也是返回當前頁的上一頁,不過表單里的數據全部還在
history.back(0) 刷新 history.back(1) 前進 history.back(-1) 后退
’
--------------------------------------------------------------
既然上面的表單都提交了跳轉請求,那就寫跳轉請求servlet,
記住maven是javax.servlet不是tomcat.servlet那個maven,導錯就會寫不出servlet
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> </dependency>
並且!需要注解的話得版本高一點如@WebServlet低版本不行,(web3.0以下版本的servlet類沒有類注解)
表單是post提交過來,那也只需要重寫doPost即可
這里面.避免亂碼就是設置字符集(就像重新打碎重組)
先把請求過來的設置:request.setCharacterEncoding("UTF-8")的作用是設置對客戶端請求進行重新編碼的編碼。
再設置響應的字符集:Content-Type用於定義網絡文件的類型和網頁的編碼,決定瀏覽器將以什么形式、什么編碼讀取這個文件
package com.yang.servlet.user; import com.yang.entity.myshop_user; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet("/manage/admin_douseradd") public class DoUserAdd extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //設置請求字符集 req.setCharacterEncoding("UTF-8"); //設置響應字符集 resp.setContentType("text/html"); String username = req.getParameter("username"); String name = req.getParameter("name"); String password = req.getParameter("password"); String sex = req.getParameter("sex"); String birthday = req.getParameter("birthday"); String email = req.getParameter("email"); String mobile = req.getParameter("mobile"); String adress = req.getParameter("adress"); //創建一個實體 myshop_user u = new myshop_user(username,name,password,sex,birthday,null,email,mobile,adress,1); //放進數據庫 System.out.println(u); //成功或失敗重定向到哪去 if(true) { resp.sendRedirect("admin_user.jsp"); } else { //輸出流,通過這個方法獲取到打印流 PrintWriter out = resp.getWriter(); //js輸出 out.write("<script>"); out.write("alert('用戶添加失敗')"); out.write("location.href='manage/admin_useradd.jsp'"); out.write("</script>"); } } }
----------------------(第一天)分界線----------------------------------