准备

环境的搭建

node.js安装

官网下载exe
傻瓜式下一步即可

检查node版本

1
node --version

npm介绍

node的包管理工具,详情可以参考简书:NPM简介和安装

检查npm版本

1
npm --version

入门

npm换源 - 淘宝源

1.临时使用

1
npm --registry https://registry.npm.taobao.org install express

2.持久使用

1
2
3
4
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或npm info express

vue脚手架的安装

1
npm install -g @vue/cli

安装 @vue/cli-init

1
2
npm i -g @vue/cli
npm i -g @vue/cli-init

进阶

创建vue项目

vue初始化基于webpack的my-project项目(项目名不能用大写字母)

1
vue init webpackage project_name

下面有一坨选项

1
2
3
4
5
6
7
8
9
? Project name my-project
? Project description A Vue.js project
? Author uplyw <xxx@xxx.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue init webpack my-project 选项详解

先运行起来再说

1
npm run dev

加一个路由

在router\index.js中,加上一个

1
2
3
4
5
{
  path: '/user',
  name: 'User',
  component: User
},

再去vue_project\src\components里面创建一个.vue文件,内容如下

1
// 这里直接就复制那个Hello的就OK了

高级

易用、简洁且高效的http库

官网在这里:http://axios-js.com/

安装axios,实现vue连接django

1
npm install axios --save

vue-cli注册axios

首先在 main.js 中引入 axios

1
import axios from 'axios'

这时候如果在其它的组件中，是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性

1
Vue.prototype.$http= axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令

例如

1
2
3
4
5
6
7
8
9
10
methods: {
show() {
  this.$http({
    method: 'get',
    url: '/user',
    data: {
      name: 'virus'
    }
 })
}

配置 axios

实际上只有 url 是必须的
对于get请求

1
2
3
4
5
axios.get('/user', {
      params:{
            name:"virus"  
      }
})

更多详情参考:vue-cli 引入axios及跨域使用

然后就访问会报错,别慌

1
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

因为不允许跨站访问,也叫做跨域,这里我们就需要配置一下这个跨域了

这里参考:卖火柴的小女孩的vue2.0 proxyTable配置，解决跨域

难点

上面的报错依旧没有解决,这并不是因为解决方案不正确,而是有其他的原因

两天未解决的问题

在使用vue和axios进行跨域请求的时候,一直以为是vue这边没有配置好,

尝试了很久,查了很多关于vue跨域的资料,还使用jq中的ajax直接进行访问都不好使

但是访问这个好使,这就证明不是vue+axios和边的问题了,这里仅仅是指定一下url即可,在config/index.js中配置的仅仅的让test.vue文件中不用写上全部路径

原来是django里面没有设置允许跨域访问的原因,O(∩_∩)O哈哈~
django解决跨域请求的问题

解决方案

具体实现如下:

1.安装django-cors-headers

1
pip install django-cors-headers

2.在django的设置文件setting.py中,加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ] 

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware', # 注意顺序
    ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)

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',
)

之后报错,别慌!

1
2
3
4
5
django.core.management.base.SystemCheckError: SystemCheckError: System check identified some issues:

ERRORS:
?: (corsheaders.E013) Origin '*' in CORS_ORIGIN_WHITELIST is missing  scheme or netloc
        HINT: Add a scheme (e.g. https://) or netloc (e.g. example.com).

然后在配合的这个全部解决了问题,完美简直

项目的源码地址

gitee:vue_django_project
大家可以clone下来进行参考,如果觉得有用的可以给小编star一下,你的支持就是我的动力!