vue知识-05

聊天室案例(django接口)

# chat.hetm
    <
    



    聊天室

# views.py
from rest_framework.viewsets import GenericViewSet
from rest_framework.response import Response
from .models import Chat
from rest_framework.decorators import action
from .serializers import ChatSerializer


class ChatView(GenericViewSet):
    serializer_class = ChatSerializer
    queryset = Chat.objects.all()

    # 127.0.0.1:8000/chat/send/?from_user=1&content=hello---GET
    @action(methods=['GET'], detail=False)
    def send(self, request):
        from_user = request.query_params.get('from_user')
        content = request.query_params.get('content')
        Chat.objects.create(from_user=from_user, content=content)
        return Response({'code': 100, 'msg': '发送成功'}, headers={'Access-Control-Allow-Origin': '*'})

    # 127.0.0.1:8000/chat/
    def list(self, request):
        qs = self.get_queryset()
        ser = self.get_serializer(instance=qs, many=True)
        return Response({'code': 100, 'msg': '查询成功', 'result': ser.data})

# serializer.py
from rest_framework import serializers
from .models import Chat

class ChatSerializer(serializers.ModelSerializer):
    class Meta:
        model = Chat
        fields = '__all__'

# moedels.py
rom django.db import models


class Chat(models.Model):
    from_user = models.CharField(max_length=32, verbose_name='发送者')
    content = models.CharField(max_length=256, verbose_name='发送内容')
    ctime = models.DateTimeField(auto_now_add=True, verbose_name='发送时间')

# setting.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]


DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'chat01',
        'HOST': '127.0.0.1',
        'POST': 3306,
        'USER': 'root',
        'PASSWORD': 'JIAJIA',
    }
}

ref属性(组件间通信）

# ref属性放在普通标签上:

   this.$refs['myinput'] 拿到的是原生dom对象
操作dom对象：改值，换属性。。。
# ref属性放在组件上:

   this.$refs['mychild'] 拿到的是组件对象
         组件对象.属性
         组件对象.方法
         实现父子间通信

        methods: {
            handleClick() {
                console.log(this.$refs)
                // 1 根据ref指定的名字，取出原生dom对象
                // var i = this.$refs['myinput']
                // console.log(i)
                // i.value = "你好"

                // 2 改图片
                // var i = this.$refs['myimg']
                // i.src='./img/6.png'

                // 3 操作组件对象-->实现组件间通信
                var i = this.$refs['mychild']
                console.log(i.url)
                // 改图片
                i.url = './img/2.png'
                // 执行方法
                i.handleClick('lqz')
            }}})

动态组件component

# 小案例: 点击按钮，切换组件



    点击按钮切换组件

keep-alive组件缓存

# 组件缓存：但切换回来时，输入的input值还是存在的
        

插槽和具名插槽

# 背景：一般编写完1个组件之后组件的内容都是写死的，加数据需去组件中修改，扩展性差
# 作用： 1、一般在组件中插入

或者其他是没有效果的

2、组件中添加，就可以在的组件标签中添加内容

基本使用：

具名插槽：指定某一插槽加入组件样式

vue-cli创建项目

# 创建vue项目，需要借助于几个东西：
nodejs：
1、javascript只能运行在浏览器中
2、把谷歌浏览器的js解释环境---使用c重写，能够运行在操作之上
3、使用js的语法，就可以写后端了(c写了网络，文件操作，数据库操作)
4、js的语法，运行在操作系统上的一个解释型后端语言
vue-cli：vue脚手架，是node的一个模块
# 安装node环境：
1、官网下载安装包：node-v18.16.1-x64.msi
node：python的python命令
npm：python的pip命令
2、加速下载第三方模块：（用来替换npm命令的)

安装模块使用：npm install ---->现在使用 cnpm install 速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装vue脚手架

安装完就会释放 vue令 #装完django 释放了django-admin一样，用来创建项目
cnpm install -g @vue/cli
4、使用vue脚手架，创建vue项目：

另一种创建vue项目方式：图形化界面

vue项目目录介绍

# 运行vue项目的两种方式:
            使用名：npm run dev
        使用pycharm运行：绿色箭头

# 目录结构:
firstvue-项目名

node_modules--存放项目依赖

        等同python的 .venv文件夹，可以删掉，非常多小文件，复制很慢，

        如果没了，执行 cnpm install 就可以在装上，装完项目可以运行
public--文件夹(一般不动）
favicon.ico 网站小图标
   index.html 单页面应用, 整个vue项目其实就这一个html页面，以后都是组件切换

src --开发重点，以后代码几乎都是写在这里

assets-- 放一些静态资源, 组件中使用的图片，css，js
components--放组件的地方，小组件
   HelloWorld.vue # 默认提供给咱们的
views--放组件：页面组件
HomeView.vue # 首页
AboutView.vue #关于

router--装了vue-router就会有这个文件夹，后面讲 index.js
store--装 vuex 就会有这个文件夹，后面讲 index.js
main.js--整个项目的入口
App.vue--根组件
# 了解：
gitignore # 使用了git，忽略文件
babel.config.js #装了bable就会生成它，语法转换，可以写es高版本语法
package.json # 放了项目的依赖
package-lock.json # 锁定文件，锁定依赖的版本
README.md #介绍文件
vue.config.js # vue配置文件一般不动

vue项目文件

# index.html单页面应用，全局只有一个html
            不能禁用js，否则vue项目执行不力
        div id是app，跟咱们之前写的一样
# HelloWorld.vue组件化开发，开发阶段，以后在vue项目中，写组件写 xx.vue
template：在这里写 html内容
script：在这里写js
style：在这里写样式
# 之前写组件：

        之前不能写独立的css，以后都写在 style中

        总结：现在定义组件，只要创建一个 xx.vue,在固定的位置，写固定的代码即可
#组件名字就是：HelloWorld 文件名
    template：template内写的内容
    data(){} :在script中
    
# main.js：控制 index.html 使用哪个跟组件 ---App.vue
import store from './store' //导入语法
// 在这里 new 了vue实例
    new Vue({
      render: h => h(App)
    }).$mount('#app')
# package.json ：里面有项目依赖