vue06

今日内容概要

• vue-cli创建项目
• vue项目目录简介
• es6导入导出语法
• 小练习 登陆功能
• scoped

今日内容详细

vue-cli创建项目

前端做成项目 需要使用工具(vue-cli) 创建出vue项目 单页面应用(spa)组件化开发 把xx.vue ts saas等编译成html页面及js css 这样才能够在浏览器中执行

vue-cli创建项目开发 在项目中开发完毕后 要上线 那么一定要编译 因为浏览器只能够识别js html和css

vue-cli工具 使用nodejs写的 如果要运行那么就需要node环境

http://nodejs.cn/download/
下载之后一路下一步即可
下载完成会有两个执行文件
	node			相当于是python			进入解释器环境
	npm				相当于是python的pip		也是用于安装包 模块的工具

node js是如何来的
	由于js只能运行在浏览器中 因为浏览器中有它的解释器环境 所以有人基于谷歌浏览器的v8引擎 写了出来 使它可以运行在操作系统之上 里面的网络包 文件 数据库等是用c写的 使得js语法可以在后端完成编写 并且号称性能很高 大量使用了协程

安装vue-cli

	npm install -g @vue/cli
	# -g表示装全局
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	# 使用cnpm替换npm  cnpm淘宝出的工具，下载的时候，去淘宝镜像下载，速度快
	# --registry=https://registry.npm.taobao.org 指定淘宝镜像
	后续可以使用cnpm替代npm
	cnpm install -g @vue/cli

	创建vue-cli项目(需要先切换目录 否则在当前目录创建)
	vue create 项目名		# 速度比较慢 如果失败了 可以执行以下 npm clean --force
	# 慢的原因是它是从github上拉的一个空项目 并且会安装该项目所需的所有依赖
	vue ui  # 图形化界面创建项目

	后续安装看下图

项目运行
	在命令行中运行
		切换到项目目录 npm run serve
	使用pycharm运行
		看图

扩展:文件防篡改校验

其实是通过加密算法实现的 
	将整个文件通过一些加密算法生成值
	后面用户下载下来后 再通过相同的加密方式加密 如果值不一样 那么说明被篡改了

百度网盘的秒传也利用了加密算法
	文件传到服务器上后会生成加密值 存着
	后续其他用户上传文件的时候 首先会上传文件的加密值 看看服务器中是否有一致的 如果有 那么就不接受该文件 直接使用服务器中对应的文件即可 这样就实现了秒传功能

vue项目目录介绍

es6导入导出语法

xxx.vue的组成

在我们新建.vue文件的时候 会有三部分组成

# 该组件的html内容 都写在该标签内
<template>

</template>

# 该组件js内容都写在这
<script>
export default {
  name: "test"
}
</script>

# 该组件的样式 都写在这 如果带了scoped 那么该样式只在当前组件生效
<style scoped>

</style>

导入导出语法

类似于python中的导包

js从es6开始 也支持包的导入和导出
	默认的导出语法
		export default 一般是一个对象
	导入语法
		import 别名 from '路径'
		后续该别名就是被导出的对象

	命名方式导入导出 一次导出一个
	导出语法
		export const name = '彭于晏'
		export const add = (a, b) => {
            return a + b
        }
		export const age = 19
	导入语法 以对象的形式一个一个接收  后续直接使用对应名字
		import {name, add, age} from '路径'
		console.log(name)

导入的简写形式
	在包下如果有 index为文件名的文件 导入的时候无需写到index的路径 等同于pyhton中的__init__.py

	例如 
		包名 lzj
			-index.js
		那么导入的时候
			import lzj from './lzj'

vue项目使用axios

1 安装 
	cnpm install axios -S    # 带着-S会自动把当前依赖加入到package.json中
2 导入（按照的第三方模块，直接导入）
	import axios from 'axios'
    
3 使用
	axios.请求方式('url', 要传的数据).then(res => {
        收到响应后执行的代码
    })

django解决跨域问题

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让该样式只在当前组件中生效
<style scoped>
h1 {
  background-color: chartreuse;
}
</style>