Hello World - web框架
type: channel
link: https://www.ronie.ren/index.php/category/web%E6%A1%86%E6%9E%B6/
items: Vue.js 笔记 (二)
items: Vue.js 笔记 (一)
items: CBV视图--数据显示视图
items: FBV视图
items: DJANGO 路由
items: DJANGO 配置文件

Vue.js 笔记 (二)
type: item
date: 2022-11-20T11:44:00+00:00
description: VUE计算属性定义：要用的属性不存在，要通过已有属性计算得来。原理：底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行？初次读取时会执行一次。当依赖的数据发生改变时会被再次调用。优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。备注：计算属性最终会出现在vm上，直接读取使用即可。如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。 计算属性 {{ msg }} 监视属性监视属性watch：当被监视的属性变化时, 回调函数自动调用, 进行相关操作监视的属性必须存在，才能进行监视！！监视的两种写法：new Vue时传入watch配置通过vm.$watch监视深度监视：Vue中的watch默认不监测对象内部值的改变（一层）。配置deep:true可以监测对象内部值改变（多层）。 监视属性 {{ msg }} 条件渲染v-ifv-if="表达式"v-else-if="表达式"v-else="表达式"适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。v-show写法：v-show="表达式"适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。 条件渲染 now id : {{ id }} v-if: {{ person_info[0] }} {{ person_info[1] }} {{ person_info[2] }} v-if v-else-if v-else: {{ person_info[0] }} {{ person_info[1] }} <p v-else>{{ person_info[2] }} v-show: {{ person_info[0] }} {{ person_info[1] }} {{ person_info[2] }} id++ 列表渲染列表基础v-for指令:用于展示列表数据语法：v-for="(item, index) in xxx" :key="yyy"可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） 列表渲染 遍历数组 index:{{index}} -- person:{{p}} 遍历对象 key:{{key}} -- value:{{value}} 遍历指定次数 index:{{index}} -- value:{{value}} 遍历字符串 index:{{index}} -- value:{{value}} 列表过滤watch实现 列表过滤 {{p.id}}:{{p.name}}:{{p.sex}} computed实现 列表过滤 {{p.id}}:{{p.name}}:{{p.sex}} 列表排序watch实现 列表排序 年龄升序 年龄降序 原顺序 {{p.id}}:{{p.name}}:{{p.sex}}:{{p.age}} computed实现 列表排序 年龄升序 年龄降序 原顺序 {{p.id}}:{{p.name}}:{{p.sex}}:{{p.age}}

Vue.js 笔记 (一)
type: item
date: 2022-11-16T09:04:00+00:00
description: Vue初识Vue想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；root容器里的代码被称为【Vue模板】；Vue实例和容器是一一对应的；真实开发中只有一个Vue实例，并且会配合着组件一起使用；{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新； 初识Vue.html Hello，{{ language }} 模板语法插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。 模板语法 Hello，{{ language }}, I am {{ name.toUpperCase() }} this is my blog 数据绑定单向绑定(v-bind)：数据只能从data流向页面。双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。双向绑定一般都应用在表单类元素上（如：input、select等），v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。 数据绑定 Hello，{{ language }}, I am {{ name.toUpperCase() }} this is my blog el与datael的2种写法new Vue时候配置el属性。 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 data的2种写法对象式 函数式 MVVM模型MVVM模型M：模型(Model) ：data中的数据V：视图(View) ：模板代码VM：视图模型(ViewModel)：Vue实例观察发现：data中所有的属性，最后都出现在了vm身上。vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。数据代理Object.defineproperty 数据代理通过一个对象代理对另一个对象中属性的操作（读/写） Vue中的数据代理Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）Vue中数据代理的好处：更加方便的操作data中的数据基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。事件事件的基本使用：使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；事件的回调需要配置在methods对象中，最终会在vm上；methods中配置的函数，不要用箭头函数！否则this就不是vm了；methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参； 事件处理 {{ "button1".toUpperCase() }} {{ "button2".toUpperCase() }} Vue中的事件修饰符：prevent：阻止默认事件（常用）stop：阻止事件冒泡（常用）once：事件只触发一次（常用）capture：使用事件的捕获模式self：只有event.target是当前操作的元素时才触发事件passive：事件的默认行为立即执行，无需等待事件回调执行完毕 事件修饰符 点我去Ronie的blog 这个按钮只能点一次 键盘事件Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => rightVue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）系统修饰键（用法特殊）：ctrl、alt、shift、meta配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。配合keydown使用：正常触发事件。也可以使用keyCode去指定具体的按键（不推荐）Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名 键盘事件 欢…

CBV视图--数据显示视图
type: item
date: 2022-09-17T15:37:00+00:00
description: 数据显示视图数据显示视图是将后台的数据展示在网页上，数据主要来自模型，一共定义了四个视图类。RedirectView：用于实现HTTP重定向，默认只定义了GET请求的处理方法。TemplateView：视图类的基础视图，可将数据传递给HTML模板，默认只定义了GET请求的处理方法。ListView：在TemplateView的基础上将数据以列表显示，通常将某个数据表的数据以列表表示。DetailView：在在TemplateView的基础上将数据详细展示，通常获取数据表的单条数据。1.重定向视图RedirectViewRedirectView用于实现HTTP重定向功能，即网页跳转功能。在Django的源码内可以看到RedirectView的定义过程。从源码中可以看到RedirectView类，定义了四个属性和八个类方法。class RedirectView(View): """Provide a redirect on any GET request.""" permanent = False url = None pattern_name = None query_string = False def get_redirect_url(self, *args, **kwargs): """ Return the URL redirect to. Keyword arguments from the URL pattern match generating the redirect request are provided as kwargs to this method. """ if self.url: url = self.url % kwargs elif self.pattern_name: url = reverse(self.pattern_name, args=args, kwargs=kwargs) else: return None args = self.request.META.get("QUERY_STRING", "") if args and self.query_string: url = "%s?%s" % (url, args) return url def get(self, request, *args, **kwargs): url = self.get_redirect_url(*args, **kwargs) if url: if self.permanent: return HttpResponsePermanentRedirect(url) else: return HttpResponseRedirect(url) else: logger.warning( "Gone: %s", request.path, extra={"status_code": 410, "request": request} ) return HttpResponseGone() def head(self, request, *args, **kwargs): return self.get(request, *args, **kwargs) def post(self, request, *args, **kwargs): return self.get(request, *args, **kwargs) def options(self, request, *args, **kwargs): return self.get(request, *args, **kwargs) def delete(self, request, *args, **kwargs): return self.get(request, *args, **kwargs) def put(self, request, *args, **kwargs): return self.get(request, *args, **kwargs) def patch(self, request, *args, **kwargs): return self.get(request, *args, **kwargs) 其中permanent：根据属性值的真假来选择重定向的方式，若为True，则HTTP状态码为301，False则为302。url：代表重定向的路径。pattern_name：代表重定向的路由命名，若已经设置了url，则不用设置该参数。query_string：是否将当前路由地址的请求参传递到重定向的路由地址。get_redirect_url()：根据属性pattern_name所指向的路由命名来生成相应的路由地址。get()…

FBV视图
type: item
date: 2022-09-15T09:33:00+00:00
description: FBV视图视图（view）是django MTV架构中的V部分，主要负责用户请求和生成相应的相应内容。我们用视图函数（定义def函数）处理处理HTTP请求，这种方式称为FBV。设置响应方式1. 返回响应内容：视图函数通过return方式返回响应内容，然后生成相应的网页内容呈现在浏览器上。若要设置不同的响应方式，则应使用django内置的响应类，内置的部分响应类如下： 响应类型 说明 HttpResponse(‘hello‘) 状态码200，请求被服务器成功接收 HttpResponseRedirect(‘/‘) 状态码302，重定向至首页 HttpResponsePermanentRedirect('/') 状态码301，永久重定向至首页/td> HttpResponseBadRequest('400') 状态码400，访问页面不存在或请求错误 HttpResponseNotFound('404') 状态码404，网页不存在或网页失效 HttpResponseForbidden('403') 状态码403，没有访问权限 HttpReseponseNotAllowed('405') 状态码405，不允许使用此请求方式 HttpReseponseServerError('500') 状态码500，服务器错误 不同的响应方式代表不同的HTTP状态码，作用是web服务器告诉浏览器当前网页的请求状态，例：# urls.py文件 from django.urls import path, re_path from . import views urlpatterns = [ path('', views.index), ]#views.py from django.shortcuts import render from django.http import HttpResponse import os # Create your views here. def index(request): return HttpResponse('hello world', status=200) # 返回200状态码，表示请求已被成功的接收并处理。render函数：从HttpResponse中可知，若要生成网页内容，就要将网页内容以字符串形式表示，这增加了代码量，同时也没有体现模板的作用，因此，django定义了render函数。def render(request, template_name, context=None, content_type=None, status=None, using=None):request：浏览器向服务器发送的请求对象，包含用户信息，请求方式等。template_name：设置模板文件名，用于生成网页内容。context：对模板变量进行赋值，以字典格式表示，默认为空字典。content_type：响应内容的数据格式，一般使用默认值。status：状态码，默认200.using：设置模板引擎，解析模板文件。# views.py from django.shortcuts import render from django.http import HttpResponse, Http404, StreamingHttpResponse, FileResponse import os # Create your views here. def index(request): text = {'title': 'django'} # 传入模板文件index.html, return render(request, 'index.html', text) index {{ title }} 视图函数中定义变量text作为render的参数context，模板index.html里通过模板变量{{title}}获取变量text的数据，模板变量的命名必须与字典中的key名称相同。若传递的变量过多，则可以使用python的内置语法locals()取代参数context。2. 设置重定向：重定向的状态码为301与302，301重定向是永久重定向，302重定向是临时重定向，区别在于搜索引擎的抓取。django中定义了HttpResponseRedirect与HttpResponsePermanentRedirect类，这两个类继承于HttpResponseRedirectBase类，HttpResponseRedirectBase类继承于HttpResponse类。HttpResponseRedirect与HttpResponsePermanentRedirect类只需传入路由地址即可，但不支持路由命名传入。为解决路由命名传入，d…

DJANGO 路由
type: item
date: 2022-09-11T07:07:00+00:00
description: 路由路由称为URL（统一资源定位符），是表示可以从互联网上得到的资源位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每一个文件都有唯一的一个路由，用于指出网站文件的路径位置。1. django路由定义：在app文件夹内，添加urls.py文件，开发者应将所有属于该app的路由都写入该文件，因为这样更易于管理和区分每个路由地址。 Django Project中的urls.py是将每个app的urls.py统一管理。工作原理： 1.运行django项目时，django首先到DjangoProject文件夹下的urls.py中找到每个app所定义的路由，生成完整的路由列表。 2.用户在浏览器上访问某个路由地址时，django收到用户的请求信息。 3.django从请求信息中获取路由地址，并在路由表中匹配相应的路由信息，再执行由路由函数所指向的视图函数或视图类，从而完成整个请求响应过程。Django Project中的urls.py的代码如下：from django.contrib import admin from django.urls import path, re_path, include from django.views.static import serve from django.conf import settings urlpatterns = [ path('admin/', admin.site.urls), path('index/', include('index.urls')), # app应用下的urls re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}, name='media') # 媒体文件 ]可以看到，首页地址将路由分发给index的urls.py进行处理，所以应当对index中的urls.py编写路由信息。 from django.urls import path from . import views urlpatterns = [ path('', views.index), ]views中的代码 from django.shortcuts import render from django.http import HttpResponse # Create your views here. def index(request): return HttpResponse('hello world')路由文件urls.py的路由定义的规则是相对固定的，路由列表由urlpatterns表示，每个列表元素代表一条路由。路由是由django的path函数定义的，函数的第一个参数是路由地址，第二个参数是路由对应的视图处理函数。2. 路由变量的设置（建议在自己电脑上测试。）：Django在定义路由时，可以对路由设置变量值。路由的变量类型有字符类型，整形，slug，uuid字符类型：匹配任何非空字符串，不包含斜杠（默认使用）。整型：匹配自然数。slug：可理解为注释等概念，一般为路由的解释性字符。可匹配任何ASCII码字符以及连接符和下划线。uuid：匹配一个uuid格式的对象，所有字母必须小写。# index.urls中的代码 from django.urls import path from . import views urlpatterns = [ path('', views.index), path('<year>/<int:month>/<slug:day>', views.index2) # <year>数据类型为string,与<str:year>相同 # <int:month>,数据类型为int，变量名为month # <slug:day>,变量名为day，数据类型为slug ]# view.index2中的代码 def index2(request, year, month, day): return HttpResponse('hello django ' + str(year) + "-" + str(month) + "-" + str(day))django支持在路由地址之外设置变量（路由的可选变量），此变量是path函数中的第三个参数。参数只能以字典的形式出现。设置的参数只能在视图函数中读取和使用。字典的一个键值对代表一个参数，键代表参数名，值代表参数值。from django.urls import path from . import views urlpatterns = [ path('', views.index), # 添加了path变量…

DJANGO 配置文件
type: item
date: 2022-09-11T07:01:00+00:00
description: 1.Django 配置信息基本配置信息：BASE_DIR = Path(__file__).resolve().parent.parentdjango项目的工作目录。SECRET_KEY = ')o+504x)+hi#xh7ap01ouru@spqn5tj3od%9xlcd!0d9=0#bk('密匙配置，在创建项目的时候产生，一般无需修改。主要用于重要数据的加密处理。提高项目安全性，避免受到攻击者的恶意破坏。DEBUG = True调试模式，若在开发模式，则应该设置为True，若项目部署上线则应该改为False。在开发模式中Django会自动检测代码是否被修改，根据结果确认是否重启服务器。ALLOWED_HOSTS = []域名访问权限，设置可访问的域名，默认为空。当DEBUG = True时且ALLOWED_HOSTS为空列表时，项目只允许以localhost或127.0.0.1在浏览器访问，当DEBUG = False时，ALLOW_HOSTS 为必填项，负责项目无法启动，若想所有域名均可访问，设置ALLOWED_HOSTS = ['*']。INSTALLED_APPS = [ 'django.contrib.admin', # 后台管理系统 'django.contrib.auth', # 用户认证系统 'django.contrib.contenttypes', # 记录项目中所有的model元数据 'django.contrib.sessions', # session会话功能，用于标识当前访问网站的用户身份，记录用户信息。 'django.contrib.messages', # 消息提示功能 'django.contrib.staticfiles', # 查找静态资源路径 'index' # 自己添加的app ]资源文件配置：资源文件配置分为静态资源和媒体资源。静态资源的配置由配置属性STATIC_URL，STATICFILES_DIRS和STATIC_ROOT进行设置，媒体资源文件的配置方式由配置属性MEDIA_URL和MEDIA_ROOT决定。资源路由（STATIC_URL）：# Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/3.1/howto/static-files/ STATIC_URL = '/static/'静态资源指网站中不会改变的文件。例如css，JavaScript，图片等文件。若资源路由STATIC_URL的值为/static/，则浏览器访问静态资源的网站必须为static，否则无法访问，且在调试模式下只能识别app目录下的static文件夹。资源集合（STATICFILES_DIRS）：STATICFILES_DIRS = [os.path.join(BASE_DIR, 'MYSTATIC1'), os.path.join(BASE_DIR, 'MYSTATIC2'),]资源部署（STATIC_ROOT）:STATIC_ROOT = os.path.join(BASE_DIR, 'allStatic')STATIC_ROOT的作用是在服务器部署项目，实现服务器和项目之间的映射。STATIC_ROOT收集整个项目的静态资源并放在一个文件夹中，然后由该文件夹与服务器之间构建映射关系。当在调试模式时，Django会自动提供静态文件的代理服务，当进入生产环境时，需要设置STATIC_ROOT。媒体资源（MEDIA）:# 媒体路由地址信息 MEDIA_URL = '/media/' # media文件夹的完整路径信息 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')设置完成后还需要让Django找到配置信息：打开DjangoProject中的urls.py，为媒体文件夹添加路由地址。from django.contrib import admin from django.urls import path, re_path from django.views.static import serve from django.conf import settings urlpatterns = [ path('admin/', admin.site.urls), re_path('media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}, name='media') ]模板配置：模板是一种较特殊的HTML文档。文档中嵌入了一些django能够识别的变量和指令，然后由django的模板引擎解…