こんにちは〜 皆さんこんにちは、この記事ではオンラインショッピングシステムのデザインを紹介します。従来の電子商取引の時代では、ユーザーは購入する前にまず購入する必要があり、ユーザーはプラットフォームに依存し、企業が消費者に直接影響を与えることは困難ですが、現在はソーシャル + 電子商取引が情報の問題を解決します製品品質の非対称性、電子商取引は、今日の経済発展の重要な分野になっています。オンライン ショッピングは実現の 1 つです。
1.効果のデモンストレーション
1.ホームページインターフェース
ログインしていない場合は閲覧のみで購入はできません
2.製品インターフェース
3. 商品詳細画面
4.ショッピングカートインターフェース
5. ショッピング注文インターフェース
6.成功した取引インターフェース
7.個人注文インターフェース
8.個人コレクションインターフェース
9. 管理者インターフェース
10. すべての注文インターフェース
11.すべてのお気に入りインターフェース
第二に、データベースの設計
データベースの定義:データベースは、データを格納するウェアハウスです。大容量のストレージ容量があり、数百万、数千万、数億のデータを保存できます。ただし、データベースは自由にデータを保存するわけではなく、特定のルールがあり、そうしないとクエリの効率が非常に低くなります。今日の世界は、膨大な量のデータに満ちた、データに満ちたインターネットの世界です。つまり、インターネットの世界はデータの世界です。旅行記録、消費記録、閲覧した Web ページ、送信されたメッセージなど、データのソースは多数あります。テキスト型のデータだけでなく、画像、音楽、音声もすべてデータです。
ユーザー テーブル (ユーザー) : フィールド (ID、ユーザー名、パスワード、電話、メール)
ショッピングカートテーブル（shopping_cart）：フィールド（id、ユーザー名、商品名、価格、購入数量、合計金額、画像アドレス）
注文テーブル（注文）：フィールド（id、商品名、メールアドレス、ユーザー名、配送先住所、配送先電話番号）
商品詳細テーブル (goods_parameters):フィールド (id、商品タイプ、画像アドレス)
商品タイプ（お気に入り）：フィールド（id、商品タイプ名）
商品テーブル（ユーザー）：フィールド（id、商品名、商品型名、価格、画像アドレス、売上、在庫）
お気に入りテーブル (お気に入り):フィールド (id、ユーザー名、製品名、価格、写真のアドレス)
履歴テーブル (browsinghistory):フィールド (id、レコード名、レコード価格、レコード画像アドレス)、
ブランド テーブル (ブランド) : フィールド (id、ユーザー名、ブランド タイプ、ブランド名)
3.部分コード表示
ログインショー
<div class="registerarea ">
<!-- 注册表头部 -->
<h4>登录账号
<div class="login"> 没有账号，去<a href="register.jsp" class="style_red">注册</a> <a href="retrievePassword.jsp">忘记密码？点击找回</a></div>
</h4>
<!-- 注册表身体 -->
<div class="reg_form">
<form action="/EasybuyProject/loginServlet" class="submit" method="post">
<ul class="clearfix:after">
<li>
<label>账号：</label> <input type="text" class="inp username" name="username">
<span class="error">格式错误，应为长度6-20并含有大小写字母数字</span>
<font color="red">
<%
if(session.getAttribute("messageLogin")!= null){
out.print(session.getAttribute("messageLogin"));
session.invalidate();
}
%>
</font>
</li>
<li>
<label>密码：</label> <input type="password" class="inp password" name="password">
<%-- <span class="error">格式错误，应为长度6-20并含有大小写字母数字</span>--%>
</li>
<li>
<input type="submit" class="inputButton" value="登录">
<input type="reset" value="重置" class="inputButton">
</li>
</ul>
</form>
</div>
</div>定期確認
<script>
$(document).ready(function () {
$(function () {
var flagUser = false
var flagPwd = false
var $user_name = $('.username')
var $pwd = $('.password')
$user_name.blur(function () {
var vals = $user_name.val();
var reg = /^[a-zA-Z0-9\_]{6,20}$/;
if (reg.test(vals)) {
$user_name.next().hide();
flagUser = true;
} else {
// $user_name.next().show().css("z-index","2").html('用户名是6-20位数字、字母和下划线！');
$user_name.next().show();
flagUser = false;
}
})
$pwd.blur(function () {
var vals = $pwd.val();
var reg = /^[a-zA-Z0-9\_]{6,20}$/;
if (reg.test(vals)) {
$pwd.next().hide();
flagPwd = true;
} else {
$pwd.next().show();
flagPwd = false;
}
})
})
})
</script>サーブレット
@WebServlet("/EasybuyProject/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf8");
resp.setCharacterEncoding("utf8");
resp.setContentType("text/html;charset=UTF-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
UserService userService = new UserServiceImpl();
User user = userService.login(username, password);
HttpSession session = req.getSession();
if (user != null && (!Objects.equals(username, "XzwadminNo1")) && !Objects.equals(password, "XzwadminNo1")) {
resp.sendRedirect("/FrontPage/index.jsp");
session.setAttribute("success",username);
} else if(Objects.equals(username, "XzwadminNo1") && Objects.equals(password, "XzwadminNo1")){
session.setAttribute("success",username);
resp.sendRedirect("/FrontPage/indexAdmin.jsp");
} else {
session.setAttribute("messageLogin","用户名或者密码错误");
resp.sendRedirect("/FrontPage/login.jsp");
}
}
}
エンティティ クラス
public class User {
private int id;
private String username;
private String password;
private String tel;
private String email;
public User() {
}
public User(String tel, String email) {
this.tel = tel;
this.email = email;
}
public User(int id, String username, String password, String tel, String email) {
this.id = id;
this.username = username;
this.password = password;
this.tel = tel;
this.email = email;
}
public int getId() {
return id;
}
public void setId(int 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 getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", tel='" + tel + '\'' +
", email='" + email + '\'' +
'}';
}
}
ダオ
public User login(String username, String password) {
User user = null;
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
try {
connection = JdbcUtil.getConnection();
String sql = "select * from user where username = ? and password= ?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1, username);
preparedStatement.setString(2, password);
resultSet = preparedStatement.executeQuery();
if (resultSet.next()) {
user = new User();
user.setUsername(resultSet.getString("username"));
user.setPassword(resultSet.getString("password"));
}
} catch (Exception e) {
e.printStackTrace();
} finally {
JdbcUtil.release(resultSet, preparedStatement, connection);
}
return user;
}結果を示す
ソースコード入手は公式アカウントを参照
数歩積まないと千里行けない、若いうちに頑張って未来の自分に説明を！明日はより良い自分へと進みましょう！
