VUE安装和目录结构,axios的使用

一,跨域问题

同源策略(浏览器的安全策略)

只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了

cors:只要服务器实现了CORS,就可以实现跨域资源共享

简单请求:只发一次请求

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求(不满足简单请求的条件):发两次请求:一次预检(OPTION请求),只有服务端允许发请求,才能继续发第二次正常请求,一次真正的请求

服务端如何处理:

写在中间件中:

				from django.utils.deprecation import MiddlewareMixin
				class MyCorsMiddle(MiddlewareMixin):
					def process_response(self,request,response):
						# 简单请求:
						# 允许http://127.0.0.1:8001域向我发请求
						# ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
						# 允许所有人向我发请求
						response['Access-Control-Allow-Origin'] = '*'
						if request.method == 'OPTIONS':
							# 所有的头信息都允许
							response['Access-Control-Allow-Headers'] = '*'
						return response

在setting中配置中间件即可

在Django目录中支持CORS

在返回的结果中加入允许信息（简单请求）

def test(request):
    import json
    obj=HttpResponse(json.dumps({'name':'lqz'}))
    # obj['Access-Control-Allow-Origin']='*'
    obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
    return obj

放到中间件处理复杂和简单请求：

from django.utils.deprecation import MiddlewareMixin


class MyCorsMiddle(MiddlewareMixin):
    def process_response(self,request,response):
        # 简单请求:
        # 允许http://127.0.0.1:8001域向我发请求
        # ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
        # 允许所有人向我发请求
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == 'OPTIONS':
            # 所有的头信息都允许
            response['Access-Control-Allow-Headers'] = '*'
        return response

二,创建VUE项目

安装node.js

node.js是JaveScript的解释器

NPM包管理工具

前端的一切资源都可以通过npm下载,包括前端工具,前端资源

npm install 包名      本地安装(本项目目录)资源
npm uninstall 包名    本地删除
npm unstall  -g  包名    全局删除

项目初始化

npm init   创建一个package.json   里面是对项目的描述,指定
npm install 包 --save 下载包的同时，加入到package.json中的 `dependencies`
npm install 包 --save-dev 下载包的同时，加入到package.json中的 `devDependencies`  开发阶段的依赖

模块化工具

集成各种应用工具

• grunt
• gulp
• webpack

自动化工具

集成各种应用：代码压缩、图片压缩、编译sass…

• grunt
• gulp
• webpack

1,VUE安装

npm install -g @vue/cli   安装3.x
npm install -g vue/cli  安装的2.x

2,使用

vue create 项目名称   自动生成项目的目录

3 包含的东西

webpack  
babel   把ES6编译成ES5
eslint  代码语法规范
TypeScript   负责把TypeScript编译成JavaScript
Router(vue-router Vue全家桶成员)   路由
Vuex(Vue全家桶成员)     vue状态管理 
CSS Pre-processors    CSS预处理 会让你再次选择器(SASS、LESS、Stylus...)
Linter / Formatter   语法检查
Unit Testing      单元测试
E2E Testing      端到端测试

4 命令

npm run serve  临时编译，创建临时服务器  loacalhost:8080
npm run build  编译，生成dist目录

三,项目结构

|- node.modules
|- public
	|- index.html
	|- assess				静态文件,图片,字体
|- src
	|- components			普通组件(局部)
		|- HelloWorld.vue
	|- views				页面组件
		|- Home.vue
		|- About.vue
	|- main.js				入口文件
	|- App.vue				总体结构组件
	|- router.js			路由设置
	|- store.js				状态管理
|- pageage.json

VUE全家桶

vue				本身
vue-router		路由
vuex			状态管理
vue-ssr			服务端渲染
element-ui 		vue样式组件库

四,新创建组件

1,组件必备

-template
-style
-script

2,路由配置

import Course from './views/Course.vue'
			{
			  path: '/course',
			  name: 'course',
			  component: Course
			}

使用

			专题课程

五,前端页面数据的渲染

1,显示数据

script中:
			  export default {
				data:function () {
					return{
					
						course:['python','linux'],
						aa:'我是aa'
					}
				}

2,方法的绑定

<button @click="init">提交button>
// 下面是在script中
 methods: {
          init: function(){
              // this.$http 就是axios
              // $.ajax({
              //     url:'',
              //     type:'post'
              // })
              // 全局的变量定义
              let _this = this
              this.$http.request({
                  url:_this.$url+'course/',
                  method:'get'
                  // 请求成功发送则走这个函数
              }).then(function(response){
                  // console.log(response)
                  // 服务端返回的数据
                  console.log(response.data)
                  _this.course = response.data
                  // 请求没有成功发送则走这个函数
              }).catch(function (response) {
                  console.log(response)
              })

          },
          test: function () {
              this.course=['aaa','bbb','ccc']
          }

六,VUE中的ajax(axios)

1,安装axios:npm install axios

如果安装成功在package.json文件中dependencies就会多一条axios的版本信息"axios": “^0.18.0”,(自动下载的是最新版本)

2,使用

先在main中配置(定义全局变量)this.$html使用

import axios from 'axios'
Vue.prototype.$http=axios

在组件中

this.$http.request().then().catch()
this.$http.request({
	url:请求的地址
	method:请求方式
}).then(function(response){
	....函数回调处理
})

注意:this需要在上面重新赋值给一个变量

请求成功函数内部:__this.course = response.data