Python Web全栈工程师

讠果☛ ukoou.com/resource/1414

Flask、django 框架介绍

Flask 是一个轻量级的 Web 框架，使用 Python 语言编写，较其他同类型框架更为灵活、轻便且容易上手，小型团队在短时间内就可以完成功能丰富的中小型网站或 Web 服务的实现。

Flask 具有很强的定制性，用户可以根据自己的需求来添加相应的功能，在保持核心功能简单的同时实现功能的丰富与扩展，其强大的插件库可以让用户实现个性化的网站定制，开发出功能强大的网站。 Flask 是一个 Python 实现的 Web 开发微框架，但是这个“微”并不代表着 Flask 功能比较简陋、有所欠缺。微框架中的 “微” 意味着：

Flask 旨在保持核心简单而易于扩展；
Flask 不会替用户做出太多决策，比如使用何种数据库；
Flask 的选项（比如使用何种模板引擎) 通常有多个，用户很容易替换。

Flask 与 Django 的比较两个框架的区别

其实两者最主要区别在于：Django 功能大而全，Flask 只包含基本的功能。

Django 采用一站式解决的思路，Django 集成有模板、表单、路由、认证、基本的数据库管理等内建功能，开发者不用在选择应用的基础设施上花费大量时间。

Django 就像是一个装潢好的房子，它提供了各种家具，直接入住即可。

Flask 相对于 Django 而言是轻量级的 Web 框架。和 Django 不同，Flask 只提供了最核心的功能，轻巧、简洁，通过定制第三方扩展来实现具体功能。

默认情况下，不包含数据库抽象、用户认证、表单验证、发送邮件等其它 Web 框架经常包含的功能。Flask 依赖用各种灵活的扩展（比如邮件 Flask Mail，用户认证 Flask Login，数据库 Flask SQLAlchemy）来给Web应用添加额外功能。

Flask 就像是一个没有装潢的房子，用户需要自己选择各种家具才可以入住。

Python Web全栈工程师 - DRF 概述及环境安装

核心思想: 缩减编写api接口的代码

Django REST framework是一个建立在Django基础之上的Web 应用开发框架,本质上就是一个内置在django里面的子应用，可以快速的开发REST API接口应用。

在REST framework中，提供了序列化器对象Serializer的定义，可以帮助我们简化序列化与反序列化的过程，不仅如此，还提供丰富的类视图、扩展类、视图集来简化视图的编写工作。REST framework还提供了认证、权限、限流、过滤、分页、接口文档等功能支持。REST framework提供了一个用于测试API接口的可视化Web界面【可以浏览器直接访问接口，drf的api接口测试页面非常美观】。

安装DRF（使用虚拟环境）

前提是已经安装了django，建议安装在虚拟环境

windows的复制粘贴在linux终端是无效的，在ubuntu终端下粘贴的快捷键是 shift+insert

# mkvirtualenv drfdemo -p python3
# pip install django==2.2.0  -i https://pypi.douban.com/simple

# pip install djangorestframework -i https://pypi.douban.com/simple

# 因为我们需要接下来，需要开发api接口肯定要操作数据，所以安装pymysql
pip install pymysql -i https://pypi.douban.com/simple

2.1.1 创建django项目

cd ~/Desktop
django-admin startproject drfdemo

如果退出终端，想再次进入虚拟环境：

moluo@ubuntu:~$ workon
drfdemo
moluo@ubuntu:~$ workon drfdemo
(drfdemo) moluo@ubuntu:~$

使用pycharm打开项目，设置虚拟环境的解析器（把项目解释器改为之前创建的虚拟环境），补充修改项目端口另一种方式，先运行manage.py，之后右上角修改manage.py中的后缀参数。

打开项目运行时，发现manage.py文件中import sys飘红，这个不用管

2.2 注册rest_framework应用

在settings.py的INSTALLED_APPS中添加'rest_framework'。

INSTALLED_APPS = [
    ...
    'rest_framework',
]

接下来就可以使用DRF提供的功能进行api接口开发了。在项目中如果使用rest_framework框架实现API接口，主要有以下三个步骤：

将请求的数据（如JSON格式）转换为模型类对象
通过模型类对象进行数据库操作，完成客户端请求的增删查改
将模型类对象转换为响应的数据（如JSON格式）

Python Web全栈工程师 - vue导航菜单栏接口数据渲染

在Vue.js中，导航菜单栏（通常称为侧边栏或侧导航）的接口数据渲染涉及到几个关键步骤：获取接口数据、处理数据以构建菜单结构、以及使用Vue组件和指令来渲染菜单。以下是一个基本的流程，展示了如何在Vue应用中实现这一过程：

步骤 1: 获取接口数据

首先，你需要从后端接口获取菜单数据。这通常通过HTTP请求来完成。你可以使用axios、fetch或其他HTTP库来发送请求。

// 使用axios发送GET请求获取菜单数据
import axios from 'axios';

async function fetchMenuData() {
  try {
    const response = await axios.get('/api/menu');
    return response.data; // 假设后端返回的数据格式是{ data: [{...}] }
  } catch (error) {
    console.error('Error fetching menu data:', error);
    return [];
  }
}

步骤 2: 处理数据构建菜单结构

获取到数据后，你需要将其处理成适合Vue渲染的格式。通常，菜单数据会包含层级结构，每个菜单项可能包含子菜单。

// 假设fetchMenuData返回的是一个对象数组，每个对象包含id, title, url等属性
const menuData = fetchMenuData();

// 处理数据，构建菜单结构
function buildMenuStructure(data) {
  return data.map(item => ({
    ...item,
    children: item.children ? buildMenuStructure(item.children) : []
  }));
}
const menuStructure = buildMenuStructure(menuData);

步骤 3: 使用Vue组件渲染菜单

在Vue组件中，你可以使用v-for指令来遍历菜单结构并渲染每个菜单项。

<template>
  <ul>
    <li v-for="item in menuStructure" :key="item.id">
      <router-link :to="item.url">{{ item.title }}</router-link>
      <ul v-if="item.children.length">
        <li v-for="child in item.children" :key="child.id">
          <router-link :to="child.url">{{ child.title }}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuStructure: []
    };
  },
  created() {
    this.menuStructure = buildMenuStructure(fetchMenuData());
  }
};
</script>

在这个例子中，我们使用了<router-link>组件来处理路由导航，这是Vue Router提供的一个组件，它可以生成一个<a>标签，其href属性被设置为Vue Router的路由路径。

步骤 4: 样式和交互

你可能还需要为菜单添加样式，并处理一些交互逻辑，比如点击菜单项时的高亮显示、子菜单的展开和收起等。这些可以通过CSS类和Vue的事件处理器来实现。

/* 样式示例 */
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 5px 0;
}
router-link-active {
  font-weight: bold;
}

// Vue组件中的事件处理器示例
methods: {
  toggleSubMenu(index) {
    // 切换子菜单的展开和收起状态
  }
}

Python Web全栈工程师「慕ke」