vue知识-05

聊天室案例(django接口)

# chat.hetm
    <<script src="/static/axios.js"></script>
    <script src="/static/vue.js"></script>

<body>
<div id="app">
    <h1>聊天室</h1>
    <button @click="handleShow">打开/关闭聊天室</button>
    <hr>
    <Child v-if="show"></Child>
    <hr>
</div>
</body>
<script>
    Vue.component('Child',{
        template:`
            <div>
                <h3>聊天室来咯</h3>
                <p v-for="item in chatList">{{ item.name }}说：{{ item.content }}</p>
                <hr>
                姓名：<input type="text" v-model="name">
                <input type="text" v-model="content">
                <button @click="handleSend">发送</button>
            </div>`,
        data(){
            return{
                chatList:[
                    {"name":"张三","content":"你好"},
                    {"name":"徐飞飞","content":"早上好"},
                    {"name":"周佳佳","content":"早"},
                ],
                name: '',
                content: ''
            }
        },
        methods:{
            handleSend(){
                axios.get(`http://127.0.0.1:8000/chat/send/?from_user=${this.name}&content=${this.content}`).then(res =>{
                    if (res.data.code == 100) {
                        alert(this.data.msg)
                    } else {
                        alert(this.data.msg)
                    }
                })
            }
        },
        // 生命周期函数creat里面发送数据到后端
        created(){
            // 创建定时器
            this.t = setInterval(() => {
                // 发送ajax请求
                axios.get('http://127.0.0.1:8000/chat/').then(res => {
                    console.log(res.data)
                    this.chatList=res.data.results
                })
            }, 3000)
        },
        beforeDestroy() {
            clearInterval(this.t) // 销毁定时器
            this.t = null
        }
        })

    var app=new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }
    })
</script>

# 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属性放在普通标签上:
   <input type="text" v-model="name" ref="myinput">
   this.$refs['myinput'] 拿到的是原生dom对象
操作dom对象：改值，换属性。。。
# ref属性放在组件上:
     <Child ref="mychild"></Child>
   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

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

<body>
<div id="app">
    <h1>点击按钮切换组件</h1>
    <button @click="who='Home'">首页</button>
    <button @click="who='Goods'">商品</button>
    <button @click="who='Order'">订单</button>
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            who: 'Home',
        },
        components: {
            Home: {
                template: `
                <div>
                <h3>我是首页</h3>
                </div>                                `
            },
            Goods: {
                template: `
                <div>
                <h3 style="background-color: aquamarine">我是商品页面</h3>
                </div>                                `
            },
            Order: {
                template: `
                  <div>
                  <h3 style="background-color: red">我是订单</h3>
                  <input type="text" v-model="search">
                  </div>
                `,
                data() {
                    return {
                        search: ''
                    }}},}})
</script>

keep-alive组件缓存

# 组件缓存：但切换回来时，输入的input值还是存在的
<keep-alive>
        <component :is="who"></component>
</keep-alive>

插槽和具名插槽

# 背景：一般编写完1个组件之后组件的内容都是写死的，加数据需去组件中修改，扩展性差
# 作用： 1、一般在组件<Child> </Child>中插入<div>或者其他是没有效果的

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

基本使用：

<body>
<div id="app">
    <h1>插槽使用</h1>
    <div style="background-color: aquamarine">
        <Home>
            <div>
                <img src="./img/1.png" alt="" width="200px" height="300px">
            </div>
        </Home>
    </div>
    <hr>
    <div style="background-color: pink">
        <Home>
            <a href="">点我看美女</a>
        </Home>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            who: 'Home',
        },
        components: {
            Home: {
                template: `
                <div>
                <h3>我是首页</h3>
                <slot></slot>
                <h3>结束了</h3>
                </div>                                `
            },}})
</script>

具名插槽：指定某一插槽加入组件样式 <slot name="foot"></slot>

        <Home>
            <div slot="foot">
                <img src="./img/1.png" alt="" width="200px" height="300px">
            </div>
            <div slot="middle">
                <a href="">点我看美女</a>
            </div>
        </Home>

 <slot name="foot"></slot>

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中
    <script>
        export default {
          data(){
            return {}
          },
         methods:{}
        }
    </script>
# main.js：控制 index.html 使用哪个跟组件 ---App.vue
import store from './store' //导入语法
// 在这里 new 了vue实例
    new Vue({
      render: h => h(App)
    }).$mount('#app')
# package.json ：里面有项目依赖

vue项目开发规范

# 以后做vue开发，只需要创建组件 xx.vue
# 有三部分：
        第一部分--写html，插值，事件绑定 # <template>
        第二部分--data，methods，watch，created # <script>

        第三部分--写样式 # <style scoped>

es6导入导出语法

# 以后，做了项目开发，肯定要导入某些模块使用
import App from './App.vue'  //语法引入
# 默认导出和默认导入的使用:
#在utils.js中，导出
    var NAME = '彭于晏'
    function add(a, b) {
        return a + b
    }
    export default { #导出
        add,
        NAME
    }
# 在想用的位置导入
import lqz from './lqz/utils' //以后使用lqz代指就是导出的对象