django+layui藥品傾銷管理系統 數據庫課設 django layui配置 交互

藥品傾銷管理系統

配置說明

版本
django 2.2
layui 2.5.6
python 3.6.2
mysql 隨便

django項目創建以及導入layui

django命令行:

創建項目:
django-admin startproject projectname
cd projectname
django-admin startapp appname
反向生成model
python manage.py inspectdb
開始項目
python manage.py runserver
數據庫遷移,正向更新數據庫
python manage.py makemigrations 【app_name】
python manage.py migrate 【】app_name】

導入layui:

  1. 在主項目projectname下,創建static文件夾

  2. appname目錄下,創建templates文件夾,並在文件夾中再次創建appname文件夾,裏面放需要的html文件

  3. appname目錄下,創建urls.py文件,裏面存放這個app的url

  4. 主項目目錄,settings文件修改數據庫:
    根據需要修改數據庫引擎

    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'my_databas',
            'USER': 'root',
            # 連接mysql數據庫的密碼
            'PASSWORD': '000422',
            'HOST': '127.0.0.1',
            # mysql數據庫的端口號
            'PORT': '3306'
        }
    }
    

    修改靜態資源的配置

    STATIC_URL = '/static/'
    STATIC_ROOT = ''
    STATICFILES_DIRS = ( os.path.join('static'), )
    
  5. 將layui官網下載的文件解壓,放入static文件夾

  6. 從layui官網隨便找個html模板,放入templates

  7. 定義視圖函數,定義路由,運行查看是否出現layui界面:

    	urlpatterns = [
        path('',views.home,name='home'),
        ]
    

    視圖函數

    
    def home(request):
        return render(request,"appname/home.html")
    

    示例html界面,home.html:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>layout 藥品銷售系統 - Layui</title>
    
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "layui/css/layui.css" %}">
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">藥品進銷存管理系統</div>
        <!-- 頭部區域(可配合layui已有的水平導航) -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item">
            <a href="javascript:;">信息中心</a>
            <dl class="layui-nav-child">
                <dd><a href="medicine/">藥品信息</a></dd>
                <dd><a href="worker/">員工信息</a></dd>
                <dd><a href="customer/">客戶信息</a></dd>
                <dd><a href="producer/">廠家信息</a></dd>
                <dd><a href="inv/">庫存信息</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">採購</a></li>
          <li class="layui-nav-item"><a href="">銷售</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">其它系統</a>
            <dl class="layui-nav-child">
              <dd><a href="">郵件管理</a></dd>
              <dd><a href="">消息管理</a></dd>
              <dd><a href="">授權管理</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              賢心
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本資料</a></dd>
              <dd><a href="">安全設置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
      </div>
    
      <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
              <!-- 左側導航區域(可配合layui已有的垂直導航) -->
              <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                      <a class="" href="javascript:;">信息中心</a>
                      <dl class="layui-nav-child">
                            <li class="layui-nav-item">
                              <a href="javascript:;">藥品信息</a>
                              <dl class="layui-nav-child">
                                    <dd><a href="medicine/add">添加藥品</a></dd>
                                    <dd><a href="/medicine/update">修改藥品</a></dd>
                                    <dd><a href="/medicine/select">查找藥品</a></dd>
                                    <dd><a href="/medicine/delete">刪除藥品</a></dd>
                              </dl>
                            </li>
                            <li class="layui-nav-item">
                              <a href="javascript:;">員工信息</a>
                              <dl class="layui-nav-child">
                                    <dd><a href="javascript:;">添加員工</a></dd>
                                    <dd><a href="javascript:;">修改員工</a></dd>
                                    <dd><a href="javascript:;">查找員工</a></dd>
                                    <dd><a href="javascript:;">刪除員工</a></dd>
                              </dl>
                            </li>
                            <li class="layui-nav-item">
                              <a href="javascript:;">客戶信息</a>
                              <dl class="layui-nav-child">
                                    <dd><a href="javascript:;">添加客戶</a></dd>
                                    <dd><a href="javascript:;">修改客戶</a></dd>
                                    <dd><a href="javascript:;">查找客戶</a></dd>
                                    <dd><a href="javascript:;">刪除客戶</a></dd>
                              </dl>
                            </li>
                            <li class="layui-nav-item">
                                <a href="javascript:;">廠家信息</a>
                              <dl class="layui-nav-child">
                                <dd><a href="javascript:;">添加廠家信息</a></dd>
                                <dd><a href="javascript:;">修改廠家信息</a></dd>
                                <dd><a href="javascript:;">查找廠家信息</a></dd>
                                  <dd><a href="javascript:;">刪除廠家信息</a></dd>
                              </dl>
                            </li>
                            <li class="layui-nav-item">
                              <a href="javascript:;">庫存信息</a>
                              <dl class="layui-nav-child">
                                    <dd><a href="javascript:;">添加庫存</a></dd>
                                    <dd><a href="javascript:;">修改庫存</a></dd>
                                    <dd><a href="javascript:;">查找庫存</a></dd>
                                    <dd><a href="javascript:;">刪除庫存</a></dd>
                              </dl>
                            </li>
    
            {#            <dd><a href="">超鏈接</a></dd>#}
                      </dl>
                    </li>
    
                    <li class="layui-nav-item">
                      <a href="javascript:;">採購</a>
                      <dl class="layui-nav-child">
                        <dd><a href="javascript:;">添加進貨信息</a></dd>
                        <dd><a href="javascript:;">修改進貨信息</a></dd>
                        <dd><a href="javascript:;">查找進貨信息</a></dd>
                          <dd><a href="javascript:;">刪除進貨信息</a></dd>
                      </dl>
                    </li>
                      <li class="layui-nav-item">
                          <a href="javascript:;">銷售</a>
                          <dl class="layui-nav-child">
                            <dd><a href="javascript:;">添加銷售信息</a></dd>
                            <dd><a href="javascript:;">修改銷售信息</a></dd>
                            <dd><a href="javascript:;">查找銷售信息</a></dd>
                              <dd><a href="javascript:;">刪除銷售信息</a></dd>
                          </dl>
                      </li>
    
    
              </ul>
            </div>
          </div>
    
      <div class="layui-body">
        <!-- 內容主體區域 -->
        <div style="padding: 15px;">這是主頁面</div>
    
    
          <!DOCTYPE html>
                <html>
                <head>
                  <meta charset="utf-8">
                  <title>Layui</title>
                  <meta name="renderer" content="webkit">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                  <link rel="stylesheet" href="/static/layui/layui.css"  media="all">
                  <!-- 注意:如果你直接複製所有代碼到本地,上述css路徑需要改成你本地的 -->
                </head>
                <body>
                <script src="/static/layui/layui.js" charset="utf-8"></script>
                <!-- 注意:如果你直接複製所有代碼到本地,上述js路徑需要改成你本地的 -->
                {#            代碼寫在這裏!!!!!#}
    
                {#            代碼寫在這裏!!!!!#}
                </body>
                </html>
    
      </div>
    
      <div class="layui-footer">
        <!-- 底部固定區域 -->
        © layui.com - 底部固定區域
      </div>
    </div>
    <script src="../src/layui.js"></script>
    <script>
    //JavaScript代碼區域
    layui.use('element', function(){
      var element = layui.element;
    
    });
    </script>
    </body>
    </html>
    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章