自己建设个小网站要什么手续,微信公众号?,js特效素材网,网站运营推广这么做笔记为自我总结整理的学习笔记#xff0c;若有错误欢迎指出哟~ 【djangovue】项目搭建、解决跨域访问 djangovue介绍vue环境准备vue框架搭建1.创建vue项目2.配置vue项目3.进入项目目录4.运行项目5.项目文件讲解6.vue的扩展库或者插件 django环境准备django框架搭建1.使用conda… 笔记为自我总结整理的学习笔记若有错误欢迎指出哟~ 【djangovue】项目搭建、解决跨域访问 djangovue介绍vue环境准备vue框架搭建1.创建vue项目2.配置vue项目3.进入项目目录4.运行项目5.项目文件讲解6.vue的扩展库或者插件 django环境准备django框架搭建1.使用conda虚拟环境pydjango2.创建django项目3.创建应用4.配置python解释器5.启动项目 解决vue、django跨域问题1.CORS2.django-cors-headers3.django代码4.vue进行跨域请求axios 5.vue代码 djangovue介绍
django 和 Vue.js 是一对非常强大的技术组合可以用于构建现代化的 Web 应用程序。下面是对它们的简要介绍
Django Django 是一个使用 Python 编写的高级 Web 框架它遵循了 MTV模型-模板-视图的设计模式。Django 提供了许多内置功能和工具使开发者能够快速构建安全可靠的 Web 应用程序。 ORMDjango 的 ORM对象关系映射层可以方便地与数据库交互支持多种数据库后端。路由系统Django 的路由系统可以帮助你管理 URL 映射和请求分发。表单处理Django 提供了强大的表单处理功能包括表单验证、数据处理等。用户认证和权限管理Django 提供了用户认证和权限管理的功能可以轻松处理用户注册、登录、权限控制等需求。 Vue.js Vue.js 是一个流行的 JavaScript 前端框架用于构建用户界面。Vue.js 采用组件化开发的方式提供了响应式的数据绑定和组件系统使开发者能够构建交互性强、可重用的 UI 组件。 响应式数据绑定Vue.js 使用双向绑定的方式将数据与视图进行关联使得数据的变化能够实时反映在视图中。组件化开发Vue.js 的组件系统允许开发者将 UI 拆分成独立、可复用的组件提高了代码的可维护性和可重用性。虚拟 DOMVue.js 使用虚拟 DOM 技术通过比较虚拟 DOM 的差异最小化了对实际 DOM 的操作提高了性能。
使用 Django 和 Vue.js 可以实现前后端分离的开发模式使前端和后端的开发团队可以并行工作。你可以将 Django 用作后端 API 服务器负责处理数据存储、用户认证等功能而 Vue.js 则负责构建用户界面并通过 AJAX 请求与后端 API 进行数据交互。
vue环境准备
node -v # v18.18.2npm -v # 9.8.1vue --version # vue/cli 4.5.13vue框架搭建
1.创建vue项目 vue create frontend (frontend 是项目名) 2.配置vue项目 选择自定义Manually select features
选择配置项通过键盘上下键移动使用空格键勾选然后回车 ( ) Babel // 代码编译( ) TypeScript // ts( ) Progressive Web App (PWA) Support // 支持渐进式网页应用程序( ) Router // vue路由( ) Vuex // 状态管理模式( ) CSS Pre-processors // css预处理( ) Linter / Formatter // 代码风格、格式校验( ) Unit Testing // 单元测试( ) E2E Testing // 端对端测试
如果想要模板简洁可以不添加Linter/Formatter和Unit Testing 选择VUE版本3.x
第三方配置文件存在的方式In dedicated config files
是否保存本次配置为预设项目模板选择N
3.进入项目目录
cd frontend
4.运行项目
npm run serve
5.项目文件讲解 6.vue的扩展库或者插件
Element Plus
Element Plus是一套基于Vue 3.0的桌面端UI组件库提供了丰富的UI组件和交互效果使开发者能够更便捷地构建各种类型的Web应用程序。 Element Plus 是对 Element UI 的升级版本在功能和性能上做了一些改进并且支持 Vue 3.0。 npm install element-plus --save 报错则用npm install element-plus --save -legacy-peer-deps npm list element-plus 查看版本 element-plus2.4.2 vue-router4
vue-router是Vue.js官方的路由管理器它与Vue.js深度集成用于构建单页面应用程序。通过vue-router您可以实现页面之间的切换、导航以及路由参数的传递等功能。 npm install vue-router4 npm list vue-router 查看版本 vue-router4 axios
axios是一个基于Promise的HTTP客户端可以用在浏览器和Node.js环境中它是Vue.js中常用的发送网络请求的工具。 npm install axios npm list axios 查看版本 axios1.6.2 django环境准备
python --version # Python 3.9.18
django # 4.2.7
django-cors-headers #4.3.1
mysqlclient #2.2.0django框架搭建
1.使用conda虚拟环境pydjango
activate pydjango
2.创建django项目
django-admin startproject backend
3.创建应用
cd backend python manage.py startapp myapp
4.配置python解释器
conda虚拟环境pydjango 5.启动项目
python manage.py runserver
解决vue、django跨域问题
1.CORS
CORS是Cross-Origin Resource Sharing跨域资源共享的缩写是一种用于在Web应用程序中处理跨域请求的标准机制。当一个Web页面通过JavaScript发起对不同域域名、端口或协议的服务器资源的请求时就会涉及到跨域请求。
当您的Vue.js前端应用程序请求访问Django后端时如果二者位于不同的域名或端口上就会触发跨域请求此时可能会被浏览器拦截。
2.django-cors-headers 在Django项目中安装django-cors-headers库 activate pydjango #django-cors-headers安装在哪个python环境下
pip install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple在Django项目的设置文件settings.py中添加corsheaders到INSTALLED_APPS中 INSTALLED_APPS [# ...corsheaders,# ...
]在设置文件中的MIDDLEWARE列表中添加CorsMiddleware 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,
]可以根据需求进行配置例如允许的来源域列表、允许的HTTP方法等。以下是一个示例配置允许所有源*的跨域请求 CORS_ALLOW_ALL_ORIGINS True
# 增加跨域忽略
CORS_ALLOW_CREDENTIALS True
CORS_ORIGIN_ALLOW_ALL True
# 允许所有方法
CORS_ALLOW_METHODS (*)
# 允许所有请求头
CORS_ALLOW_HEADERS (*)或者您可以设置允许的特定来源域列表我使用这个 CORS_ALLOWED_ORIGINS [http://localhost:8080, # Vue.js前端应用的地址http://example.com, # 其他允许的域名
]通过以上配置django-cors-headers将会在Django后端中处理跨域请求允许Vue.js前端应用程序与Django后端进行跨域通信。这样您就可以在Vue.js应用中使用axios或其他HTTP客户端库发送请求到Django后端并成功获取响应数据。
3.django代码
# setting.pyINSTALLED_APPS [...corsheaders, #跨域addmyapp.apps.MyappConfig #注册app
]# urls.pyfrom django.urls import path
from myapp import viewsurlpatterns [# path(admin/, admin.site.urls),path(index/, views.index),
]# views.pyfrom django.http import HttpResponse
from django.shortcuts import render# Create your views here.
def index(request):return HttpResponse(欢迎使用)启动项目进行测试
4.vue进行跨域请求
axios
axios是一个基于Promise的HTTP客户端可以用在浏览器和Node.js环境中它是Vue.js中常用的发送网络请求的工具。 npm install axios npm list axios 查看版本 axios1.6.2 5.vue代码
main.js 是 Vue.js 项目的主入口文件负责创建 Vue 应用实例、设置全局配置并将应用挂载到页面的特定元素上。同时也用于导入并配置其他必要的模块和库。
//main.jsimport { createApp } from vue
import App from ./App.vue
// 导入router
import router from ./router.js;
// 导入axios
import axios from axios;// 设置 axios 的全局配置
axios.defaults.baseURL http://127.0.0.1:8000; // 设置基础 URL
axios.defaults.headers.common[Authorization] Bearer token; // 设置公共请求头// createApp(App).mount(#app)
const app createApp(App)app.use(router)// 将 axios 实例挂载到全局属性中
app.config.globalProperties.$http axios;
app.mount(#app)router.js 是 Vue Router 的配置文件用于定义和配置应用的路由信息。导入了 vue-router 模块定义了路由配置数组 routes然后通过 createRouter 创建了路由实例并最终导出该实例供其他地方使用。
//router.js// 导入vue-router
import { createRouter, createWebHistory } from vue-router;
// 导入你的组件
import HelloWorld from ./components/HelloWorld.vue;const routes [{path: /,component: HelloWorld},{path: /hello,component: HelloWorld}// 其他路由...
];const router createRouter({history: createWebHistory(),routes
});export default router;根组件App.vue。它是一个容器组件用于承载整个应用的内容并作为其他组件的父组件。
通过使用 router-view可以根据不同的 URL 路径动态地加载不同的组件内容到 App.vue 中。可以实现单页应用的多页面切换效果。
!-- /App.vue --templatediv idapprouter-view/router-view/div
/templatescript
export default {name: App
}
/scriptstyle/styleVue 本身并不提供内置的 HTTP 客户端功能。通常情况下这段代码应该依赖于一个名为 $http 的插件或库比如 Axios。如果这里使用的是 Axios那么 this.$http.get(/index) 就是通过 Axios 发起一个 GET 请求请求的 URL 是 ‘/index’。这个请求会返回一个 Promise 对象可以通过 .then() 方法处理请求成功的结果或者通过 .catch() 方法处理请求失败的情况。
!-- /HelloWorld.vue --
templateel-row classmb-4el-button clicktest测试/el-button/el-row
/templatescript
export default {created() {this.test(); // 组件挂载时},methods: {test () {this.$http.get(/index).then(response {// 请求成功处理响应数据console.log(response.data);}).catch(error {// 请求失败处理错误信息console.error(error);});},}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped/style前端启动进行跨域访问测试
