新浦京81707con > 软件下载 > 网站页面搭建,web开发之url路由设计

原标题:网站页面搭建,web开发之url路由设计

浏览次数:177 时间:2019-07-10

'DEFAULT_THEME' => '2014',  'TMPL_DETECT_THEME' => true, // 自动侦测模板主题  'THEME_LIST' => '2012,2014', // 支持的模板主题项

前端搭建

概述

 

兑现前台后台html布局页面搭建

前台页面源码链接:
https://github.com/mtianyan/movie_project_html

  • 将全部前台页面源码放入我们的staic/tpl目录下。

  • 打开tpl/2-movie/index.html.

点击右上角在浏览器里预览网页。能够看看首页。

图片 1

首页

网页全部分为:

  • 幻灯片banner展示
  • 标签的筛选
  • 卡牌的影视展览
  • 分页效果
  • 最上端的导航
  • 底层的版权信息。
  • 搜索
  • 招来结果的分页。点击播放
  • 播音分界面:电影介绍,讨论。批评列表分页
  • 会员登陆注册界面
  • 会员核心:修改材质,密码。抵触记录修改
  • 收藏电影。

近几来在搞本身的go web开垦框架, 反正也没希图私藏, 所以未来先拿出url路由统一准备那块来写一篇博客. 做过web开拓的都掌握,

二零一三和二零一五的目录结构

前台布局搭建:

  • 静态文件的引进
{{ url_for('static',filename='文件路径')}}
  • 定义路由:
{{ url_for('模块名.视图名',变量=参数)}}
  • 定义数据块:
{%block 数据块名称%} .... {% endblock %}
  1. 第一在templated/home目录下成立home.html

网址共用的有个别是顶部和底部。

tpl/2-movie/nav.html就是大家须求的领航和后面部分。

将10-13行link标签修改为静态文件

 <link rel="shortcut icon" href="{{ url_for('static',filename='baselogo.png') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='base/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='base/css/bootstrap-movie.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='base/css/animate.css') }}">

<img src="{{ url_for('static',filename='baselogo.png') }}" style="height:30px;">

 <script src="{{ url_for('static',filename='base/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='base/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static',filename='base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ url_for('static',filename='base/js/wow.min.js') }}"></script>
<script src="{{ url_for('static',filename='lazyload/jquery.lazyload.min.js') }}"></script>

将原来的援用外界的css/图片/js的局部。改写为static静态目录下文件名。
filename 应该是staic之后的相对地址。

在如下的剧情部分定义content块。

<!--内容-->
<div class="container" style="margin-top:76px">
    {% block content %}{% endblock %}
</div>
<!--内容-->

开垦home模块的视图管理器(views.py):

  • 概念大家的路由。

home/view,py

from . import home
from flask import render_template

@home.route("/")
def index():
    return render_template("home/index.html")

那会儿大家该去创设大家的index.html.(home/index.html)

{% extends "home.html" %}

{% block %}
<h1>helloworld</h1>
{% endblock %}

再三再四home.html,然后写二个块。

开采入口脚本。运营manage.py

图片 2

报错

改为:继承home/重写content块

{% extends "home.html" %}

{% block content %}
<h1>helloworld</h1>
{% endblock %}

报错:

jinja2.exceptions.TemplateNotFound
jinja2.exceptions.TemplateNotFound: home.html

因为大家的路子有毛病:

{% extends "home/home.html" %}

{% block content %}
<h1>helloworld</h1>
{% endblock %}

将static/tpl/static/base剪切到static/

图片 3

类型目录

那儿再去运营manage.py

访问咱们能够看到首页的意义

图片 4

首页效果

叁个好的url路由得以让用户浏览器的地方栏总有规律可循, 能够让大家开拓的网址更便于让寻找引擎收音和录音, 能够让咱们开荒者更是有益于的MVC.

app/tpl/2012

会员登入页面包车型客车搭建

亟待精晓的知识点:

#登录
@home.route("/login/")
def login():
    return render_template("home/login.html")

#退出
@home.route("/logout/")
def logout():
    return redirect(url_for('home.login'))

上述登陆和剥离分别选用return渲染的沙盘以及一直重定向。

大家在使用别的web开拓框架的时候, url路由自然也会作为框架的贰个要害成效照旧说是贰个宣传”卖点”. 所以说,

app/tpl/2014

编码

apphomeviews.py:
增加代码

from flask import render_template,url_for,redirect
#登录
@home.route("/login/")
def login():
    return render_template("home/login.html")

#退出
@home.route("/logout/")
def logout():
    return redirect(url_for('home.login'))
#重定向到home模块下的登录。
  • 在apptemplateshome下新建login.html并将app/static/tpl/2-movie/login.html中故事情节注释的部分复制出来贴进去。

图片 5

login.html

  • 修改app/templates/home/home.html的报到退出开关的href
<a class="curlink" href="{{url_for('home.index')}}">&nbsp;电影</a>
<a class="curlink" href="{{ url_for('home.login')}}">&nbsp;登录</a>
<a class="curlink" href="{{ url_for('home.logout')}}">&nbsp;退出</a>

瞩目:传入的是贰个'home.login'并不是把单引号漏了

修改变成后跻身manage.py点击run。访谈

能够观察登入分界面已经好了http://127.0.0.1:5000/login/

图片 6

登陆分界面

点击登入和点击退出。也都能正确的跳转到登入。

贰个web框架中url路由的身份依旧不行关键的.

 

会员注册页面的搭建

回来go web开荒中, 那什么用go来完结三个url路由作用吗? 完成后代码怎么着下笔呢? 上边大家就来一步步的去贯彻三个回顾的url路由效用.

切换大旨时,在url上增加

编码

定义home/views.py:

# 会员注册
@home.route("/register/")
def regist():
    return render_template("home/register.html")
  • 在apptemplateshome下新建register.html并将app/static/tpl/2-movie/register.html中注释申明为内容的有的复制出来贴进去。

这里小编的逼迫症犯了,请自行将有所的regist 改为register写全。

此刻大家点击电影helloworld,点击登陆,注册,布满浮现对应分界面。点击退出,会跳转到登陆。

此间为我上次前去考研中断项目标地方

对应付出commit: 项目暂停重启初叶化: 首页路由,登入,注册已变成。

如何使用

就切换成二〇一二的宗旨了,且之后全部的url前面没有需要再跟上?t=2011

会员中央界面搭建

在我们上学怎么着达成从前, 鲜明是要先看看哪些利用的. 其实选拔起来相当粗略, 因为笔者事先写过叁个PHP的web开拓框架, 所以大家的路由部分的应用像极了PHP(ThinkPHP). 来探视代码吧.


基本功语句概要

# 会员中心
@home.route("/user/")
# 修改密码
@home.route("/pwd/")
# 评论记录
@home.route("/comments/")
# 登录日志
@home.route("/loginlog/")
# 收藏
@home.route("/moviecol/")

package main

骨子里编码与模板创造

@home.route("/user/")
def user():
    """
    用户中心
    """
    return render_template("home/user.html")


@home.route("/pwd/")
def pwd():
    """
    修改密码
    """
    return render_template("home/pwd.html")


@home.route("/comments/")
def comments():
    """
    评论记录
    """
    return render_template("home/comments.html")


@home.route("/loginlog/")
def loginlog():
    """
    登录日志
    """
    return render_template("home/loginlog.html")


@home.route("/moviecol/")
def moviecol():
    """
    收藏电影
    """
    return render_template("home/moviecol.html")

接下来分别成立对应的template

图片 7

mark

概念会员中央界面。

图片 8

mark

能够看到全部微电影用户焦点的左臂是三个菜单。这么些菜单是用户基本的这么些意义共用的。

新建menu.html

将app/static/tpl/2-movie/user.html中的菜单拷贝过来。

图片 9

mark

修改我们的url链接

图片 10

mark

编写user.html

图片 11

mark

里面包车型客车contaier部分为app/static/tpl/2-movie/user.html中的内容部分

兴许报错(已化解):

AssertionError: View function mapping is overwriting an existing endpoint function: home.pwd

证实视图中定义了四个重名的函数。

图片 12

mark

包含menu页面。

那时候home.html中通往会员的url还尚无发掘,前往修改。

图片 13

mark

能够看出user中还会有和大家的home页面之余的友好特别的事物

图片 14

mark

将home中的style合併一下。

图片 15

mark

在home.html中定义三个css 数据块,用于其外孙子们重写该数据块。

图片 16

mark

前往user.html中重写

将app/static/tpl/2-movie/user.html中的style部分拷贝过来

图片 17

mark

图片 18

mark

将user收缩至如图结构,覆盖到pwd comments loginlog moviecol

将在那之中的col-md-9 分别用/tpl/2-movie/中的那部分代表。

将每种页面内的style覆盖css数据块

找猫画虎,自行达成环节。

import (    

贯彻菜单激活某一个有血有肉项

为menu中的每一样增加id

图片 19

mark

在home.html中添增加少块block js,因为我们想在menu中央银行使jQuery动态增添class

图片 20

mark

user.html中再一次改block

图片 21

mark

接下来左眼望着图中种种,左臂去别的文件中分别m2,m3

图片 22

mark

那会儿并从未完成激活样式。调节台查看发掘是lazyload没加载

将tpl中 lazyload拷贝到static

图片 23

mark

并发八个激活,是因为忘记删除默许的user active 前往menu中去除就可以。

点击登入注册权且设置为跳转会员中央。

将user.html替换为

图片 24

mark

付给commit:前台: 会员中央搭建

交给的代码有局地难点:

敲入眼: jinja2 urlfor中括号里面必须单引号包裹。不可能平昔填home.user

jinja2.exceptions.UndefinedError
jinja2.exceptions.UndefinedError: 'home' is undefined

"./app"

影片列表页面搭建

# 列表
@home.route("/")
def index():
    return render_template("home/index.html")

# 动画
@home.route("/animation/")
def animation():
    return render_template("home/animation.html")

新建layout.html 复制home.html 到 layout

将内容部分。

图片 25

mark

只保留content

打开index.html继承layout

图片 26

mark

将tpl/index.html中的电影列表部分粘贴到content个中。

将html收至如图形状

图片 27

mark

只保留前四个col-md-3,别的先删除了。

将走俏影片也拷过来。能够观看热销电影指向一个iframe。animation

将tpl/animation的代码复制到home/animation(新建)中

将其配套的静态文件,在static目录下新建八个anim目录寄存。

图片 28

mark

将animation.html中的静态文件自行开始展览退换。

图片 29

mark

布局首页指向animation的url

只保留一个col-md-3选拔for循环创设13个。

图片 30

mark

那会儿运营项目,可能遇到的报错。

  1. 静态文件的格式,单引号未有成对加多
  2. 图表不出示,是忘记增加.jpg后缀

列表的holder.js未有显得

图片 31

mark

此刻在layout中增加对于holder.js的援助。

图片 32

mark

"./controller"

影视寻觅页面搭建

@home.route("/search/")
def search():
    """
    搜索
    """
    return render_template("home/search.html")

创办search.html,内容如下

图片 33

mark

因为home.html的content外围已经有二个container div了,所以将tpl/search.html中的row部分拷进来。

图片 34

mark

图片 35

mark

将div media 删除到剩余叁个。使用for进行填空。

图片 36

mark

前去home模板中为搜索加多url

图片 37

mark

还要修改layout和home八个html中的search url 链接

若是开采holder.js没有体现图片站位,前去增多图片占位

图片 38

mark

)

影片详细情形页面搭建

@home.route("/play/")
def play():
    """
    播放
    """
    return render_template("home/play.html")

新建play.html

图片 39

mark

跟搜索差不离优孟衣冠做出来。

将尾部中的play页面只有的css内容拷贝过来,用css数据块包裹

图片 40

mark

将含有播放页面包车型大巴静态能源都分布放入css 和 js 块中。

将url路线改好为url_for格式,此时能够窥见我们的那多少个static下并未这一个。
将tpl中静态财富复制过去。

报错:

jinja2.exceptions.TemplateSyntaxError
jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'

相似原因都是urlfor标签未不奇怪

将home中的.html的跳转全体制改正成url for
将index中的播放同理修改

图片 41

mark

招来中的电影播放与收藏中的电影播放。

深藏香岛中华电力有限公司影项应用for range 大法管理

func main() {

404页面搭建

@app.errorhandler(404)
def page_not_found(error):
    """
    404
    """
    return render_template("home/404.html"), 404

图片 42

mark

新建404页面。将tpl下404复制过来

将static文件全体自动修改。

输入错误地址依旧提醒not found 是因为大家照例张开的是debug情势。

如上是小编在django中的知情。flask中debug格局下还是能404

修改404中 index的url链接。

对应的commit提交:

第五章实现

app.Static["/static"] = "./js"

app.AutoRouter(&controller.IndexController{})

app.RunOn(":8080")

}

三行代码, 第一行的法力我们都应有了解, 正是去serve一些静态文件(譬喻js, css等文件), 第二行代码是去挂号八个Controller, 那行代码在PHP是未曾的, 毕竟PHP是动态语言, 二个__autoload就能够实现类的加载, 而go作为静态语言未有这项特色, 所以大家仍旧需求手工业注册的(思虑一下, 这里是或不是足以想java同样放到配置文件中吗? 那么些意义留到以后优化的时候拉长吧.) 还也许有最终一行代码没说, 其实正是开发银行server了, 这里大家监听了8080端口.

上边的代码不会细小略, 我们来看看那一个IndexController怎么写的.

package controller

import (   

 "../app"

"../funcs"

"html/template"

)

type IndexController struct {

app.App

}

func (i *IndexController) Index() {

i.Data["name"] = "qibin"

i.Data["email"] = "qibin0506@gmail.com"

//i.Display("./view/info.tpl", "./view/header.tpl", "./view/footer.tpl")

i.DisplayWithFuncs(template.FuncMap{"look": funcs.Lookup}, "./view/info.tpl", "./view/header.tpl", "./view/footer.tpl")

}

率先我们定义一个结构体, 那些结构体无名组合了App这几个结构体(用面向对象的话说正是延续了), 然大家给他定义了壹个Index方法, 那其间具体干了什么大家先不用去关切. 那怎么访谈到吧? 今后运维代码, 在浏览器输入http://localhost:8080抑或输入http://localhost:8080/index/index就能够看出我们在Index方法里输出的开始和结果了, 具体怎么完结的, 其实那统统是url路由的贡献, 上边大家就起来出手计划布署这样叁个url路由成效.

url路由的打算

地点的AutoRouter看起来很神奇,具体干了吗啊? 我们先来看看这么些注册路由的机能是怎么着实现的吧.

package app

import (   

 "reflect"

"strings"

)

var mapping map[string]reflect.Type = make(map[string]reflect.Type)

func router(pattern string, t reflect.Type) {

mapping[strings.ToLower(pattern)] = t

}func Router(pattern string, app IApp) {

refV := reflect.ValueOf(app)

refT := reflect.Indirect(refV).Type()

router(pattern, refT)

}

func AutoRouter(app IApp) {

refV := reflect.ValueOf(app)

refT := reflect.Indirect(refV).Type()

refName := strings.TrimSuffix(strings.ToLower(refT.Name()), "controller")

router(refName, refT)

}

率先我们定义了三个map变量, 他的key是两个string类型, 大家估摸显著是大家在浏览器中输入的可怜url的某一有的, 然后我们经过它来收获到具体要施行拿个结构体. 那她的value呢? 二个reflect.Type是干嘛的? 先别发急, 我们来看看AutoRouter的完成代码就领会了. 在AutoRouter里, 首先大家用reflect.ValueOf来赢获得大家报了名的非常结构体的Value, 紧接着大家又赢得了它的Type, 最终我们将这一对string,Type放到了map了. 不过这里的代码仅仅是演说了怎么注册进去的, 而未有表达为啥要保存Type啊, 这里偷偷告诉您, 其实对于每一回访谈, 大家找到相应的Controller后并非也迟早不容许是直接调用那个结构体上的不二等秘书籍, 而是通过反射新建八个实例去调用. 具体的代码大家稍后会谈起.

本文由新浦京81707con发布于软件下载,转载请注明出处:网站页面搭建,web开发之url路由设计

关键词: 新浦京81707con Pythone...

上一篇:couldn&#39;t register *** with the bootstrap server. Err

下一篇:没有了