Python+Vuecil笔记

Nginx

进入目录: C:\nginx-1.20.2\nginx-1.20.2

start nginx    开始
nginx -s stop  停止
nginx -s quit  退出

CSS

在这里插入图片描述

通过标签去写css

在这里插入图片描述

循环展示数据

在这里插入图片描述

JS

点击时执行事件

在这里插入图片描述

Django

配置media

在seetings里面修改

STATIC_URL = '/static/'
MEDIA_URL = '/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload').replace('\\', '/')

static 是app目录里面的,upload是外面的。

数据表在admin中注册

from myblog.models import SiteInfo # 引入
# Register your models here.admin.site.register(SiteInfo) # 注册

在这里插入图片描述

新建管理员

python manage.py createsuperuser

连接mysql

DATABASES = {'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'myblog','USER': 'root','PASSWORD': '123456','HOST': 'localhost','PORT': '3306',}
}

获取数据库数据

siteinfo = SiteInfo.objects.all() # 获取全部,是一个列表
siteinfo = SiteInfo.objects.all()[0] # 用下标调用,获取第一个元素class SiteInfo(models.Model):title = models.CharField(null=True, blank=True, max_length=50)logo = models.ImageField(upload_to='logo/', null=True, blank=True)def __str__(self):  # 自定义返回内容return self.title

表关系

ForeignKey(关联哪张表, on_delete=models.SET_NULL, related_name="userinfo_classes", null=True, blank=True)

通过url传参

id = request.GET['id']

关于Httpresponse

实际上就是返回的html代码

return Httpresponse('<h1>Hello</h1>')

关于JsonResponse

返回的必须是一个对象,用字典来表示

try ……except

try:# 全部用户id = request.GET['id']choose = models.Classes.objects.filter(id = id)[0]
except:return redirect('/')

只要try里面有1步报错就执行except里面的

django rest_framework

安装

pip install djangorestframework
pip install markdown       # Markdown support for the browsable API.
pip install django-filter  # Filtering support

进行序列化

先写一个类似modelform的东西

from rest_framework import serializers
from myblog.models import Classesclass Classes_data(serializers.ModelSerializer):class Meta:depth = 1model = Classesfields = '__all__'

然后写个函数

from rest_framework.decorators import api_view
from rest_framework.response import Response
from myblog import models
from myblog.models import Classes
from myblog.toJson import Classes_data
@api_view(['GET', 'POST'])
def api_test(request):classes = models.Classes.objects.all()classes_data = Classes_data(classes, many=True) # 多条数据要加manyreturn Response({'data':classes_data.data})

但向上面写数据十分麻烦,还要用modelform

实际上用两个for循环即可

@api_view(['GET', 'POST'])
def api_test(request):classes = Classes.objects.all()data = {'classes': []}for c in classes:data_item = {'id': c.id,'text': c.text,'userlist': []}userlist = c.userinfo_classes.all()for user in userlist:user_data = {'id': user.id,'nickname':user.nickName,'headimg': str(user.headImg)}data_item['userlist'].append(user_data) # tian'jdata['classes'].append(data_item)# data = json.dumps(data)return Response(data)

Vue-cil

绑定事件

<button @click="onOffClick">开关</button> {# @就是v-on绑定事件,onOffClick应该就是事件名 #}

判断是否显示还可以用v-show

class前面用.,id前面用#

bool值取反

this.onOff = !this.onOff

控制台

vue ui

App.vue(组件)

每个文件中都是这个结构,文件中template是html,script是js脚本,style是css

<script>new Vue({el: '#app',data: {msg: '开发中ing',},template:"<h1>当前开发状态:{{ msg }}</h1>",//直接用这个可以在页面上显示,就像HttpResponsemethods:{},})</script>

对多个值进行渲染(自定义标签)

如:

<自定义>

haha

</自定义>

<script>Vue.component('dweb-msg',{ {# 这是自定义标签名 #}{# 内部结构和组件一样 #}data(){return {msg: '开发完毕 '}},            template:"<h1>当前开发状态:{{ msg }}</h1>",})new Vue({el: '.app',})
</script>

script部分

  • export default对象的属性:
  • name:组件的名称
  • components:存储中用到的所有组件
  • props:存储父组件传递给子组件的数据
  • watch():当某个数据发生变化时触发
  • computed:动态计算某个数据
  • setup(props, context):初始化变量、函数
  • ref定义变量,可以用.value属性重新赋值
  • reactive定义对象,不可重新赋值
  • props存储父组件传递过来的数据
  • context.emit():触发父组件绑定的函数

template部分

  • :存放父组件传过来的children。
  • v-on:click或@click属性:绑定事件
  • v-if、v-else、v-else-if属性:判断
  • v-for属性:循环,:key循环的每个元素需要有唯一的key
  • v-bind:或::绑定属性

style部分

  • style 标签添加scope属性后,不同组件间的css不会相互影响。

第三方组件

  • view-router包:实现路由功能。
  • vuex:存储全局状态,全局唯一。
  • state: 存储所有数据,可以用modules属性划分成若干模块
  • getters:根据state中的值计算新的值
  • mutations:所有对state的修改操作都需要定义在这里,不支持异步,可以通过$store.commit()触发
  • actions:定义对state的复杂修改操作,支持异步,可以通过$store.dispatch()触发。注意不能直接修改state,只能通过mutations修改state。
  • modules:定义state的子模块

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/599379.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于微信小程序的亿家旺生鲜云订单零售系统的设计与实现(论文+源码)_kaic

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了亿家旺生鲜云订单零售系统的开发全过程。通过分析亿家旺生鲜云订单零售系统管理的不足&#xff0c;创建了一个计算机管理亿家旺生鲜云订单零售系统的方案。文章介…

【JavaWeb】Day37.MySQL概述——数据库设计-DML

数据库操作-DML DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增、删、改操作。 1.增加(insert) insert语法&#xff1a; 向指定字段添加数据 insert into 表名 (字段名1, 字段名2) values (值1, 值2); 全部字段添加数据…

Hive3.0.0建库表命令测试

Hive创建表格格式如下&#xff1a; create [external] table [if not exists] table_name [(col_name data_type [comment col_comment],)] [comment table_comment] [partitioned by(col_name data_type [comment col_comment],)] [clustered by (col_name,col_name,...)…

Spring Security——08,自定义失败处理

自定义失败处理 一、自定义实现类1.1 实现AccessDeniedHandler1.2 实现AuthenticationEntryPoint 二、配置SpringSecurity三、测试3.1 认证失败3.2 权限不足 一键三连有没有捏~~ 我们还希望在认证失败或者是授权失败的情况下也能和我们的接口一样返回相同结构的json&#xff0c…

K8S - Service简介和 1个简单NodePort例子

大纲图 流量方向 如上图&#xff0c; 当用户or 别的service 从k8s 集群外部访问 集群内的services 流量方向有两种 一种是垂直方向&#xff0c; 通过域名 -> Load Balancer -> gateway -> services , 在k8s 一般是通过ingress 来实现&#xff0c; 而ingress 不是本文…

工程中实践的微服务设计模式

大家好&#xff0c;我是 方圆。最近在读《微服务架构设计模式》&#xff0c;开始的时候我非常的好奇&#xff0c;因为在我印象中&#xff0c;设计模式是常说的那23种设计模式&#xff0c;而微服务的设计模式又是什么呢&#xff1f;这个问题也留给大家&#xff0c;在文末我会附上…

Python | Leetcode Python题解之第16题最接近的三数之和

题目&#xff1a; 题解&#xff1a; class Solution:def threeSumClosest(self, nums: List[int], target: int) -> int:nums.sort()n len(nums)best 10**7# 根据差值的绝对值来更新答案def update(cur):nonlocal bestif abs(cur - target) < abs(best - target):best…

plasmo浏览器插件框架使用react和ant.design框架创建页面内容脚本UI样式注入

使用plasmo开发浏览器插件的时候&#xff0c;想要使用内容脚本UI注入自定义的UI组件&#xff0c;官方文档&#xff1a;Content Scripts UI – Plasmo&#xff0c;最好是搭配上好看的UI样式&#xff0c;所以可以集成ant.design的UI组件库&#xff0c;但是只集成组件还不行&#…

文档管理系统解决方案(word原件)

1.系统概述 1.1.需求描述 1.2.需求分析 1.3.重难点分析 1.4.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 数据备份技术 3.系统功能设计 3.1.功能清单列表 3.2.基础数据管理 3.3.位置管理 3.4.文档使用 3.5.文档管理 软件全套资料包获取方式①&#xff1a;软件项…

基于R语言、MaxEnt模型融合技术的物种分布模拟、参数优化方法、结果分析制图与论文写作

第一章、理论篇&#xff1a;以问题导入的方式&#xff0c;深入掌握原理基础 什么是MaxEnt模型&#xff1f; MaxEnt模型的原理是什么&#xff1f;有哪些用途&#xff1f; MaxEnt运行需要哪些输入文件&#xff1f;注意那些事项&#xff1f; 融合R语言的MaxEnt模型的优势&…

vscode教程

个人笔记&#xff08;整理不易&#xff0c;有帮助点个赞&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔&#xff1a;工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 目录 一&#xff1a…

【Java集合进阶】LinkedList和迭代器的源码分析泛型类、泛型方法、泛型接口

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …