Django-Vue搭建个人博客:前端开发准备

2358 views, 2021/03/19 updated   Go to Comments

博客后端的主要开发工作就告一段落了。

覆盖的知识点主要有:

  • REST 的概念
  • 序列化器/APIView
  • 类视图和通用视图
  • 权限控制
  • ModelSerializer
  • 超链接字段/分页
  • 视图集/ModelViewSet
  • SearchFilter/DjangoFilterBackend
  • 嵌套序列化器/操作外键
  • 验证器/覆写动作
  • 自定义字段
  • 文件上传
  • 添加保存数据
  • 模型自关联
  • JWT 身份验证
  • 权限分配/自定义动作

后面的章节将正式进入 Vue 前端的搭建。核心知识点有:

  • 用 Vue 搭建前端页面
  • 实现 Vue 和 Django 的配合
  • 继续完善 Django 后端功能

在前端开发中,笔者将用到的环境如下:

  • Vue 3
  • Vue-Cli 4.5.9
  • npm 6.14.9

注意事项1:笔者写教程时正处于 Vue2Vue3 的过渡时期,Vue 3 从文档到生态都还不完善(现已推出了中文文档)。但是秉着学新不用旧的精神,教程会采用 Vue 3。读者在看教程时一定要注意相关框架的版本,以免出现接口变动、大版本不一致等原因造成的代码失效的情况。

注意事项2:本教程的笔者需要具有一定前端基础(最起码了解 HTML、Javascript、CSS语法)。如果你前端零基础,那么建议先浏览以下内容:

再次建议读者将示例代码克隆到本地,作为学习过程的参照(也感谢你顺手给一个 Star)。

话不多少,本章的核心任务是让前端服务顺利启动起来。

准备工作

开发前端时会用到 npm(类似 Python 的包管理工具 Pip),这是 Node.js 官方提供的包管理工具。

所以准备工作的第一步,安装 Node.js,下载地址在官网,安装时基本就是一路 next。

完毕后打开命令行(依旧默认是 PowerShell),输入:

> npm -v
6.14.9

显示版本号就表示安装成功了。

npm 站点在国外,如果你遇到安装速度慢的问题,可以用指令 npm config set registry https://registry.npm.taobao.org 修改为国内镜像源。

接下来就可以安装 Vue 的命令行工具,它可以帮助我们方便的搭建 Vue 项目的骨架:

> npm install -g @vue/cli

# 这里省略一段神秘的安装文字...

> vue --version
@vue/cli 4.5.9

同样的,显示版本号就表示安装成功了。

深入了解见Vue-Cli文档

如果运行命令报错"vue: 无法加载文件 C:\xxx\vue.ps1,因为在此系统上禁止运行脚本",则需要通过 PowerShell 解除 Execution_Policies 运行策略限制。方法见这里

进入 Django 项目的根目录,用命令行工具搭建 Vue 骨架:

# 改为你的项目根路径
> cd D:\Developer\Py\drf_vue_blog
> vue create frontend

一定要选择安装 Vue 3:

前面说了,Vue 3 和 Vue 2 变化比较大,装错了后面章节的代码可能都跑不起来。

# 选择第二项,即安装 Vue3

Vue CLI v4.5.9
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features 

然后等待安装完成:

Vue CLI v4.5.9
Creating project in D:\Developer\Py\drf_vue_blog\frontend.
Installing CLI plugins. This might take a while...

...

added 1243 packages from 946 contributors in 22.141s

63 packages are looking for funding
  run `npm fund` for details

Invoking generators...
Installing additional dependencies...

added 75 packages from 83 contributors in 9.281s

69 packages are looking for funding
  run `npm fund` for details

Running completion hooks...

Generating README.md...

Successfully created project frontend.
Get started with the following commands:

 $ cd frontend
 $ npm run serve

出现这段文字说明 Vue 安装完成了。

与 Django 需要运行服务器类似,作为前后端分离的项目,在开发时前端同样也需要运行前端的服务器。

根据文字提示,进入 frontend 目录,运行 Vue 的开发服务器:

> cd frontend
> npm run serve

 DONE  Compiled successfully in 2134ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.20.10.2:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080/ 即可看到 Vue 的欢迎页面了。

进行后续章节的开发时,我们需要同时运行后端 http://127.0.0.1:8000/ 和前端 http://localhost:8080/ 两个服务器,别搞混了。

如果你学习本教程时用的 PyCharm,那么这里可能会遇到它对 JavaScript ES6 语法不支持、对 .Vue 文件高亮不支持这两个软件问题。解决方法请合理运用搜索。




本文作者: 杜赛
发布时间: 2021年03月19日 - 22:07
最后更新: 2021年03月19日 - 22:07
转载请保留原文链接及作者
本站使用 Github 评论后端。鉴于国内复杂的网络环境,如遇评论无法加载、发表等问题,请尝试刷新页面,或更换上网姿势。