VUE安装和目录结构,axios的使用
文章目录
- 一,跨域问题
- 同源策略(浏览器的安全策略)
- cors:只要服务器实现了CORS,就可以实现跨域资源共享
- 服务端如何处理:
- 在setting中配置中间件即可
- 在Django目录中支持CORS
- 在返回的结果中加入允许信息（简单请求）
- 放到中间件处理复杂和简单请求：
- 二,创建VUE项目
- 安装node.js
- NPM包管理工具
- 项目初始化
- 模块化工具
- 自动化工具
- 1,VUE安装
- 2,使用
- 3 包含的东西
- 4 命令
- 三,项目结构
- VUE全家桶
- 四,新创建组件
- 1,组件必备
- 2,路由配置
- 使用
- 五,前端页面数据的渲染
- 1,显示数据
- 2,方法的绑定
- 六,VUE中的ajax(axios)
- 1,安装axios:npm install axios
- 如果安装成功在package.json文件中dependencies就会多一条axios的版本信息"axios": "^0.18.0",(自动下载的是最新版本)
- 2,使用
- 先在main中配置(定义全局变量)this.$html使用
- 在组件中
- 注意:this需要在上面重新赋值给一个变量
一,跨域问题
同源策略(浏览器的安全策略)
只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了
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