1.项目架构搭建
1.1 项目介绍
这是一个手机端的应用,项目共有四个模块,分为首页,超市,购物车,个人信息。这个项目这里主要写web后端,通过一些接口,将数据返回给前端。项目前端的web页面设计,css,js框架等来源于网络。如果按基本流程开发,这个项目一般需要1-3个月左右时间。作为个人开发练手项目,这里只是实现一些基础功能。
1.2 创建项目
建议先创建一个虚拟环境,安装所需的包,以防版本冲突。如果是在公司,一般情况下每个项目都会有独立的开发环境,这里只是练习,如何创建虚拟环境不多介绍。
1.2.1创建项目
django-admin startproject aimosxw
1.2.2进入项目目录,创建app
python manage.py startapp App
1.2.3创建数据库
create database aimosxw charset utf8;
1.2.4 目录结构
在项目中创建static文件夹用来存放静态资源
在static目录中可以根据项目需求创建一下目录:
样式目录css
字体目录fonts
图片目录img
脚本文件目录js
媒体文件目录uploads
也可以创建应用目录app,并在app下针对每个功能模块分别创建一下目录
首页home
超市market
购物车cart
我的mine
这样布局可以让项目结构更加有条理。这里因为项目不大,我没有分别存放静态文件。
创建templates文件夹用来存放网页模板
1.2.5 项目配置
setting文件的配置
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = '0id!p+*lki^&rt4zjx$_x_dxi&gvhf7s$=-bnzz5_9*=6yrjc%'
DEBUG = True
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'App',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'middleware.logincheckmiddleware.LoginMiddleware',
]
ROOT_URLCONF = 'aimosxw.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'aimosxw.wsgi.application'
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'aimosxw',
'USER':'root',
'PASSWORD':'password',
'HOST':'localhost',
'PORT':3306
}
}
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static'),
]
MEDIA_ROOT = os.path.join(BASE_DIR,'static/uploads')
MEDIA_KEY_PREFIX='/static/uploads/'
EMAIL_HOST='smtp.163.com'
EMAIL_PORT=25
EMAIL_HOST_USER=''
EMAIL_HOST_PASSWORD=''
1.3 App和url的配置
在App中创建并配置urls.py文件,并配置好工程urls.py的路由规则
aimosxw/urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^sxw/',include('App.urls',namespace='sxw')),
]
在app的views.py文件下去创建视图函数,这个应用下有四大模块,先将框架搭出来,渲染到html页面上
view.py
from django.shortcuts import render
def home(request):
return render(request,'home.html')
def market(request):
return render(request,'market.html')
def cart(request):
return render(request,'cart.html')
def mine(request):
return render(request,'mine.html')
App/urls.py
from App import views
urlpatterns=[
url(r'^home/',views.home,name='home'),
url(r'^market/', views.market, name='market'),
url(r'^cart/', views.cart, name='cart'),
url(r'^mine/', views.mine, name='mine'),
]
1.4 模板文件搭建
1.4.1 将网上下载的静态文件导入
这里主要写后端的内容,前端的不做详解。img文件夹里放的是底部专栏的一些图片,点击时变色,跳转到
相应的页面。
1.4.2 基础模板base.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>
{% block title %}
aimosxw
{% endblock %}
</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/swiper.css' %}">
<link rel="stylesheet" href="{% static 'css/reset.css' %}">
<script type="text/javascript" src="{% static 'js/base.js' %}"></script>
{% block ext_css %}
{% endblock %}
</head>
<body>
{% block header %}
{% endblock %}
{% block content %}
{% endblock %}
{% block footer %}
{% endblock %}
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
<script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
{% block ext_js %}
{% endblock %}
</body>
</html>
1.4.3 主体模板base_main.html
主体模板base_main.html继承自基本模板base.html的内容,同时搭建底部专栏。点击底部栏时,底部栏点击部位会变色,跳转到相应的页面,所以说底部栏是一个公共的模块(顶部也类似),所以将底部和顶部都放在此模板内。
这里的url 'sxw:home’其实是一个url的反向解析。
{% extends 'base.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
{% endblock %}
{% block header %}
<header></header>
{% endblock%}
{% block footer %}
<footer>
<a href="{% url 'sxw:home'%}" class="home">
<dl>
<dt>
<span>
</span>
</dt>
<dd>首页</dd>
</dl>
</a>
<a href="{% url 'sxw:market'%}" class="market">
<dl>
<dt>
<span>
</span>
</dt>
<dd>超市</dd>
</dl>
</a>
<a href="{% url 'sxw:cart'%}" class="cart">
<dl>
<dt>
<span>
</span>
</dt>
<dd>购物车</dd>
</dl>
</a>
<a href="{% url 'sxw:mine'%}" class="mine_icon">
<dl>
<dt>
<span>
</span>
</dt>
<dd>我的</dd>
</dl>
</a>
</footer>
{% endblock%}
1.4.4 各模块模板生成
首页,超市,购物车,个人信息页的html文件继承自base_main.html,block.super的意义是不覆盖父模板的css样式
以home.html为例
{% extends 'base_main.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'main/css/home.css' %}">
{% endblock %}
1.5 复制虚拟环境中的包
整个项目完成后(现在还只是搭了个基本框架)可将虚拟环境配置的包复制到一个文件中,方便项目转移和虚拟环境的配置
在就环境中使用:pip freeze > a.txt
在新环境中使用:pip install -r a.txt