路飞项目一：vue安装及介绍
跨域问题：
-同源策略(浏览器的安全策略)
-只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了
域名与端口都不一样的话，是无法接收拿过来的数据的
-cors:只要服务器实现了CORS,就可以实现跨域资源共享
-简单请求
-只发一次请求
-非简单请求:
-发两次请求:一次预检(OPTION请求),只有服务端允许发请求,才能继续发第二次正常请求,一次真正的请求
如何使用：
方式一：
点击事件端（有ajax请求过去的一端）
django
settings.py
并且注释掉csrf的那一段：
MIDDLEWARE=[django.middleware.csrf.CsrfViewMiddleware]
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') ]
项目下创建目录 pro12_21\static\存放jquery-3.3.1.js文件
urls.py
url(r'^index/', views.index),
views.py
def index(request): return render(request,'index.html')
templates\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/static/jquery-3.3.1.js"></script>
<title>Title</title>
</head>
<body>
<button id="btn">点我</button>
</body>
<script>
$('#btn').click(function () {
$.ajax({
url:'http://127.0.0.1:8000/click/',
type:'get',
success:function (data) {
console.log(data)
alert(data)
}
})
})
</script>
</html>测试有数据的一端：
urls.py
url(r'^click/', views.click),
views.py
def click(request):
print(" this is click")
ret = HttpResponse('click')
ret['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8001' # 允许访问过来的域
return ret测试：成功。
报错：
方式二：
点击事件端（有ajax请求过去的一端）
django
settings.py
并且注释掉csrf的那一段：
MIDDLEWARE=[django.middleware.csrf.CsrfViewMiddleware]
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') ]
项目下创建目录 pro12_21\static\存放jquery-3.3.1.js文件
urls.py
url(r'^index/', views.index),
views.py
def index(request): return render(request,'index.html')
templates\index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script src="/static/jquery-3.3.1.js"></script>
<title>Title</title>
</head>
<body>
<button id="btn">点我</button>
</body>
<script>
$('#btn').click(function () {
$.ajax({
url:'http://127.0.0.1:8000/click/',
type:'post',
contentType:'application/json',
success:function (data) {
console.log(data)
alert(data)
}
})
})
</script>
</html>测试有数据的一端：
urls.py
url(r'^click/', views.click),
views.py
from django.shortcuts import render, HttpResponse
def click(request):
ret = HttpResponse('click')
ret['Access-Control-Allow-Origin'] = '*'
if request.method == 'OPTIONS':
ret['Access-Control-Allow-Headers'] = '*'
return ret测试：
.
自定义中间件处理跨域问题：（方式三：推荐）
访问端（点击事件请求端）：
settings.py
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static') ]
MIDDLEWARE=['django.middleware.csrf.CsrfViewMiddleware'], 带有这行的注释掉
django 建立static把jquery-3.3.1.js放进去。
templates/index.html （非简单请求方式，简单请求方式：把type类型改为'get'，接着把带有"contentType" 注释掉即可）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script src="/static/jquery-3.3.1.js"></script>
<title>Title</title>
</head>
<body>
<button id="btn">点我</button>
</body>
<script>
$('#btn').click(function () {
$.ajax({
url:'http://127.0.0.1:8000/click/',
type:'post',
contentType:'application/json',
success:function (data) {
console.log(data)
alert(data)
}
})
})
</script>
</html>urls.py
url(r'^index/', views.index),
views.py
def index(request): return render(request,'index.html')
被请求的一端：
urls.py
url(r'^click/', views.click),
views.py
def click(request):
print(" this is click")
return HttpResponse('click')settings.py
MIDDLEWARE=['django.middleware.csrf.CsrfViewMiddleware'], 带有这行的注释掉
最后一段添加以下内容:
# 字段注释含义： 项目名称，自定义中件间文件名，自定义中间件文件中的类名。 'app01.myMiddle.MyCorsMiddle',
app01/myMiddle.py
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及创建项目：
1、首先装Node.js
下载：http://cdn.npm.taobao.org/dist/node/v10.14.2/node-v10.14.2-x64.msi
接着下一步，下一步，ok,
linux：
解压，配置环境变量OK，（这里不再叙述）
创建vue项目：
在指定的目录中创建项目：
cd "vue-project"
清除缓存记录
npm cache clean --force
开始创建：
vue create pro_1 （项目名）
也可以ui 创建
vue ui (运行后输入url创建项目名)
二、pycharm 配置vue.js插件
File--setting--->plugins--->搜索vue.js 安装后，点击Ok，之后会重启pycharm 即可。
Pycharm 配置 运行
三、vue 目录结构
-node_modules:项目依赖(以后项目要传到git上,这个不能传)
-publish--->index.html 是总页面
-src :项目
-assets:静态资源
-components:组件
-views:视图组件
-APP.vue:根组件
-main.js :总的入口js
-router.js :路由相关,所有路由的配置,在这里面
-store.js :vuex状态管理器
-package.json:项目的依赖,npm install 是根据它来安装依赖的
每个组件会有三部分:
-template
-style
-script
四、axios的使用
在vue的项目中安装axios
npm install axios
安装完后，package.json文件中会有axios，以及对应的版本
在django项目中新建立一个项目，配置：
settings.py
INSTALLED_APPS=[]中添加：
rest_framework 支持rest_framework
urls.py
url(r'^course/',views.course.as_view())
views.py
from django.shortcuts import render # Create your views here. from rest_framework.views import APIView from rest_framework.response import Response class course(APIView): def get(self,request,*args,**kwargs): return Response(['python','linux'])
启动后打开链接：
http://localhost:8000/course/?format=json 使用json格式打开
- （笔记）webpack安装、配置、简单的项目打包、插件介绍
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
- Vue学习01--node环境安装和vue搭建初始项目
- 在Vue项目中使用npm安装bootstrap以及jquery
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（二）安装 nodejs 环境以及 vue-cli 构建初始项目
- vue.js学习笔记之安装以及项目的创建和运行
- 【项目管理与构建】Nexus的详细介绍以及安装（四）
- vue项目中，element组件的安装和使用的方法
- 用npm安装vue和vue-cli，并使用webpack创建项目
- 搭建好的vue项目配置文件介绍
- 【项目管理与构建】Maven搭建私服——Nexus的详细介绍以及安装（四）
- 创建vue项目并安装依赖
- vue 框架的安装和入门介绍
- 使用vue-cli创建项目（包含npm和cnpm的安装nodejs的安装）
- node安装，构建第一个脚手架vue前端项目
- 安装vue、创建vue项目
- python项目打包成pip安装&pip install 介绍
- webpack+vue 构建项目步骤并且使用sass 安装配置
- vue跑项目npm run dev 时报错cannot GET /；node-sass安装失败问题
- 从nvm安装到vue-cli构建项目