前端移植说明

前端移植说明

根据我们的需求，我觉得我们可以取以下几部分的页面

我的初步构想是这样：

我们不建立单独的后台管理模块了，而是采取强制登陆的措施，这样我们可以省去一部分未登录的页面设计

第一部分工作：抽取公共页面

这部分的工作目的是，一部分写死的内容，我们不能每个页面都写一份，这样不利于维护，在页面展示的部分我们要抽取出来

其中包括：

• 导航栏的抽取（每个页面加载时动态加载）
• 每个页面底部的信息抽取（每个页面加载时动态加载）
• 公共常量的抽取（是对没考虑到的进行补充）

这部分的工作必须依托django，因为我们牵扯到动态加载，光是本地肯定是加载不了的，所以要求我们的工作空间是一样的，我觉得我们有必要统一一下我们的工作目录。

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
FONT_DIR = os.path.dirname(BASE_DIR) + r"\font"
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(FONT_DIR, 'static')],
        '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',
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',
            ],
        },
    },
]
#你们肯定知道上面部分的DIRS部分，就是告诉django去找html页面的目录，BASE_DIR是一个项目创建时的常量

STATIC_URL='/static/', 这个static 是在Django 具体APP下建立的static目录，用来存放静态资源。而STATICFILES_DIRS一般用来设置通用的静态资源，对应的目录不放在APP下，而是放在Project下，例如：

STATICFILES_DIRS=（os.path.join(BASE_DIR, "common_static"),）

具体在模板文件中访问的时候，都是统一用：/static/资源名的方式，就可以访问到资源，不论具体的目录是APP下的static，还是project下的common_static, 都可以用/static/资源名的方式访问到。

为增强可移植性，在模板中可以用：STATIC_URL来代替具体的/static/来设置资源路径，但是需要在settings.py中2个地方进行设置，否则会发生取不到资源的错误：

1. INSTALLED_APPS 中，加入 'django.contrib.staticfiles'

2. TEMPLATES 中，context_processors中，加入django.template.context_processors.static

模板中调用时：

<img src="{{STATIC_URL}}pic.jpg " />

#####################################################################################

我觉得我们就按照以下项目目录去规范我们之后的设计
├── 项目根目录
│   ├── VisualPytorch
│   │   ├── user
│   │   │   ├── __init__.py
│   │   │   ├── models.py
│   │   │   ├── tests.py
│   │   │   └── views.py
│   │   ├── __init__.py
│   │   ├── journal
│   │   │   ├── __init__.py
│   │   │   ├── models.py
│   │   │   ├── tests.py
│   │   │   └── views.py
│   │   └── Neuralnetwork
│   │       ├── __init__.py
│   │       ├── models.py
│   │       ├── tests.py
│   │       └── views.py
│   ├── __init__.py
│   ├── font#存放我们所有的前端所需要的文件
│   │   ├── css#存放我们自己写的css
│   │   ├── img#存放全部所需图片，而且需要分清子目录，子目录用页面名标识
│   │   ├── javascript#存放我们自己写的javascript
│   │   ├── resources#存放引用所需的外部插件，其中插件最好进行分类，这是个需要细致的活，一下子全导入不分类不利于后期版本的维护
│   │   └── static#存放所有的html页面。html页面必须分类，具体按照如下我的分类即可
│   │       ├── basedir#存放我们抽取出来的页面
│   │   	│   ├──nav.html#导航栏抽取
│   │   	│   ├──aboutus.html#关于我们抽取
│   │       ├── errordir#自定义错误页面
│   │   	│   ├──404.html
│   │   	│   ├──500.html
│   │       ├── index.html
│   │       ├── show.html
│   │       ├── 等等等等的页面

第二部分工作：确定我们的需求

我们找的代码中大量实现了手机端的页面展示，我们不做这方面的考虑，需要对前端代码进行一些过滤，去除这些移动端页面的功能（主要我认为这东西不太好做，因为调试缺乏指导）

确定需求就是确定我们需要哪些页面，所以在这里我列举了了一下我们需要的页面以及具体页面的对应功能，在下一部分实践的过程中来实现我们所需要的功能。

下面的页面均以目前已有素材取名，后期会进行修改（目前存在链接问题没办法改）

业务页面的开发

业务页面	对应功能
index.html	【模型展示】、【用户量统计】、【其他页面引流】，这是唯一一个不登录也可以访问的页面
login.html	【登录注册】
shop.html【改】 wishlist.html【改】	【个人模型的query，只有查的功能】
single-product.html【改】	【单个模型的展示，其中包括具体的参数，实现删改】
my-account.html account.html【此页面没有，但是可以根据my-account.html修改】	【个人信息增删改查，主要是密码】
这下面是原项目中自带的页面	这下面是原项目中自带的页面
feedback.html question.html	【错误反馈】、【问题反馈】。考虑集成成为一个页面
canvas.html	【模型增加】、继承上一版，优化部分ui
help.html	【帮助文档】
models.html	【模型管理】，我们上面的新页面需要继承这个页面继续开发，但是可以修改css来修改风格
show_code.html	【生成代码】

公共页面抽取

公共页面抽取	公共页面对应功能
nav.html	【导航栏抽取页面】
about.html	【每个页面底部的信息抽取】
待补充

错误页面抽取

错误页面抽取	对应功能
404.html	【状态码404对应的错误】
5xx.html	【状态码5开头对应的错误】
待补充

以上是我们基本需求的确定，后续还需要完成技术规格的博客，确定接口

我们的本阶段的主要目的是，完成前端模板的移植，具体实现功能（例如建立模型等等，等待后端开发即可），尤其要注意的是，我们需要一边设计页面，一边设计我们所需要的数据，比如我们是需要将数据存入Session，还是cookie，还是request域中存放数据供前端使用，还是直接由后端传输JSON数据至前端，这个需要我们后续开发继续摸索。

下面是分工

人员	工作
吴凡	负责公共页面的抽取，负责清理残留的移动端设计
钟瑞豪	负责将原有项目的页面集成进入【前段模板】，具体操作4.15开会细聊
苏海翔	根据需求，负责设计【前段模板】的页面，具体操作4.15开会细聊