第2章开发环境搭建

第2章：开发环境搭建

好，咱们正式开始动手了。

这一章，说白了就是「把家伙事儿备齐」。我见过太多学员，代码写得挺溜，结果环境配了一整天，心态直接崩了。所以咱们稳一点，一步一步来。

2.1 Python虚拟环境配置

为什么要用虚拟环境？

你想想看，你电脑上可能同时有好几个Python项目。有的用Flask 1.x，有的用Flask 2.x。如果不隔离，那简直就是灾难。我早期做项目时就吃过这个亏——一个项目升级了依赖，另一个项目直接跑不起来了。

虚拟环境就是给每个项目一个「独立的小房间」。互不干扰。

2.1.1 创建虚拟环境

我个人习惯用 venv，Python 3.3+ 自带，不用额外装东西。

# 打开终端，进入你的项目目录
mkdir crm_project
cd crm_project

# 创建虚拟环境
python -m venv venv

嗯，这里要注意：第二个 venv 是虚拟环境的名字，你可以随便起，比如 myenv。但业内约定俗成叫 venv，方便别人一看就懂。

2.1.2 激活虚拟环境

不同系统命令不一样，我列个表：

操作系统	命令
Windows (CMD)	`venv\Scripts\activate`
Windows (PowerShell)	`venv\Scripts\Activate.ps1`
macOS / Linux	`source venv/bin/activate`

激活成功后，终端前面会出现 (venv) 字样。看到这个，就说明你已经在虚拟环境里了。

小技巧： 我习惯在 VS Code 里直接选择 Python 解释器为虚拟环境里的那个。按 Ctrl+Shift+P，搜 "Python: Select Interpreter"，选 ./venv/bin/python 就行。

2.2 Flask框架安装与Hello World

环境准备好了，咱们装Flask。

# 确保虚拟环境已激活
pip install flask

就这么一行。Flask 的依赖很少，装起来很快。我记得第一次用 Django 的时候，装了半天，Flask 就清爽多了。

2.2.1 第一个Flask应用

在项目根目录下新建一个文件，叫 app.py：

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, CRM World!'

if __name__ == '__main__':
    app.run(debug=True)

然后运行：

python app.py

打开浏览器，访问 http://127.0.0.1:5000。看到 "Hello, CRM World!" 了吗？成了。

  重点： debug=True 这个参数，开发时一定要加上。改了代码自动重启，省得你手动一遍遍重启服务。但生产环境千万别开，有安全风险。

2.3 MySQL数据库安装与Navicat配置

咱们这个CRM系统，数据总得有个地方存。MySQL 是主流选择。

2.3.1 安装MySQL

去官网下载 MySQL Community Server。我个人建议用 8.0 版本，稳定且功能齐全。

安装过程中会让你设 root 密码。记好了，后面要用。我曾经有个学员设完就忘了，折腾了半天重置密码。

避坑指南： macOS 用户建议用 Homebrew 安装：brew install mysql。Windows 用户记得勾选 "Add to PATH"，不然命令行里找不到 mysql 命令。

2.3.2 安装Navicat

Navicat 是个数据库管理工具，图形化界面，操作起来很方便。当然，你也可以用 DBeaver 或者 MySQL Workbench，看个人喜好。

安装好后，新建连接：

连接名：随便起，比如 "CRM开发库"
主机：localhost 或 127.0.0.1
端口：3306（默认）
用户名：root
密码：你刚才设的那个

点「测试连接」，通了就OK。

2.3.3 创建数据库

在Navicat里新建一个数据库，名字叫 crm_db，字符集选 utf8mb4。为什么选这个？因为 utf8mb4 支持 emoji 和特殊字符，你想想看，万一客户名字里带个表情符号呢？

2.4 Vue CLI脚手架搭建前端项目

后端搭好了，该前端了。咱们用 Vue 3。

2.4.1 安装Node.js和npm

去 nodejs.org 下载 LTS 版本。装完后验证：

node -v
npm -v

能看到版本号就说明装好了。

2.4.2 安装Vue CLI并创建项目

# 全局安装 Vue CLI
npm install -g @vue/cli

# 创建项目
vue create crm-frontend

这里会弹出一个交互式菜单。我建议选 "Manually select features"，然后勾上 Babel、Router、Vuex。Router 后面做页面跳转要用，Vuex 管理全局状态。

创建完成后：

cd crm-frontend
npm run serve

浏览器打开 http://localhost:8080，看到 Vue 的欢迎页面就对了。

个人经验： 如果你电脑上同时有 Vue 2 和 Vue 3 的项目，建议用 @vue/cli 的 5.x 版本，对 Vue 3 支持更好。

2.5 前后端联调准备

前后端都跑起来了，但它们是两个独立的服务。前端在 8080 端口，后端在 5000 端口。怎么让它们通信？

2.5.1 跨域问题

浏览器有个同源策略，不同端口就算跨域。解决办法有两个：

后端加 CORS： 在 Flask 里装 flask-cors 包
前端配代理： 在 Vue 项目的 vue.config.js 里配置

我个人推荐第二种，开发时更方便。在 crm-frontend 目录下新建 vue.config.js：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
}

这样，前端请求 /api/xxx 时，会自动转发到后端 5000 端口。完美解决跨域问题。

2.5.2 测试联调

在后端 app.py 里加一个接口：

@app.route('/api/hello')
def api_hello():
    return {'message': 'Hello from Flask!'}

前端在 App.vue 里用 fetch 调用一下：

fetch('/api/hello')
  .then(res => res.json())
  .then(data => console.log(data))

打开浏览器控制台，看到 {message: "Hello from Flask!"} 了吗？前后端联调成功了。

  总结一下： 这一章我们干了五件事——配了Python虚拟环境、写了第一个Flask应用、装了MySQL和Navicat、用Vue CLI搭了前端项目、最后让前后端成功通上了话。基础打牢了，后面写代码才顺手。

下一章，咱们开始设计数据库表结构，把客户、订单这些核心数据模型建起来。到时候见。

📚 课程目录