网上商城

网上商城

1.引言
随着社会的不断发展，科学技术也在不断的更新。Internet作为新型的工具，他的迅速发展为商业界听欧诺个了更多广阔的信息平台与更多的商机，如催化剂一般刺激着商业经济的快速发展。因此选择设计开发一个企业门户网站拥有重要的意义
因此本次我打算开发一个网上商城。网上商城是前端使用bootstrap框架，后台使用Python制作的类淘宝的网上商城，同样实现了电子商务平台应有的基本功能，如：首页商品展示，商品详情信息，用户注册，修改用户信息，地址管理模块，购物车模块，订单结算模块。整个系统都是围绕这几个模块展开设计的。用户可以很好的浏览商品和选购商品，选择更优质、更实惠的商品。

2.系统结构
2.1.系统流程
用户登录系统后，有不同的使用功能，主要功能流程图如下所示：

图 2-1系统流程图django
2.2.系统主要框架
2.2.1.Django
Django是高水准的Python编程语言驱动的一个开源模型．视图，控制器风格的Web应用程序框架，它起源于开源社区。使用这种架构，程序员可以方便、快捷地创建高品质、易维护、数据库驱动的应用程序。这也正是OpenStack的Horizon组件采用这种架构进行设计的主要原因。另外，在Dj ango框架中，还包含许多功能强大的第三方插件，使得Django具有较强的可扩展性 [2] 。Django 项目源自一个在线新闻 Web 站点，于 2005 年以开源的形式被释放出来。Django 框架的核心组件有：

1.用于创建模型的对象关系映射；
2.为最终用户设计较好的管理界面；
3.URL 设计；
4.设计者友好的模板语言；
5.缓存系统。

图 2-2 Flask框架过程图
2.2.2.Mysql
MySQL是一种开放源代码的关系型数据库管理系统（RDBMS），MySQL数据库系统使用最常用的数据库管理语言–结构化查询语言（SQL）进行数据库管理
MySQL的特点
MySQL体积小 、使用成本低 、可移植性强 、适用用户范围广
1) MySQL是开源的，所以你不需要支付额外的费用。
2) MySQL支持大型的数据库。可以处理拥有上千万条记录的大型数据库。
3) MySQL使用标准的SQL数据语言形式。
4) MySQL可以允许于多个系统上，并且支持多种语言。这些编程语言包括C、C++、Python、Java、Perl、PHP、Eiffel、Ruby和Tcl等。
5) MySQL对PHP有很好的支持，PHP是目前最流行的Web开发语言。
6) MySQL支持大型数据库，支持5000万条记录的数据仓库，32位系统表文件最大可支持4GB，64位系统支持最大的表文件为8TB。
7) MySQL是可以定制的，采用了GPL协议，你可以修改源码来开发自己的Mysql系统。

图 2-3 SQLAlchemy架构图

系统功能
2.3.
2.3.1.登录功能
网上商城登录前端：

图 2-4 登录页面

2.3.2.用户注册功能
注册功能页面:

图 2-5 注册页面
2.3.3.用户中心

图 2-6 用户中心
2.3.4地址管理
、
图 2-7 地址管理

2.3.5选择商品样式

图 2-8 商品选择样式
2.3.6商品详情信息

图 2-9 商品详情信息
2.3.7猜你喜欢

图 2-9 猜你喜欢
2.3.8购物车功能

图 2-10 购物车
2.3.9结算功能

图 2-11 结算
2.3.10订单页面

图 2-11 订单页面

3.部分实现代码
3.1.系统登录功能代码
3.1.1.前端调用代码
{% extends ‘base.html’ %}

{% block title %}
用户登录页面
{% endblock %}

{% block headerjs %}

<script type="text/javascript" src="/static/md5-min.js"></script>

{% endblock %}

{% block main %}

 <div class="login-body">
    <div class="login-card">
        <div class="login-top">
            <h3>新用户登录</h3>
            <h5>尊敬的用户，欢迎您回来！</h5>
        </div>
        <div class="login-bottom">
           <form method="post" action="/user/login/" onsubmit="return login();">
               <input type="hidden" name="time" id="time">
                <div class="login-input-box">
                    {% csrf_token %}
                <input type="text" id="uname" name="uname" value="" class="login-admin active" placeholder="邮箱登录">
                <span style="color:red;" id="aSpan"></span>

                <input type="password" id="pwd" name="pwd" value="" class="login-password">
                <span style="color:red;" id="pSpan"></span>

                <input type="text" style="height:36px;width: 100px;" id="code" onblur="checkCode(this.value)"><img src="/user/loadCode.jpg" onclick="changeCode(this)"><span style="color:red;" id="cSpan"></span>

                <input type="hidden" name="redirect" value="{
  {redirect}}">
                <input type="hidden" name="cartitems" value="{
  {cartitems}}">

                <button class="login-btn" style="color: white;text-decoration: none;cursor: pointer">登录</button>
            </div>
           </form>
            <div class="login-img">
                <img src="/static/login_05.png" alt="">
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block footerjs %}

<script>
    //切换验证码
    function changeCode(imgObj){
        imgObj.src = '/user/loadCode.jpg?time='+new Date().getTime();
    }




    function isEmail(str){
        var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        return reg.test(str);
    }

    function login(){
        //获取输入框的值
        var account = $('#uname').val();
        var password = $('#pwd').val();

        //简单校验
        if(account.length<6||!isEmail(account)){
            $('#aSpan').text('邮箱长度不能小于六位');
            return false;
        }

        if(password.length<6){
            $('#pSpan').text('密码长度不能小于六位');
            return false;
        }

        var code = $('#code').val();
        var cflag = checkCode(code);

        if(!cflag){
            $('#cSpan').text('×');
            return false;
        }



        var hex_pwd = hex_md5(password);

        //var hex_pwd = hex_md5(password+time)
        $('#pwd').val(hex_pwd);

        return true;

    }

    function