django--14（完整）
一、上下文管理器
作用 每次执行完view都会执行上下文管理器内容的，简化代码
1、每个view里面都需要用到的操作，那你就放到上下文管理器里面查
2、先定义一个函数，函数必须有一个参数，是request
3、这个函数要返回一个字典
4、要加在配置文件里面 TEMPLATES=>options=>
1）user目录下创建python文件process_content.py（文件名自己定义）
内容如下
1 from . import models 2 3 def category_process(request): 4 print('category_process....') 5 categories = models.Category.objects.filter(is_delete=False)#将所有的分类返回 6 return {'nav':categories}
2）settings.py文件中配置新建文件的路径
3）view.py 将重复内容去除
1 def index(request): 2 print('view....index') 3 # catagories = Category.objects.filter(is_delete=False) 4 article = Article.objects.filter(is_delete=False) 5 data = {'articles':article} 6 return render(request,'index.html',data) 7 8 def category(request,id): 9 print('category....index') 10 # catagories = Category.objects.filter(is_delete=False) 11 article = Article.objects.filter(is_delete=False,category_id=id) 12 data = {'articles':article} 13 return render(request,'index.html',data)
4）进入index 页面，修改内容刷新，显示正常；点击分类后，日志中显示打印内容
5) 页面显示如图：
实例站点信息：
1）user目录下创建python文件process_content.py（文件名自己定义）
内容如下
1 def site_process(request): 2 print('site_process....') 3 site_name = '洋洋的博客' 4 desc = '今天有点累' 5 return locals()#函数的意思相当于返回如下信息 6 # return {'site_name':'***','desc':'***'}
2）settings.py文件中配置新建文件的路径
3）index.html替换两处
1 class="l_box" id="stickMe"> 2 <div class="about_me"> 3 <h2>关于我</h2> 4 <ul> 5 <i><img src="/static/images/4.jpg"></i> 6 <p>{{ desc }}</p> 7 </ul>
4）刷新首页--日志效果
5）首页最终效果：
二、模板继承
实现点击文章标题跳转到文章详情页面（复制info.html到templates目录下，更改下部分内容 ）注意：建议新建info.html，将文件内容复制，防止乱码或报错
1、views.py实现文章详情页面接口逻辑
1 def detail(request): 2 # categories = Category.objects.filter(is_delete=False,) 3 id = request.GET.get('id')#文章id 4 result = Article.objects.filter(id = id).first() 5 if result: 6 return render(request,'info.html',{'article':result}) 7 else: 8 return Http404
2、配置urls.py
15 """ 16 from django.contrib import admin 17 from django.urls import path 18 from user.views import index,category,detail 19 urlpatterns = [ 20 path('admin/', admin.site.urls), 21 path('index/', index), 22 path('', index), 23 path('category/<int:id>', category), 24 path('detail/', detail()), 25 ]
3、将模板中的文章详情页面复制到templates目录下，更改css,js,images路径，更改文章标题，简介，内容，更新时间等，将详情页面的分类导航更改成和首页一致
4、info.html中修改配置内容
1）info.html中修改内容1
2）info.html 中修改内容2
3）info.html中修改内容3
4）index.html中修改文章列表中配置的链接
5、效果
1）列表页鼠标放在文章列表处，页面底部显示文章详情页面的链接
2）点击文章列表进入到文章详情页面
继承：
1、将页面公共的部分单独写在一个文件中，标记可变的部分
2、新建base.html,为了单独页面可能访问js,css，节省网速要预留js,css口
base.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>首页_杨青个人博客 - 一个站在web前端设计之路的女技术员个人博客网站</title> 6 <meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,杨青" /> 7 <meta name="description" content="杨青个人博客，是一个站在web前端设计之路的女程序员个人网站，提供个人博客模板免费资源下载的个人原创网站。" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link href="/static/css/base.css" rel="stylesheet"> 10 <link href="/static/css/index.css" rel="stylesheet"> 11 <link href="/static/css/m.css" rel="stylesheet"> 12 <script src="/static/js/jquery.min.js" type="text/javascript"></script> 13 <script type="text/javascript" src="/static/js/hc-sticky.js"></script> 14 <script type="text/javascript" src="/static/js/comm.js"></script> 15 {% block css %} 16 {# <link href="/static/css/base.css" rel="stylesheet">#} 17 {% endblock %} 18 19 </head> 20 <body> 21 <header class="header-navigation" id="header"> 22 <nav><div class="logo"><a href="/">{{ site_name }}</a></div> 23 <h2 id="mnavh"><span class="navicon"></span></h2> 24 <ul id="starlist"> 25 {% for n in nav %} 26 <li><a href="/category/{{ n.id }}">{{ n.name }}</a></li> 27 {% endfor %} 28 </ul> 29 </nav> 30 </header> 31 {% block content %} 32 {% endblock %} 33 34 <footer> 35 <p>Design by <a href="http://www.yangqq.com" target="_blank">杨青个人博客</a> <a href="/">蜀ICP备11002373号-1</a></p> 36 </footer> 37 <a href="#" class="cd-top">Top</a> 38 {% block js %} 39 {% endblock %} 40 </body> 41 </html>
index.html
1 {% extends 'base.html' %} 2 {% block content%} 3 <article> 4 <aside> 5 <div class="l_box" id="stickMe"> 6 <div class="about_me"> 7 <h2>关于我</h2> 8 <ul> 9 <i><img src="/static/images/4.jpg"></i> 10 <p>{{ desc }}</p> 11 </ul> 12 </div> 13 <div class="wdxc"> 14 <h2>我的相册</h2> 15 <ul> 16 <li><a href="/"><img src="/static/images/7.jpg"></a></li> 17 <li><a href="/"><img src="/static/images/8.jpg"></a></li> 18 <li><a href="/"><img src="/static/images/9.jpg"></a></li> 19 <li><a href="/"><img src="/static/images/10.jpg"></a></li> 20 <li><a href="/"><img src="/static/images/11.jpg"></a></li> 21 <li><a href="/"><img src="/static/images/12.jpg"></a></li> 22 </ul> 23 </div> 24 <div class="search"> 25 <form action="/e/search/index.php" method="post" name="searchform" id="searchform"> 26 <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text"> 27 <input name="show" value="title" type="hidden"> 28 <input name="tempid" value="1" type="hidden"> 29 <input name="tbname" value="news" type="hidden"> 30 <input name="Submit" class="input_submit" value="搜索" type="submit"> 31 </form> 32 </div> 33 <div class="fenlei"> 34 <h2>文章分类</h2> 35 <ul> 36 <li><a href="/">学无止境（33）</a></li> 37 <li><a href="/">日记（19）</a></li> 38 <li><a href="/">慢生活（520）</a></li> 39 <li><a href="/">美文欣赏（40）</a></li> 40 </ul> 41 </div> 42 <div class="tuijian"> 43 <h2>站长推荐</h2> 44 <ul> 45 <li><a href="/">你是什么人便会遇上什么人</a></li> 46 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 47 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 48 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 49 <li><a href="/">你是什么人便会遇上什么人</a></li> 50 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 51 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 52 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 53 </ul> 54 </div> 55 <div class="links"> 56 <h2>友情链接</h2> 57 <ul> 58 <a href="http://www.yangqq.com">杨青个人博客</a> <a href="http://www.yangqq.com">杨青博客</a> 59 </ul> 60 </div> 61 <div class="guanzhu"> 62 <h2>关注我 么么哒</h2> 63 <ul> 64 <img src="/static/images/wx.jpg"> 65 </ul> 66 </div> 67 </div> 68 </aside> 69 <div class="r_box"> 70 {% for aricle in articles %} 71 72 <li><i><a href="/detail?id={{ aricle.id }}"><img src="/static/{{ aricle.img }}"></a></i> 73 74 <h3><a href="/detail?id={{ aricle.id }}">{{ aricle.title }}</a></h3> 75 <p>{{ aricle.desc }}</p> 76 </li> 77 78 {% endfor %} 79 80 </div> 81 </article> 82 {% endblock %}
三、分页后端实现
1、后端接口简单实现
1 import django,os 2 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'dj_test.settings') 3 django.setup() 4 5 L = range(1,51)#实际需要从数据库中查出文章 6 from django.core.paginator import Paginator 7 page_obj = Paginator(L,20) 8 print(list(page_obj.get_page(1)))#取某一页的数据 9 print(list(page_obj.get_page(2))) 10 print(list(page_obj.get_page(3))) 11 print(page_obj.count)#总共多少条数据 12 print(page_obj.num_pages)#总共分了多少页 13 print(page_obj.page_range)#分页的范围1，2，3 14 15 cur_page = page_obj.get_page(1) 16 print(cur_page.previous_page_number())#当前页的上一页 17 print(cur_page.next_page_number())#当前页的下一页 18 print(cur_page.has_next())#判断是否有下一页 19 print(cur_page.has_previous())#判断是否有上一页 20 print(cur_page.has_other_pages())#判断是否有其他页
21 print(cur_page.paginator)#当前页的分页对象，就是page_obj
2、具体应该到博客项目中
方案1：规定好每页显示多少条数据
1）当前路径增加文件const.py
1 page_size = 10#默认分页数量
2)views.py中首页文章列表接口实现
1 def index(request): 2 #/index/1 #需要改变代码 3 #/index?page=1#不需要改变代码 4 print('view....index') 5 page = request.GET.get('page',1)#前端传过来的页码 6 article = Article.objects.filter(is_delete=False)#查出数据库中所有没有被删除的文章 7 page_obj = Paginator(article,const.page_size)#文章分页 8 page_data= page_obj.get_page(page)#取到当前页面的数据 9 data = {'articles':page_data}#数据 10 return render(request,'index.html',data)#返回数据
方案2：前端传每页显示多少条数据
1 from django.core.paginator import Paginator#分页用的方法 2 from . import const 3 # Create your views here. 4 5 6 def index(request): 7 #/index/1 #需要改变代码 8 #/index?page=1#不需要改变代码 9 print('view....index') 10 page = request.GET.get('page',1)#前端传过来的页码 11 limit = request.GET.get('limit', const.page_size) # 前端传过来，每页显示多少数据 12 article = Article.objects.filter(is_delete=False)#查出数据库中所有没有被删除的文章 13 page_obj = Paginator(article,limit)#文章分页 14 page_data= page_obj.get_page(page)#取到页码数据 15 data = {'articles':page_data}#数据 16 return render(request,'index.html',data)#返回数据
四、分页前端实现
修改index.html文件内容--整体思路如下
1、先判断是否存在其他页面，有其他页面的时候才需要分页
2、判断是否存在上一页，上一页的链接
3、页面循环
4、判断是否存在下一页，下一页的链接
1 {% extends 'base.html' %} 2 {% block content%} 3 <article> 4 <aside> 5 <div class="l_box" id="stickMe"> 6 <div class="about_me"> 7 <h2>关于我</h2> 8 <ul> 9 <i><img src="/static/images/4.jpg"></i> 10 <p>{{ desc }}</p> 11 </ul> 12 </div> 13 <div class="wdxc"> 14 <h2>我的相册</h2> 15 <ul> 16 <li><a href="/"><img src="/static/images/7.jpg"></a></li> 17 <li><a href="/"><img src="/static/images/8.jpg"></a></li> 18 <li><a href="/"><img src="/static/images/9.jpg"></a></li> 19 <li><a href="/"><img src="/static/images/10.jpg"></a></li> 20 <li><a href="/"><img src="/static/images/11.jpg"></a></li> 21 <li><a href="/"><img src="/static/images/12.jpg"></a></li> 22 </ul> 23 </div> 24 <div class="search"> 25 <form action="/e/search/index.php" method="post" name="searchform" id="searchform"> 26 <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text"> 27 <input name="show" value="title" type="hidden"> 28 <input name="tempid" value="1" type="hidden"> 29 <input name="tbname" value="news" type="hidden"> 30 <input name="Submit" class="input_submit" value="搜索" type="submit"> 31 </form> 32 </div> 33 <div class="fenlei"> 34 <h2>文章分类</h2> 35 <ul> 36 <li><a href="/">学无止境（33）</a></li> 37 <li><a href="/">日记（19）</a></li> 38 <li><a href="/">慢生活（520）</a></li> 39 <li><a href="/">美文欣赏（40）</a></li> 40 </ul> 41 </div> 42 <div class="tuijian"> 43 <h2>站长推荐</h2> 44 <ul> 45 <li><a href="/">你是什么人便会遇上什么人</a></li> 46 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 47 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 48 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 49 <li><a href="/">你是什么人便会遇上什么人</a></li> 50 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 51 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 52 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 53 </ul> 54 </div> 55 <div class="links"> 56 <h2>友情链接</h2> 57 <ul> 58 <a href="http://www.yangqq.com">杨青个人博客</a> <a href="http://www.yangqq.com">杨青博客</a> 59 </ul> 60 </div> 61 <div class="guanzhu"> 62 <h2>关注我 么么哒</h2> 63 <ul> 64 <img src="/static/images/wx.jpg"> 65 </ul> 66 </div> 67 </div> 68 </aside> 69 <div class="r_box"> 70 {% for aricle in articles %} 71 72 <li><i><a href="/detail?id={{ aricle.id }}"><img src="/static/{{ aricle.img }}"></a></i> 73 74 <h3><a href="/detail?id={{ aricle.id }}">{{ aricle.title }}</a></h3> 75 <p>{{ aricle.desc }}</p> 76 </li> 77 78 {% endfor %} 79 {% if articles.has_other_page %} 80 81 <div class="pagelist"> 82 {% if artilces.has_previous %} 83 <a class="allpage" href="/index?page = {{ articles.previous_page_number }}&limit=20"><b>上一页</b></a> 84 {% endif %} 85 86 {% for page_num in articles.paginator%} 87 <a href="#" class="curPage">{{ page_num }}</a> 88 {% endfor %} 89 90 {% if artilces.has_next %} 91 <a href="/index?page = {{ articles.previous_page_number }}&limit=20">{{ articles.next_page_number }}</a> 92 {% endif %} 93 94 </div> 95 96 {% endif %} 97 </div> 98 </article> 99 {% endblock %}
五、优化js样式问题
1、info.html 增加css 样式，文章详情页面样式显示正确
1 {% extends 'base.html' %} 2 {% block css %} 3 <link href="/static/css/info.css" rel="stylesheet"> 4 {% endblock %} 5 {% block content%} 6 <article> 7 <aside> 8 <div class="l_box"> 9 <div class="search"> 10 <form action="/e/search/index.php" method="post" name="searchform" id="searchform"> 11 <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text"> 12 <input name="show" value="title" type="hidden"> 13 <input name="tempid" value="1" type="hidden"> 14 <input name="tbname" value="news" type="hidden"> 15 <input name="Submit" class="input_submit" value="搜索" type="submit"> 16 </form> 17 </div> 18 <div class="fenlei"> 19 <h2>文章分类</h2> 20 <ul> 21 <li><a href="/">学无止境（33）</a></li> 22 <li><a href="/">日记（19）</a></li> 23 <li><a href="/">慢生活（520）</a></li> 24 <li><a href="/">美文欣赏（40）</a></li> 25 </ul> 26 </div> 27 <div class="tuijian"> 28 <h2>站长推荐</h2> 29 <ul> 30 <li><a href="/">你是什么人便会遇上什么人</a></li> 31 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 32 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 33 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 34 <li><a href="/">你是什么人便会遇上什么人</a></li> 35 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 36 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 37 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 38 </ul> 39 </div> 40 <div class="tuijian"> 41 <h2>点击排行</h2> 42 <ul> 43 <li><a href="/">你是什么人便会遇上什么人</a></li> 44 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 45 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 46 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 47 <li><a href="/">你是什么人便会遇上什么人</a></li> 48 <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> 49 <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> 50 <li><a href="/">个人博客模板《绅士》后台管理</a></li> 51 </ul> 52 </div> 53 <div class="cloud"> 54 <h2>标签云</h2> 55 <ul> 56 <a href="/">陌上花开</a> <a href="/">校园生活</a> <a href="/">html5</a> <a href="/">SumSung</a> <a href="/">青春</a> <a href="/">温暖</a> <a href="/">阳光</a> <a href="/">三星</a><a href="/">索尼</a> <a href="/">华维荣耀</a> <a href="/">三星</a> <a href="/">索尼</a> 57 </ul> 58 </div> 59 <div class="guanzhu"> 60 <h2>关注我 么么哒</h2> 61 <ul> 62 <img src="/static/images/wx.jpg"> 63 </ul> 64 </div> 65 </div> 66 </aside> 67 <div class="infosbox"> 68 <div class="newsview"> 69 <h3 class="news_title">{{ article.title }}</h3> 70 <div class="bloginfo"> 71 <ul> 72 <li class="author">作者：<a href="/">杨青</a></li> 73 <li class="lmname"><a href="/">学无止境</a></li> 74 <li class="timer">{{ article.create_time }}</li> 75 <li class="view">4567人已阅读</li> 76 </ul> 77 </div> 78 <div class="tags"><a href="/" target="_blank">个人博客</a> <a href="/" target="_blank">小世界</a></div> 79 <div class="news_about"><strong>简介</strong>{{ article.desc }}</div> 80 <div class="news_con"> 81 {{ article.content }} 82 </div> 83 </div> 84 <div class="share"> 85 <p class="diggit"><a href="JavaScript:makeRequest('/e/public/digg/?classid=3&id=19&dotop=1&doajax=1&ajaxarea=diggnum','EchoReturnedText','GET','');"> 很赞哦！ </a>(<b id="diggnum"><script type="text/javascript" src="/e/public/ViewClick/?classid=2&id=20&down=5"></script>13</b>)</p> 86 </div> 87 <div class="nextinfo"> 88 <p>上一篇：<a href="/news/life/2018-03-13/804.html">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</a></p> 89 <p>下一篇：<a href="/news/life/">返回列表</a></p> 90 </div> 91 <div class="news_pl"> 92 <h2>文章评论</h2> 93 <ul> 94 <div class="gbko"> </div> 95 </ul> 96 </div> 97 </div> 98 </article> 99 {% endblock %}
六、优化冗余代码
1、由于index和category 接口内容很接近，可以修改简化代码
1）前端代码修改，由于访问的链接形式是/index?category_id =1,所有修改如下
1 <header class="header-navigation" id="header"> 2 <nav><div class="logo"><a href="/">{{ site_name }}</a></div> 3 <h2 id="mnavh"><span class="navicon"></span></h2> 4 <ul id="starlist"> 5 {% for n in nav %} 6 <li><a href="/index?category_id={{ n.id }}">{{ n.name }}</a></li> 7 {% endfor %} 8 </ul> 9 </nav> 10 </header>
2）后端代码修改views.py,去除category方法
1 def index(request,id = 1): 2 #/index/1 #需要改变代码 3 #/index?page=1#不需要改变代码 4 print('view....index') 5 category_id = request.GET.get('category_id',1) 6 page = request.GET.get('page',1)#前端传过来的页码 7 8 article = Article.objects.filter(is_delete=False,category_id = category_id)#查出数据库中所有没有被删除的文章 9 # page_obj = Paginator(article,const.page_size)#规定好每页返回多少数据 10 11 limit = request.GET.get('limit', const.page_size) # 前端传过来，每页显示多少数据 12 page_obj = Paginator(article,limit)#文章分页 13 14 page_data= page_obj.get_page(page)#当前页面 15 data = {'articles':page_data}#数据 16 return render(request,'index.html',data)#返回数据
3）urls.py去除分类路径
1 from django.contrib import admin 2 from django.urls import path 3 from user.views import index,detail 4 urlpatterns = [ 5 path('admin/', admin.site.urls), 6 path('index/', index), 7 path('', index), 8 # path('category/<int:id>', category), 9 path('detail/', detail), 10 ]
七、丰富django admin
1、查询文章id为1或者id为2
from django.db.models import Q r = Article.objects.filter( Q(category_id=1) | Q(category_id=2) ) print(r)
2、pip install simpleui 美化 Django admin
在settings.py文件中增加如图
重新启动Django后，进入admin
备注解决问题
问题1：
打开pycharm界面，点击下方的Terminal命令行，输入数据迁移命令：
python3 manage.py migrate问题2：
两种解决办法：
-
第一种办法是：编辑 settings.py 文件，从
INSTALLED_APPS配置项中移除'django.contrib.sites',。 -
第二种办法：通过
python manage.py shell为 Site model 添加一条记录（将网站的域名添加进去）：$ python manage.py shell >>> from django.contrib.sites.models import Site >>> Site.objects.create(pk=1, domain='tumblr.3sd.me', name='tumblr.3sd.me') <Site: tumblr.3sd.me>
3、丰富Django admin admin.py
1 from django.contrib import admin 2 3 # Register your models here. 4 from . import models 5 6 class ArticleAdmin(admin.ModelAdmin): 7 list_display = ['title', 'category', 'create_time', 'update_time'] #显示哪些字段,标题，分类，创建时间，更新时间 8 search_fields = ['title'] #哪写字段可以搜索，不要写外键的字段 9 list_filter = ['category','is_delete']#过滤器 10 list_per_page = 10 #每页显示多少条 11 12 13 class CategoryAdmin(admin.ModelAdmin): 14 list_display = ['name', 'create_time', 'update_time'] #显示哪些字段 15 search_fields = ['name'] #哪写字段可以搜索，不要写外键的字段 16 list_filter = ['is_delete'] 17 list_per_page = 10 #每页显示多少条 18 19 20 21 admin.site.register(models.Category,CategoryAdmin) 22 admin.site.register(models.Article,ArticleAdmin)
文章表
文章分类
八、前后端分离
1、创建一个test.html文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script> 8 9 </head> 10 <body> 11 12 <div id="app"> 13 14 <button @click="test">点我</button> 15 16 {{ msg }} 17 </div> 18 19 <script> 20 21 var app = new Vue({ 22 el:'#app', 23 data : { 24 msg:'', 25 }, 26 methods:{ 27 test:function () { 28 axios.get('http://127.0.0.1:8000/test').then(response=>{ 29 let msg = response.get('msg') 30 this.msg= msg 31 32 }) 33 34 35 } 36 } 37 38 }); 39 </script> 40 41 </body> 42 </html>
2、views.py 增加方法
1 def test(request): 2 d = {'msg':'ok'} 3 return JsonResponse(d)
3、test.html文件直接用浏览器打开点击按钮
备注：途中报错是因为跨域，后面详细说明
九、前端自定义标签
1、文章描述特别长，大于20个字符显示...
实现方式1：自定义tag
在自己创建的APP名称【user】目录下创建文件夹【templatetags】固定的文件夹名称&Python文件
my_tag.py文件内容
1 from django import template 2 3 register = template.Library()#固定内容 4 5 @register.filter #最多就2个参数 6 def abc(s,length=10): 7 if len(s)>length: 8 s = s[:11]+'....' 9 return s
HTML文件中引入并使用新创建的文件，直接调用方法
index.html
1 {% extends 'base.html' %} 2 {% load my_tag %}#引入新建的文件
abc:5 中5表示传参的变量值
实现方式2：当需要参数超过2个时
my_tag.py
from django import template register = template.Library()#固定内容 @register.simple_tag def abc2(s,length=10): if len(s)>length: s = s[:11]+'....' return
最终效果：
Django前端过滤器
1 {% load my_tags %} 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <link href="/static/style.css" rel="stylesheet"> 8 </head> 9 <body> 10 欢迎《{{name}}》登录,今天是 === {{time}} === 11 12 13 {{ stus.0 }} 14 <br> 15 {{ stus |length }} 16 <br> 17 {{ stus |slice:"0:2" }} 18 <br> 19 {{ stus |join:"-" }} 20 <br> 21 {{ name |default:"admin" }} 22 <br> 23 {{ cur_time |date:"Y-m-d H:i:s" }} 24 <br> 25 {{ h1_str |safe }} 26 {# #xss注入#} 27 <br> 28 {{ h1_str }} 29 <br> 30 {{ words | truncatechars:20 }} 31 <br> 32 {{ age | add:2 }} 33 <br> 34 {{ name | add:"先生" }} 35 <br> 36 {{ english_name | upper }} 37 <br> 38 {{ english_name | lower }} 39 <br> 40 {{ article_content|mingan }} 41 <br> 42 {{ article_content|mingan2:"金正恩" }} 43 <br> 44 {% mingan3 say "213" "sb" "傻x" %} 45 46 47 {# <ul>#} 48 {# {% for stu in stus %}#} 49 {# <li>{{stu}}</li>#} 50 {# {% endfor%}#} 51 {# </ul>#} 52 53 54 </body> 55 </html>
safe用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 {{ s }} 9 {{ s|safe }}#增加safe 10 11 </body> 12 </html>
未加safe
增加safe
