Django和vue打通

配置vue环境：

1.先下载nodejs

brew install node

2.安装vue-cli：

npm install -g @vue/cli@3.12.0 (可以用cnpm)

3.用vue创建前端项目：

vue create 项目名
创建项目选项(
  1. 选第二个：自定义
  1. 用空格取消掉linter ，然后选择router
  1. 输入n
  1. 选第二个：package.json
  1. 输入n
)

4.试运行：

npm run serve

Django适配vue：

1.在vue项目目录下新建vue.config.js文件：

vue.config.js中写入：
    module.exports = {
    assetsDir: 'static'
}

增加并写入文件后，打包vue项目：
npm run build

2.urls.py中增加: 

from django.views.generic import TemplateView
path('',TemplateView.as_view(template_name='index.html')),

3.settings.py中修改:



TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue项目名称/dist'],   #增加行
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


在STATIC_URL = 'static/'下方增加：


import os #增加行
STATICFILES_DIRS = [os.path.join(BASE_DIR,'vue项目名称/dist/static')]  #增加行




4.处理跨域问题：


4.1.导入新的跨域中间件：




pip3 install django-cors-headers




4.2.settings.py修改:










MIDDLEWARE = [




    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',    #增加行
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',   #修改行
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    # 'django.middleware.clickjacking.XFrameOptionsMiddleware',     #修改行
]
CORS_ORIGIN_ALLOW_ALL =True   #增加行












安装vue其他工具：


1.安装elementUI :




在vue项目根目录下执行：npm i element-ui -S
在main.js里导入：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' 

导入后调用：
Vue.use(ElementUI)






2.安装axios：






在v项目根目录下执行: npm install axios --save
在main.js里：
import axios from 'axios'


// axios.defaults.baseURL = 'www.baidu.com'   设置axios请求时，域名默认为baseURL


axios.defaults.baseURL = process.env.VUE_APP_BASE_URL   #设置默认baseURL从环境变量中获取VUE_APP_BASE_URL 的值




项目打包到生产时域名默认值自动切换：


1.vue项目根目录下增加.env.development和.env.production文件：












.env.development中写入：


NODE_ENV=development
VUE_APP_BASE_URL = 'http://localhost:8000'


.env.production中写入：


NODE_ENV=production
VUE_APP_BASE_URL = 'http://localhost:8000' #这个之后改成服务器的真实ip地址




 2.vue项目目录/package.json中修改：
















            

            
posted @ 
2022-09-19 11:24 
只看不学 
阅读(445) 
评论(0) 
 
收藏 
举报