创建Django项目
生成两个子应用myhome、myadmin,在pycharm终端输入
1 2 3
| python manage.py startapp myhome
python manage.py startapp myadmin
|
进入主应用DjangoProject,修改setting
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| pALLOWED_HOSTS = ['*']
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'myhome', 'myadmin', ]
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'pymysqls', 'USER': 'root', 'PASSWORD': '123456', 'HOST': 'localhost', 'PORT': '3306', } }
LANGUAGE_CODE = 'zh-Hans' TIME_ZONE = 'Asia/Shanghai' USE_I18N = True USE_L10N = True USE_TZ = False
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]
|
进入主应用DjangoProject,向__init__.py输入.
1 2
| import pymysql pymysql.install_as_MySQLdb()
|
注意:要去project IntePreter,在为项目添加pymysql.
进入主应用DjangoProject,向urls.py输入
1 2 3 4 5 6 7 8
| from django.urls import path,include from django.contrib import admin
urlpatterns = [ path('myadmin/', include('myadmin.urls')), path('',include('myhome.urls')), ]
|
在应用myhome里创建子路由urls.py,并输入
1 2 3 4 5 6
| from django.urls import re_path from . import views
urlpatterns = [ re_path(r'^',views.index,name="myhome_index"), ]
|
进入应用myhome里的views.py,并输入
1 2 3 4 5 6
| from django.shortcuts import render from django.http import HttpResponse
def index(request): return HttpResponse('网站前台首页')
|
后台用户增加
把应用myadmin里的views.py删除,创建views文件夹,并在里面创建IndexViews.py,UsersViews.py,GoodsViews.py
进入应用myadmin里的urls.py,并输入
1 2 3 4 5 6 7 8 9
| from django.conf.urls import url from .views import IndexViews,UsersViews,GoodsViews
urlpatterns = [ url(r'^$',IndexViews.index,name="myadmin_index"),
url(r'^user/add/$',UsersViews.user_add,name="myadmin_user_add"), url(r'^user/insert/$',UsersViews.user_insert,name="myadmin_user_insert"), ]
|
进入myadmin/views/IndexViews.py,并输入
1 2 3 4 5 6
| from django.shortcuts import render from django.http import HttpResponse
def index(request): return render(request,'myadmin/index.html')
|
进入模板templates,创建myadmin/index.html,并输入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> {% block title %} <title>Amaze UI Admin index Examples</title> {% endblock %} <meta name="description" content="这是一个 index 页面"> <meta name="keywords" content="index"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <link rel="icon" type="image/png" href="/static/myadmin/assets/i/favicon.png"> <link rel="apple-touch-icon-precomposed" href="/static/myadmin/assets/i/app-icon72x72@2x.png"> <meta name="apple-mobile-web-app-title" content="Amaze UI" /> <script src="/static/myadmin/assets/js/echarts.min.js"></script> <link rel="stylesheet" href="/static/myadmin/assets/css/amazeui.min.css" /> <link rel="stylesheet" href="/static/myadmin/assets/css/amazeui.datatables.min.css" /> <link rel="stylesheet" href="/static/myadmin/assets/css/app.css"> <script src="/static/myadmin/assets/js/jquery.min.js"></script> </head>
<body data-type="index"> <script src="/static/myadmin/assets/js/theme.js"></script> <div class="am-g tpl-g"> <!-- 头部 --> <header> <!-- logo --> <div class="am-fl tpl-header-logo"> <a href="javascript:;"><img src="/static/myadmin/assets/img/logo.png" alt=""></a> </div> <!-- 右侧内容 --> <div class="tpl-header-fluid"> <!-- 侧边切换 --> <div class="am-fl tpl-header-switch-button am-icon-list"> <span>
</span> </div> <!-- 搜索 --> <div class="am-fl tpl-header-search"> <form class="tpl-header-search-form" action="javascript:;"> <button class="tpl-header-search-btn am-icon-search"></button> <input class="tpl-header-search-box" type="text" placeholder="搜索内容..."> </form> </div> <!-- 其它功能--> <div class="am-fr tpl-header-navbar"> <ul> <!-- 欢迎语 --> <li class="am-text-sm tpl-header-navbar-welcome"> <a href="javascript:;">欢迎你, <span>Amaze UI</span> </a> </li>
<!-- 新邮件 --> <li class="am-dropdown tpl-dropdown" data-am-dropdown> <a href="javascript:;" class="am-dropdown-toggle tpl-dropdown-toggle" data-am-dropdown-toggle> <i class="am-icon-envelope"></i> <span class="am-badge am-badge-success am-round item-feed-badge">4</span> </a> <!-- 弹出列表 --> <ul class="am-dropdown-content tpl-dropdown-content"> <li class="tpl-dropdown-menu-messages"> <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf"> <div class="menu-messages-ico"> <img src="/static/myadmin/assets/img/user04.png" alt=""> </div> <div class="menu-messages-time"> 3小时前 </div> <div class="menu-messages-content"> <div class="menu-messages-content-title"> <i class="am-icon-circle-o am-text-success"></i> <span>夕风色</span> </div> <div class="am-text-truncate"> Amaze UI 的诞生,依托于 GitHub 及其他技术社区上一些优秀的资源;Amaze UI 的成长,则离不开用户的支持。 </div> <div class="menu-messages-content-time">2016-09-21 下午 16:40</div> </div> </a> </li>
<li class="tpl-dropdown-menu-messages"> <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf"> <div class="menu-messages-ico"> <img src="/static/myadmin/assets/img/user02.png" alt=""> </div> <div class="menu-messages-time"> 5天前 </div> <div class="menu-messages-content"> <div class="menu-messages-content-title"> <i class="am-icon-circle-o am-text-warning"></i> <span>禁言小张</span> </div> <div class="am-text-truncate"> 为了能最准确的传达所描述的问题, 建议你在反馈时附上演示,方便我们理解。 </div> <div class="menu-messages-content-time">2016-09-16 上午 09:23</div> </div> </a> </li> <li class="tpl-dropdown-menu-messages"> <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf"> <i class="am-icon-circle-o"></i> 进入列表… </a> </li> </ul> </li>
<!-- 新提示 --> <li class="am-dropdown" data-am-dropdown> <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle> <i class="am-icon-bell"></i> <span class="am-badge am-badge-warning am-round item-feed-badge">5</span> </a>
<!-- 弹出列表 --> <ul class="am-dropdown-content tpl-dropdown-content"> <li class="tpl-dropdown-menu-notifications"> <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf"> <div class="tpl-dropdown-menu-notifications-title"> <i class="am-icon-line-chart"></i> <span> 有6笔新的销售订单</span> </div> <div class="tpl-dropdown-menu-notifications-time"> 12分钟前 </div> </a> </li> <li class="tpl-dropdown-menu-notifications"> <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf"> <div class="tpl-dropdown-menu-notifications-title"> <i class="am-icon-star"></i> <span> 有3个来自人事部的消息</span> </div> <div class="tpl-dropdown-menu-notifications-time"> 30分钟前 </div> </a> </li> <li class="tpl-dropdown-menu-notifications"> <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf"> <div class="tpl-dropdown-menu-notifications-title"> <i class="am-icon-folder-o"></i> <span> 上午开会记录存档</span> </div> <div class="tpl-dropdown-menu-notifications-time"> 1天前 </div> </a> </li>
<li class="tpl-dropdown-menu-notifications"> <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf"> <i class="am-icon-bell"></i> 进入列表… </a> </li> </ul> </li>
<!-- 退出 --> <li class="am-text-sm"> <a href="javascript:;"> <span class="am-icon-sign-out"></span> 退出 </a> </li> </ul> </div> </div>
</header> <!-- 风格切换 --> <div class="tpl-skiner"> <div class="tpl-skiner-toggle am-icon-cog"> </div> <div class="tpl-skiner-content"> <div class="tpl-skiner-content-title"> 选择主题 </div> <div class="tpl-skiner-content-bar"> <span class="skiner-color skiner-white" data-color="theme-white"></span> <span class="skiner-color skiner-black" data-color="theme-black"></span> </div> </div> </div> <!-- 侧边导航栏 --> <div class="left-sidebar"> <!-- 用户信息 --> <div class="tpl-sidebar-user-panel"> <div class="tpl-user-panel-slide-toggleable"> <div class="tpl-user-panel-profile-picture"> <img src="/static/myadmin/assets/img/user04.png" alt=""> </div> <span class="user-panel-logged-in-text"> <i class="am-icon-circle-o am-text-success tpl-user-panel-status-icon"></i> 禁言小张 </span> <a href="javascript:;" class="tpl-user-panel-action-link"> <span class="am-icon-pencil"></span> 账号设置</a> </div> </div>
<!-- 菜单 --> <ul class="sidebar-nav">
<li class="sidebar-nav-link"> <a href="index.html" class="active"> <i class="am-icon-home sidebar-nav-link-logo"></i> 首页 </a>
<li class="sidebar-nav-link"> <a href="javascript:;" class="sidebar-nav-sub-title"> <i class="am-icon-users sidebar-nav-link-logo"></i> 会员管理 <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span> </a> <ul class="sidebar-nav sidebar-nav-sub"> <li class="sidebar-nav-link"> <a href="{% url 'myadmin_user_index' %}"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 会员列表 </a> </li>
<li class="sidebar-nav-link"> <a href="{% url 'myadmin_user_add' %}"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 会员添加 </a> </li> </ul> </li>
<li class="sidebar-nav-link"> <a href="javascript:;" class="sidebar-nav-sub-title"> <i class="am-icon-table sidebar-nav-link-logo"></i> 商品分类管理 <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span> </a> <ul class="sidebar-nav sidebar-nav-sub"> <li class="sidebar-nav-link"> <a href="{% url 'myadmin_cate_index' %}"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 商品分类列表 </a> </li>
<li class="sidebar-nav-link"> <a href="{% url 'myadmin_cate_add' %}"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 商品分类添加 </a> </li> </ul> </li>
<li class="sidebar-nav-link"> <a href="javascript:;" class="sidebar-nav-sub-title"> <i class="am-icon-shopping-bag sidebar-nav-link-logo"></i> 商品管理 <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span> </a> <ul class="sidebar-nav sidebar-nav-sub"> <li class="sidebar-nav-link"> <a href="{% url 'myadmin_goods_index' %}"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 商品列表 </a> </li>
<li class="sidebar-nav-link"> <a href="{% url 'myadmin_goods_add' %}"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 商品添加 </a> </li> </ul> </li>
<li class="sidebar-nav-link"> <a href="javascript:;" class="sidebar-nav-sub-title"> <i class="am-icon-table sidebar-nav-link-logo"></i> 订单管理 <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span> </a> <ul class="sidebar-nav sidebar-nav-sub"> <li class="sidebar-nav-link"> <a href="table-list.html"> <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 订单列表 </a> </li> </ul> </li> </ul> </div>
<!-- 内容区域 --> <div class="tpl-content-wrapper"> {% block con %} <div class="container-fluid am-cf"> <div class="row"> <div class="am-u-sm-12 am-u-md-12 am-u-lg-9"> <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 部件首页 <small>Amaze UI</small></div> <p class="page-header-description">Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件。</p> </div> <div class="am-u-lg-3 tpl-index-settings-button"> <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button> </div> </div>
</div> {% endblock %}
<div class="row-content am-cf"> </div> </div> </div> </div> <script src="/static/myadmin/assets/js/amazeui.min.js"></script> <script src="/static/myadmin/assets/js/amazeui.datatables.min.js"></script> <script src="/static/myadmin/assets/js/dataTables.responsive.min.js"></script> <script src="/static/myadmin/assets/js/app.js"></script> </body> </html>
|
在项目根目录下创建static文件夹,并在此文件夹下创建myhome,myadmin,uploads文件夹.
在static/myadmin下创建assets文件夹,把css、fonts、i、js、img这些静态资源各自存入相同名字的文件夹,然后把这些文件夹放入assets。
进入应用myadmin/views/UsersViews.py,并输入
1 2 3 4 5 6
| from django.shortcuts import render from django.http import HttpResponse
def user_add(request): return render(request,'myadmin/users/add.html')
|
进入模板templates/myadmin/users,创建add.html,并输入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
| {% extends 'myadmin/index.html' %}
{% block title %} <title>后台会员添加</title> {% endblock %}
{% block con %} <div class="row-content am-cf"> <div class="row"> <div class="am-u-sm-12 am-u-md-12 am-u-lg-12"> <div class="widget am-cf"> <div class="widget-head am-cf"> <div class="widget-title am-fl"> 会员添加 </div> <div class="widget-function am-fr"> <a href="javascript:;" class="am-icon-cog"> </a> </div> </div> <div class="widget-body am-fr"> <form action="{% url 'myadmin_user_insert' %}" method="POST" enctype="multipart/form-data" class="am-form tpl-form-line-form"> {% csrf_token %} <div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 昵称 </label> <div class="am-u-sm-9"> <input type="text" name="nikename" class="tpl-form-input" placeholder="请输入昵称"> </div> </div> <div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 密码 </label> <div class="am-u-sm-9"> <input type="password" name="password" class="tpl-form-input" placeholder="请输入密码"> </div> </div> <div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 手机号 </label> <div class="am-u-sm-9"> <input type="text" name="phone" class="tpl-form-input" placeholder="请输入手机号"> </div> </div> <div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 邮箱 </label> <div class="am-u-sm-9"> <input type="email" name="email" class="tpl-form-input" placeholder="请输入email"> </div> </div>
<div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 年龄 </label> <div class="am-u-sm-9"> <input type="number" name="age" class="tpl-form-input" placeholder="请输入年龄"> </div> </div>
<div class="am-form-group"> <label for="user-name" class="am-u-sm-3 am-form-label"> 性别 </label> <div class="am-u-sm-9"> <label class="am-radio-inline"><input type="radio" value="0" name="sex"> 女</label> <label class="am-radio-inline"><input type="radio" value="1" name="sex"> 男</label> </div> </div>
<div class="am-form-group"> <label for="user-weibo" class="am-u-sm-3 am-form-label"> 封面图 <span class="tpl-form-line-small-title"> Images </span> </label> <div class="am-u-sm-9"> <div class="am-form-group am-form-file"> <div class="tpl-form-file-img"> <img id="showImg" style="width: 200px;" src="assets/img/a5.png" alt=""> </div> <button type="button" class="am-btn am-btn-danger am-btn-sm"> <i class="am-icon-cloud-upload"> </i> 添加封面图片 </button> <input class="ReadFile" id="doc-form-file" name="pic" type="file" multiple=""> </div> </div> </div>
<div class="am-form-group"> <div class="am-u-sm-9 am-u-sm-push-3"> <button class="am-btn am-btn-primary tpl-btn-bg-color-success "> 提交 </button> </div> </div> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> $('.ReadFile').change(function(){ var file = this.files[0];
//限定上传文件的类型,判断是否是图片类型 if (!/image\/\w+/.test(file.type)) { alert("只能选择图片"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { base64Code = this.result; //把得到的base64赋值到img标签显示 $("#showImg").attr("src", base64Code); } }) </script> {% endblock %}
|
进入应用myadmin/models.py,并输入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| from django.db import models
class Users(models.Model): nikename = models.CharField(max_length=20,null=True) password = models.CharField(max_length=100) phone = models.CharField(max_length=11) email = models.CharField(max_length=100) age = models.IntegerField(null=True) pic_url = models.CharField(max_length=100) SEX_CHOICES = ( (0, '女'), (1, '男'), ) sex = models.CharField(max_length=1,null=True,choices=SEX_CHOICES) status = models.IntegerField(default=0) addtime = models.DateTimeField(auto_now_add=True)
|
进入应用myadmin/views/UsersViews.py,并输入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| from ..models import Users from django.shortcuts import reverse
def user_insert(request): data = request.POST.dict() data.pop('csrfmiddlewaretoken')
data['password'] = make_password(data['password'], None, 'pbkdf2_sha256')
myfile = request.FILES.get('pic',None) if not myfile: return HttpResponse('<script>alert("没有选择头像上传");history.back(-1);</script>')
data['pic_url'] = uploads_pic(myfile) print(data)
try: ob = Users(**data) print(ob) ob.save() return HttpResponse('<script>alert("添加成功");location.href="'+reverse('myadmin_user_index')+'";</script>') except: pass return HttpResponse('<script>alert("添加失败");history.back(-1);</script>')
def uploads_pic(myfile): try: import time filename = str(time.time())+"."+myfile.name.split('.').pop() destination = open("./static/uploads/"+filename,"wb+") for chunk in myfile.chunks(): destination.write(chunk) destination.close() return '/static/uploads/'+filename except: return False
|
在pycharm终端输入:python manage.py makemigrations
在pycharm终端输入:python manage.py migrate