### 使用 PyCharm 开发 Django 后端，VSCode 开发 Vue 前端并通过 MySQL 实现完整的 Web 网站搭建 #### 一、环境准备 在开始之前，确保已经安装并验证以下软件及其版本： - **Node.js**: `node -v` 显示 v16.x 或更高版本[^1]。 - **Python**: `python --version` 显示 3.8.x 或更高版本[^1]。 - **pip**: `pip --version` 验证 Python 包管理工具可用性。 - **MySQL**: `mysql --version` 验证数据库服务正常运行。 --- #### 二、Django 后端开发 (PyCharm) ##### 1. 创建 Django 项目 启动 PyCharm 并选择 **Create New Project**。配置如下： - **Location**: 输入项目名称（如 `autotest_plat`）。 - **Interpreter**: 设置为已有的 Python 解释器或创建一个新的虚拟环境。 执行以下命令以初始化 Django 项目： ```bash django-admin startproject autotest_plat . ``` ##### 2. 配置 settings.py 文件 编辑 `autotest_plat/settings.py` 文件，调整以下部分： - **时区设置**: ```python TIME_ZONE = 'Asia/Shanghai' ``` - **静态文件路径**: ```python STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static') ``` - **数据库连接**: 修改 `DATABASES` 字典以适配 MySQL 数据库[^2]: ```python DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'your_database_name', 'USER': 'root', 'PASSWORD': 'your_password', 'HOST': '127.0.0.1', 'PORT': '3306', } } ``` ##### 3. 创建应用模块 使用以下命令创建新应用模块（如 `user`）： ```bash python manage.py startapp user ``` 将该模块注册到 `INSTALLED_APPS` 列表中： ```python INSTALLED_APPS = [ ... 'user', ] ``` ##### 4. 配置路由 在 `user` 模块下新建一个 `urls.py` 文件，并定义路由规则[^3]： ```python from django.urls import path, re_path from user import views urlpatterns = [ re_path(r'^login/$', views.user_login), ] ``` 随后，在主项目的 `autotest_plat/urls.py` 文件中引入子模块的路由： ```python from django.contrib import admin from django.urls import include, path urlpatterns = [ path('admin/', admin.site.urls), path('', include('user.urls')), ] ``` ##### 5. 运行迁移和测试服务器 执行以下命令以同步模型到数据库并启动开发服务器： ```bash python manage.py makemigrations python manage.py migrate python manage.py runserver ``` 访问 `http://127.0.0.1:8000/admin/` 登录后台管理系统。 --- #### 三、Vue 前端开发 (VSCode) ##### 1. 初始化 Vue 项目 打开终端并导航至目标目录，输入以下命令以创建 Vue 项目： ```bash npm init vite@latest frontend-app --template vue cd frontend-app npm install ``` ##### 2. 编辑 main.js 和 App.vue 修改 `src/main.js` 文件以挂载 Vue 应用实例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 更新 `src/App.vue` 文件的内容，例如展示登录按钮： ```html <template> <div id="app"> <h1>欢迎来到我的网站</h1> <button @click="handleLogin">登录</button> </div> </template> <script> export default { methods: { handleLogin() { console.log('正在尝试登录...'); fetch('http://127.0.0.1:8000/login/') .then(response => response.json()) .then(data => console.log(data)); }, }, }; </script> ``` ##### 3. 启动前端开发服务器 运行以下命令以启动本地开发服务器： ```bash npm run dev ``` 访问 `http://localhost:3000` 查看前端页面效果。 --- #### 四、前后端联调 ##### 1. CORS 配置 由于跨域问题，需要在 Django 后端启用 CORS 支持。安装相关包： ```bash pip install django-cors-headers ``` 在 `settings.py` 中添加中间件： ```python MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ] CORS_ALLOWED_ORIGINS = ['http://localhost:3000'] ``` ##### 2. API 接口设计 假设后端提供了一个 `/api/user/login/` 接口，则可在 Vue 前端通过 Axios 发起请求： ```javascript const axios = require('axios'); async function login(username, password) { try { const response = await axios.post('http://127.0.0.1:8000/api/user/login/', { username, password, }); console.log('登录成功:', response.data); } catch (error) { console.error('登录失败:', error.response?.data || error.message); } } ``` --- ### 总结 以上流程涵盖了从环境搭建到前后端分离开发的核心步骤。通过合理分工——PyCharm 处理 Django 后端逻辑，VSCode 构建 Vue 前端界面，并借助 MySQL 存储数据，最终实现了功能完善的 Web 系统。 ---