vueday06

内容概要

  • vue的项目目录介绍
  • es6导入导出语法
  • 小练习-登录功能
  • scoped

vue项目目录介绍

pycharm 打开项目，运行项目的两种方式

  • 在命令行中执行(注意路径)

image-20230220155758203

如果想pycharm，点击绿色箭头执行

image-20230220155946209

image-20230220160002360

image-20230220160019245

image-20230220160055382

image-20230220160138044

然后点绿色的小箭头就可以了

vue项目目录介绍

myfirstvue        项目名
node_modules      非常多的第三方模块，以后把项目复制给别人是[上传git要忽略掉]，这个文件夹删除掉，很多的小文件，项目的依赖，项目要运行，没有它不行 如果没有只需要执行 
cnpm install   根据package.json 的依赖包，安装好依赖

pubilc                    # 文件夹
	-favicon.ico             # 网站小图标

   -index.html            #spa 单页面应用，以后整个                 vue项目都是用一个html，但你不用动他
src                   # 文件夹--以后咱们都动这里面								的
	-assets            # 静态资源，以后前端用的图								片,js, css 都放在这里
   		-logo.png       # 图片
   -components         # 放组件的地方, xx.vue,小组件
		HelloWorld.vue   #提供的展示组件
	- Router    # 就会有这个文件夹，下面有个 index.js
    	index.js
   -store         # 安装了 Vuex 就会有这个文件夹，下面						有个 index.js
		index.js
   - views                # 页面组件 大组件
		- AboutView.vue
		- HomeView.vue     
   - App.vue           # 跟组件，new Vue 实例管理了 div，以后 把原来卸载div中东西，现在都写在App.vue
   - main.js           # 项目的启动文件
# vue 项目目录介绍
.gitignore             # git的忽略文件，后面学了git就会了
babel.config.js        # bable配置文件，不用动
jsconfig.json          # 配置文件，不用动
package.json           #不用动，安装了第三方模块，它自动增加
package-lock.json      # 锁定文件，忽略掉
README.md              #  用户手册
vue.config.js          # vue的配置文件

image-20230220162151517

​

es6导入导出语法

App.vue, main.js, About.vue 写了些什么

看xx.vue组件学到的重点

记住，以后开发vue项目，都按照这个模式来

  1. 新建xx.vue

  2. 在xx.vue中就三块内容

    1. 以后组件的html内容，都写在这里

      <template>
</template>

    2. 以后该组件使用的样式，都写在这

      <style>
</style>

    3. 以后js 的东西都写在

      <script>
</script>

main.js 学到的

找到index.html 中的id为app的div，以后都在App.vue中写

new Vue({
    render:h => h(App)
}).$mount("#app")

导入导出语法

python 创建包， 在其他py文件中导入

.js 从es6开始，也支持包的导入和导出

默认导出语法(用的最多)，只能导出一个，一般导出一个对象

导出语法

export default 一般是一个对象

导入语法

import 别名 from "路径"

以后 别名 就是 导出对象

新建一个 js 文件

写一些内容

image-20230220164934074

然后我再别的文件导入

image-20230220165001022

image-20230220165040565

这是因为，js 还需要把这些名字导出，不导出用不了

image-20230220165652149

image-20230220165702970

命名导出语法

-导出语法 可以导出多个

image-20230220170130140

image-20230220170204024

image-20230220170209453

导入的简写形式

包下的 index.js 导入的时候，不用写导index.js 的路径， 它等同于 python的__init__.py

image-20230220170602037

image-20230220170612796

vue项目编写步骤

  1. 以后只需要写xx.vue

    • 页面组件
    • 小组件 给页面组件用的

  2. 组件中导出

    export default {
  name: 'AboutView',
  data() {
    return {
      name: "lqz",
      age: "18"
    }
  },
}

    image-20230220170907247

  3. 在别的组件中要用，导入，注册

    导入

    import HelloWorld from "../components/HellpWorld.vue"

注册
export default{
    components:{
        HelloWorld
    }
}

  4. 注册以后，在这个组件中就可以使用导入组件，写在<template>

    自定义属性

登录小练习

登录因为要向后端发送请求所以需要下载axios

cnpm install axios -S 带着 -S 会自动把当前依赖加入到package.json中

前端代码 AboutView

<template>
  <div class="about">
    <el-row>

      <el-col :span="12" :offset="6">
        <h3 class="top">登录页面</h3>

        <el-input v-model="username" placeholder="请输入用户名"></el-input>
        <br>
        <br>
        <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        <el-button type="success" @click="myClick">登录</el-button>
      </el-col>


    </el-row>

  </div>
</template>

<script>
import lqz from "@/lqz"

export default {
  name: 'AboutView',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    myClick() {
      let myData = JSON.stringify({"username": this.username, "password": this.password})
      let aa = lqz.sendData("post", "http://127.0.0.1:8000/login/", myData)
      aa.then(res => {
        if (res.msg.non_field_errors) {
          alert(res.msg.non_field_errors[0])
        } else {
          alert(res.msg)
        }

      })
    }
  }
}


</script>

<style>

.top {
  text-align: center;
}

</style>

新建的 js文件

import axios from "axios";


function sendData(met, url, data, token) {
    let aa = axios({
        method: met,
        url: url,
        data: data,
        headers: {
            "Content-Type": "application/json",
            "token": token
        }
    }).then(res => res.data).catch(error => error.request)
    return aa

}

export default {sendData}

后端的正常写

解决跨域

1 装模块
	pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

2 注册app
	'corsheaders'
3 中间件修改
	'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'
)

scoped

父组件的样式，在子组件中会生效，加入scoped让scoped让该样式只在当前组件中生效



<style scoped>
h1 {
  background-color: chartreuse;
}
</style>

作业

 1 创建出vue项目
 2 使用导入导出语法，把 登录功能的发送请求，抽取到  一个包中  ，把登录功能写完
	-导入导出
        -默认导出
        -命名导出
        
4  创建一个组件，显示一张图片，图片地址通过父组件传入
	在HomeView中使用这个组件
	
    
5 在图片页组件，加一个button，点击把图片地址显示在父组件中  （子传父）

6 使用插槽，随便定制一个图片样子


----------
7 使用vue项目把查询所有汽车 v-for循环显示出来
posted @ 2023-02-20 22:58  可否  阅读(48)  评论(0)    收藏  举报