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.mzph.cn/news/798071.shtml

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

相关文章

windows terminal美化教程

安装terminal 微软商店下载安装terminal 配置文件 进入terminal&#xff0c;打开设置。 {"$schema": "https://aka.ms/terminal-profiles-schema",// global settings"profiles": {// profile settings"defaults": {// default sett…

阿里云服务器租赁一年收费标准

阿里云服务器租用价格表2024年最新&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核…

【亲测有效】微信公众号设置菜单栏显示,未开启自定义菜单,微信公众平台自定义菜单接口开发

微信公众平台自定义菜单接口开发 问题:运营人员在设置微信公众号设置菜单栏显示,未开启自定义菜单解决方案(微信公众平台自定义菜单接口开发):自定义菜单-创建接口请求链接完整代码第一步:在WeChat类里添加代码情况一:没有WeChat类情况,如果已有请看情况二情况二:已有…

【系统架构师】-软件架构设计

1、软件架构的概念 架构的本质 1、软件架构为软件系统提供了一个结构、行为和属性的高级抽象。 2、软件架构风格是特定应用领域的惯用模式&#xff0c;架构定义一个词汇表和一组约束。 架构的作用 1、软件架构是项目干系人进行交流的手段。 2、软件架构是可传递和可复用的模型…

番茄 短abogus补环境

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872 本文章…

端到端单倍型参考基因组揭示了三倍体香芽蕉型香蕉亚基因组的分歧和疾病抵抗力-文献精读-5

T2T基因组文献分享Telomere-to-telomere haplotype-resolved reference genome reveals subgenome divergence and disease resistance in triploid Cavendish banana 三倍体植物基因组的文献&#xff0c;各位同仁还有什么有特色的基因组评论区留言~ 摘要 香蕉是世界上最重要…

JavaEE——手把手教你实现简单的 servlet 项目

文章目录 一、什么是 Servlet二、创建一个简单的 Servlet 程序1. 创建项目2.引入依赖3. 创建目录4.编写代码5. 打包程序6. 部署7.验证整体过程总结 三、使用 Smart Tomcat 插件简化项目创建四、创建项目时可能遇到的几个问题。 一、什么是 Servlet Servlet 是一种实现 动态页面…

12、最小覆盖子串

如何想到这个解法 问题的特点&#xff1a; 首先&#xff0c;认识到这是一个关于子串的问题&#xff0c;而且需要考虑子串的最小长度。这提示我们可能需要使用一种方式来逐步探索不同的子串。滑动窗口的适用性&#xff1a;滑动窗口是处理子串问题的常用技巧&#xff0c;特别是当…

【图像分割】nnUnetV1与V2的Linux部署与应用命令

以前觉得麻烦&#xff0c;一直没用过nnunet&#xff0c;虽然知道它很火&#xff0c;最近一个契机&#xff0c;部署使用了一下nnunet&#xff0c;记录一下其部署和使用的方法与命令。 1、部署 首先&#xff0c;我有一个环境&#xff0c;这个环境可以是以前就有的&#xff0c;也可…

1.c++入门(命名空间、缺省参数、函数重载、引用、内联函数、for循环、auto关键字、指针空值nullptr)

1.c的第一个程序 // 方法一 #include<iostream>// namespace为命名空间的关键字&#xff0c;std为空间名&#xff1b; C标准库的东西放进std命名空间 using namespace std; int main() {cout << "hello world" << endl;return 0; }// 方法二 #in…

YOLOv8的多分类模型如何计算准确率(Accuracy)、精确率(Precision)、召回率(recall)和F1-Score模型评估参数

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

【Linux】 OpenSSH_9.3p1 升级到 OpenSSH_9.6p1(亲测无问题,建议收藏)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

【leetCode】2810. 故障键盘

文章目录 [2810. 故障键盘](https://leetcode.cn/problems/faulty-keyboard/)思路一&#xff1a;模拟代码&#xff1a;思路二&#xff1a;双端队列代码&#xff1a; 2810. 故障键盘 思路一&#xff1a;模拟 用StringBuilder来拼贴字符遍历字符串&#xff0c;如果遇到i,对拼贴好…

注解,自定义注解和元注解

1.注解 1.1.注解概述、作用 注解&#xff08;Annotation&#xff09;&#xff0c;也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性&#xff0c;与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面&#xff0…

《深入浅出多模态》:多模态经典模型CLIP

🎉AI学习星球推荐: GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料,配有全面而有深度的专栏内容,包括不限于 前沿论文解读、资料共享、行业最新动态以、实践教程、求职…

逆向案例14——cnki学术翻译AES加密分析,涉及保持会话和获取token值

python代码&#xff1a; import execjs import requests UA "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" token_url "https://dict.cnki.net/fyzs-front-api/getToken" url …

图像分割-RSPrompter

文章目录 前言1. 自动化提示器1.1 多尺度特征增强器1.2 RSPrompterAnchor-based PrompterQuery-based Prompter 2. SAM的扩展3. 结果WHU数据集NWPU数据集SSDD数据集 前言 《RSPrompter: Learning to prompt for remote sensing instance segmentation based on visual foundati…

一文读懂Memory consistency model (内存模型)

Memory consistency model又称Memory model (内存模型)&#xff0c;定义了使用Shared memory(共享内存)执行多线程(Multithread)程序所允许的行为规范。Memory model定义了软硬件接口规范&#xff0c;以便程序员预料硬件会有什么行为&#xff0c;而硬件实现者知道可以使用什么样…

牛客NC181 单词拆分(一)【中等 动态规划,前缀树 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/c0d32c1ce5744472a01b2351a2c2767f 思路 前缀树动态规划参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规…

OpenCV4.9处理平滑图像

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;使用OpenCV4.9的随机生成器和文本 下一篇&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 目标 在本教程中&#xff0c;您将学习如何使用 OpenCV …