Web实战丨基于django+html+css+js的电子商务网站

文章目录

  • 写在前面
  • 实验目标
  • 需求分析
  • 实验内容
    • 安装依赖库
    • 1.登陆界面
    • 2.注册界面
    • 3.电子商城界面
    • 4.其他界面
  • 运行结果
  • 写在后面

写在前面

本期内容：基于Django+HTML+CSS+JS的电子商务网站

实验环境：

  • vscode或pycharm
  • python(3.11.4)
  • django

代码下载地址：https://download.csdn.net/download/m0_68111267/88725954

实验目标

使用Django+HTML+CSS+JS开发一个含登陆界面的电子商务网站。本项目共分为六大模块：

  1. 用户信息界面
  2. 商品信息界面
  3. 购物车界面
  4. 送货地址界面
  5. 订单界面
  6. 支付界面

需求分析

1. 用户信息界面

用户信息模块包括：用户注册，用户登录，显示用户信息和修改用户密码。

  • 注册信息要输入用户名、密码和邮箱。注册信息要求用户名必须唯一，如果用户名在数据库中已经存在，就会显示相应的错误提示信息。
  • 在用户登录的时候，如果用户名和密码输入有误，就必须提示相应的错误信息。
  • 用户登录程序后，应该允许用户查看自己的用户信息和收货信息。
  • 允许修改密码，修改用户密码的时候，必须提供旧密码、新密码和新密码的确认信息。如果出现下列情况时应该给出相应的错误提示信息。
    ① 旧密码不正确。
    ② 新密码与旧密码相同。
    ③ 新密码与新密码的确认信息不一致。

2. 商品信息界面

商品信息模块包括：商品信息的维护，商品概要信息的分页显示，根据商品名称的模糊查询，对某一条商品显示其详细信息。

  • 商品信息的维护：包括增加、修改和删除操作，是利用 Django的后台完成的。
  • 商品概要信息的分页显示：包括显示商品信息的 id、名称、价钱以及查看详情和放入购物车的操作链接。
  • 根据商品名称的模糊查询：通过商品名称的模糊查询实现，查询结果界面同概要信息，也需要实现分页功能。
  • 对某一条商品显示其详细信息：除了显示名称、价钱，还要显示商品的描述、图片以及放入购物车的操作。

3. 购物车界面

购物车模块包括：购物车中所有商品的显示，添加商品进入购物车，修改购物车中某种商品的数量，删除购物车中某个商品，删除购物车中所有商品。

  • 购物车中所有商品的显示：通过列表实现，包括显示商品 id、商品名称、单价、商品个数以及移除的操作链接。单击“商品 id”可以查看对应的商品详细信息。
  • 添加商品进入购物车：可以在购物车列表中进行操作，也可以在商品的详细信息中进行操作。
  • 修改购物车中某种商品的数量和删除购物车中某个商品的操作在购物车列表中进行。
  • 可以在查看所有订单页面中删除购物车中所有商品。

4. 送货地址界面

送货地址模块包括：送货地址的显示，送货地址的添加，送货地址的修改，送货地址的删除。

  • 送货地址的显示：可以在生成订单选择送货地址的时候，也可以在查看用户信息的时候。
  • 送货地址的添加：可以添加当前用户账号下的一个或多个送货地址。
  • 送货地址的修改和送货地址的删除可以通过送货地址的显示页面进入。

5. 订单界面

订单模块包括：显示总的订单，显示所有订单，删除单个订单，删除总订单。

  • 显示总的订单：在订单生成完毕后显示，包括生成时间、配货地址和总价钱以及订单中每个商品的订单 id、商品名称、商品价格、个数。
  • 显示所有订单：包括该用户下的所有订单，每个订单的显示内容同单个订单。如果这个订单没有支付，系统就会提供支付的操作链接。
  • 删除单个订单：可以在显示单个订单内容页面中进行，也可以在显示所有订单内容页面中进行。
  • 删除总订单：在显示单个订单或显示所有订单的页面中进行。
  • 在单个订单和所有订单中单击“商品id”可以查看对应的商品详细信息。

6. 支付界面

订单确认后，可以利用各种支付平台(如支付宝、微信、网银卡等)进行支付操作。

实验内容

安装依赖库

在正式开始之前，我们需要先安装本次实战项目所依赖的库：

  • django：一个高级的Python Web框架。

安装命令：

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple django

1.登陆界面

{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>电子商务系统丨登录</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/login.css" rel="stylesheet"> 
    <!-- Custom styles for this template -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/css/my.css" rel="stylesheet">
	<script type="text/javascript" src="/static/js/sh256.js"></script>
	<script type="text/javascript" >
	function SHA256Password()
	{
	document.forms["myForm"]["password"].value = SHA256(document.forms["myForm"]["password"].value);
	return true;
	}
</script>

  </head>

  <body>

    <div class="container">
      <form class="form-signin" name="myForm" method="post" action="/login_action/" enctype="multipart/form-data" onsubmit="return SHA256Password()">
	  {% csrf_token %}
        <h2 class="form-signin-heading">电子商务系统-登录</h2>
        {{uf.as_p}}
          <p style="color:red">{{error}}</p> <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button><br>
		<a href="\regist\">注册</a>
      </form>

    </div> 

  </body>

</html>

2.注册界面

{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>电子商务系统丨注册</title>

    <!-- Bootstrap core CSS -->
    <link href="{%static 'css/login.css'%}" rel="stylesheet"-->
    <!-- Custom styles for this template -->
    <link href="{%static 'css/bootstrap.min.css'%}" rel="stylesheet"-->
	<link href="{%static 'css/my.css'%}" rel="stylesheet">
	<script type="text/javascript" src="/static/js/sh256.js"></script>
	<script type="text/javascript" src="/static/js/checkLength.js"></script>
	<script type="text/javascript" >
	function SHA256Password(){
		password = document.forms["myForm"]["password"].value;
		if (checkLength(password,5)==1){
			document.forms["myForm"]["password"].value = SHA256(password);
		}
		return true;
	}
	</script>

  </head>

  <body>

    <div class="container">
      <form class="form-signin" name="myForm" method="post" enctype="multipart/form-data" onsubmit="return SHA256Password()">
        <h2 class="form-signin-heading">电子商务系统-注册</h2>
		{% csrf_token %}
        {{uf.as_p}}
          <p style="color:red">{{error}}</p> <br>
        <input class="btn btn-lg btn-primary btn-block" type="submit" value="注册"><br>
		<a href="/login/">登录</a>
      </form>

    </div> 

  </body>

</html>

3.电子商城界面

{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
      <meta name="description" content="">
      <meta name="author" content="">

      <title>电子商务系统</title>

      <!-- Bootstrap core CSS -->
    <link href="{%static 'css/login.css'%}" rel="stylesheet"-->
    <!-- Custom styles for this template -->
    <link href="{%static 'css/bootstrap.min.css'%}" rel="stylesheet"-->
  </head>

  <body role="document">
<!-- 导航栏 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/goods_view/">电子商务系统</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/goods_view/">商品列表</a></li>
			<li class="active"><a href="/view_all_order/">查看所有订单</a></li>
  {% block content %}


  {% endblock %}
    <div class="container theme-showcase" role="main">

        <div class="page-header">
        </div>

    </div> <!-- /container -->

  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  </body>

</html>

4.其他界面

请下载后查看哦~

运行结果

1. 登陆界面

1

2. 注册界面

2

3. 电子商城界面

3

4. 购物车界面

4

5. 地址界面

5

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/317279.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Web自动化测试，一定得掌握的 8 个核心知识点

Web自动化测试，一定得掌握的 8 个核心知识点

使用 cypress 进行端对端测试&#xff0c;和其他的一些框架有一个显著不同的地方&#xff0c;它使用 javascript 作为编程语言。传统主流的 selenium 框架是支持多语言的&#xff0c;大多数 QA 会的python 和 java 语言都可以编写 selenium 代码&#xff0c;遇到需要编写 js 代…
阅读更多...
距离美赛还有20天，不要忘了阅读往年获奖论文（附04-23年美赛获奖论文）

距离美赛还有20天，不要忘了阅读往年获奖论文（附04-23年美赛获奖论文）

之前发了很多数模相关的知识&#xff0c;受到了一些人的关注&#xff0c;也有很多人私下问我&#xff0c;距离美赛还有20几天了&#xff0c;还来不来得及。 对此我想说&#xff0c; 来不来得及重要吗&#xff1f; 你名都报了&#xff0c;钱也交了&#xff0c;还是笔不小的钱…
阅读更多...
猫狗大战（猫狗识别）

猫狗大战（猫狗识别）

1.问题简介 1.1问题描述 在这个问题中&#xff0c;你将面临一个经典的机器学习分类挑战——猫狗大战。你的任务是建立一个分类模型&#xff0c;能够准确地区分图像中是猫还是狗。 1.2预期解决方案 你的目标是通过训练一个机器学习模型&#xff0c;使其在给定一张图像时能够准…
阅读更多...
【模块系列】STM32BMP280

【模块系列】STM32BMP280

前言 最进想练习下I2C的应用&#xff0c;手上好有BMP280也没用过&#xff0c;就看着机翻手册和原版手册&#xff0c;开始嘎嘎写库函数了。库的命名应该还1是比较规范了吧&#xff0c;就是手册对于最终值的计算方式很迷糊&#xff0c;所以现在也不能保证有可靠性啊&#xff0c;大…
阅读更多...
关于运维·关于数据库面试题

关于运维·关于数据库面试题

目录 一、数据库类型 二、数据库引擎 三、mysql数据库类型 四、mysql的约束添加 五、主从复制原理 六、主从方式有几种 七、mysql主从数据不一致的原因 八、mysql的优化 九、什么是事务的特征 十、数据库读写分离的好处 十一、怎样优化sql语句 十二、mysql的同步方…
阅读更多...
基于MAP算法的Turbo译码 -- 公式推导

基于MAP算法的Turbo译码 -- 公式推导

到此为止&#xff0c;讲完了turbo译码器的子译码器基于MAP算法的译码过程。但在实际使用中&#xff0c;很少直接使用MAP算法进行译码。而是使用改进的LOG-MAP和MAX-LOG-MAP算法进行译码&#xff0c;因此译码的整体流程&#xff0c;包括外信息的计算以及先验信息的获取等。都在后…
阅读更多...
openai自定义API操作 API （openai.custom）

openai自定义API操作 API （openai.custom）

OpenAI 提供了一个自定义 API&#xff0c;允许开发者通过编程方式与 OpenAI 的 AI 模型进行交互。使用这个 API&#xff0c;你可以执行各种任务&#xff0c;例如文本生成、推理和翻译等。 以下是使用 OpenAI 自定义 API 的基本步骤&#xff1a; 创建 API 密钥&#xff1a;首先…
阅读更多...
谷粒商城-商品服务-品牌管理-阿里云云存储+JSR303数字校验+统一异常处理

谷粒商城-商品服务-品牌管理-阿里云云存储+JSR303数字校验+统一异常处理

阿里云云存储OSS 分布式系统上传文件 分布式系统上传文件 单体应用上传&#xff1a;上传文件到服务器&#xff0c;想获取文件时再向服务器发请求获取文件。 分布式系统上传&#xff1a; 因为有多台服务器&#xff0c;为防止负载均衡导致获取文件时没找到对应的服务器&#xf…
阅读更多...
数字信号处理教程学习笔记1-第2章时域中的离散信号和系统

数字信号处理教程学习笔记1-第2章时域中的离散信号和系统

信号处理的任务示意方框图 模拟信号和数字信号分别是啥样的，有啥区别
阅读更多...
MySQL数据库设计原则

MySQL数据库设计原则

0.简单的处理逻辑 一.MySQL完整性约束 主键约束 primary key 自增键约束 auto_increment 唯一键约束 unique 非空约束 not null 默认值约束 default 外键约束 foreign key 下面是一个sql语句创建一个表,可以看出来了使用了哪几个约束吗? create table user( id int…
阅读更多...
vue前端开发自学,借助KeepAlive标签保持组件的存活

vue前端开发自学,借助KeepAlive标签保持组件的存活

vue前端开发自学,借助KeepAlive标签保持组件的存活&#xff01;如果不想让组件在切换的时候&#xff0c;被默认操作&#xff08;卸载掉了&#xff09;。他们需要使用这个这个表情哦。 下面给大家看看代码情况。 <template><h3>ComA</h3><p>{{ messag…
阅读更多...
Arduino开发实例-AS608光学指纹传感器驱动

Arduino开发实例-AS608光学指纹传感器驱动

AS608光学指纹传感器驱动 文章目录 AS608光学指纹传感器驱动1、AS608光学指纹传感器介绍2、硬件准备及接线3、代码实现3.1 指纹录入3.2 指纹匹配验证1、AS608光学指纹传感器介绍 AS608 光学指纹传感器可用于扫描指纹，它也可以通过串行通信将处理后的数据发送到微控制器。 所有…
阅读更多...
鸿蒙(HarmonyOS)应用开发指南

鸿蒙(HarmonyOS)应用开发指南

1. 概述 1.1 简介 鸿蒙&#xff08;即 HarmonyOS &#xff0c;开发代号 Ark&#xff0c;正式名称为华为终端鸿蒙智能设备操作系统软件&#xff09;是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的分布式操作系统。该系统利用“分布式”技术将手机、电…
阅读更多...
好用的便签有哪些？windows便签工具在哪打开？

好用的便签有哪些？windows便签工具在哪打开？

每当我8点准时上班&#xff0c;在等待电脑开机的过程&#xff0c;我都会习惯性地思考整理今天要晚上的任务&#xff0c;列出所要完成的待办事项。随着每一项任务的清晰呈现&#xff0c;我的心情也逐渐明朗起来。当然了&#xff0c;这个时候&#xff0c;我迫切需要一款好用的便签…
阅读更多...
【LeetCode】142. 环形链表 II（中等）——代码随想录算法训练营Day04

【LeetCode】142. 环形链表 II（中等）——代码随想录算法训练营Day04

题目链接&#xff1a;142. 环形链表 II 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了…
阅读更多...
springcloud stream消息驱动

springcloud stream消息驱动

简介 Spring Cloud Stream是一个用于构建基于事件驱动的微服务应用程序的框架&#xff0c;其核心目标是简化开发过程&#xff0c;降低消息通信的复杂性&#xff0c;从而使开发人员能够专注于编写业务逻辑。Spring Cloud Stream通过提供Binder抽象&#xff0c;将应用程序与消息…
阅读更多...
使用 Docker 进行 Go 应用程序引导指南

使用 Docker 进行 Go 应用程序引导指南

为在 Docker 中部署的 Go 应用程序做准备 在使用 Go 开发 Web 应用程序时&#xff0c;无论是用于 HTTP 还是其他类型的服务&#xff0c;部署到不同的阶段或环境&#xff08;本地开发、生产环境等&#xff09;都是一个常见的考虑因素。在本文中&#xff0c;我们将探讨在 Docker …
阅读更多...
利用低代码技术，企业怎样开拓数字化转型新路径？

利用低代码技术，企业怎样开拓数字化转型新路径？

近年来&#xff0c;随着技术的发展和市场竞争的加剧&#xff0c;企业数字化转型已成为一种趋势。许多企业已经完成了线上协作办公的初步转型&#xff0c;这主要得益于像钉钉、企微等发展完善的平台&#xff0c;只需将员工全部拉入这些平台&#xff0c;就能实现线上协作办公。 然…
阅读更多...
js逆向第17例：猿人学第13题入门级cookie

js逆向第17例：猿人学第13题入门级cookie

文章目录 一、前言二、定位关键参数三、代码实现一、前言 任务十三：还是抓取这5页的数字，计算加和并提交结果 二、定位关键参数 通过题名已经知道需要破解cookie值，控制台查看请求数据，接口https://match.yuanrenxue.cn/api/match/13?page=2中的yuanrenxue_cookie值应该…
阅读更多...
R2机器人加载棋盘与棋子模型，对urdf、sdf的解释(区分srdf)

R2机器人加载棋盘与棋子模型，对urdf、sdf的解释(区分srdf)

1、概述 urdf、sdf、srdf文件都属于xml的规范格式&#xff0c;解释分别如下&#xff1a;urdf(unified robot description format)叫做"统一机器人描述格式"&#xff0c;主要目的就是提供一种尽可能通用的机器人描述规范&#xff0c;这样对于机器人的描述就可以互相移…
阅读更多...
最新文章

Copyright @ 2022~2023