[Tencent Cloud Cloud Studio Practical Training Camp] Use python-flask para construir uma máquina de venda automática de autoatendimento.

Prefácio

Caros amigos, bem-vindos ao campo de treinamento prático do Cloud Studio!

Cloud Studio é um ambiente de desenvolvimento integrado (IDE) baseado em navegador que fornece uma estação de trabalho em nuvem que não requer instalação. Os usuários podem abrir o navegador a qualquer hora, em qualquer lugar e programar online.

Usando o Cloud Studio, os desenvolvedores podem concluir rapidamente o desenvolvimento, compilação e implantação de vários aplicativos. Quer se trate de um projeto pessoal ou de colaboração em equipe, ele pode fornecer um ambiente e ferramentas de desenvolvimento convenientes. Ao mesmo tempo, por ser uma estação de trabalho baseada em nuvem, os usuários não precisam se preocupar com a configuração do ambiente local e restrições de recursos, podendo acessar e usar o IDE para desenvolvimento a qualquer momento.

Hoje vou levá-lo para experimentar o charme do Cloud Studio e sentir sua suavidade ao operar um projeto de fato ~

Passos

Configuração do ambiente de desenvolvimento

Faça login (registre-se) na conta do Cloud Studio:

Abra o site oficial do Cloud Studio, clique para usá-lo imediatamente: https://cloud.tencent.com/product/cloudstudio

e faça login:

Se você não possui uma conta, registre-se primeiro. Todos eles pertencem à Goose Factory. Acredito que todos tenham a conta relevante, por isso não entrarei em detalhes aqui.

Entre no console do Cloud Studio:

Depois de fazer login com sucesso, você pode entrar no console do Cloud Studio. A interface é a seguinte: Existem

muitos modelos de espaço e aplicativos integrados aqui, e você pode escolhê-los de acordo com suas necessidades.
Na minha demonstração atual, optamos por criar um novo espaço de trabalho.

Crie um novo espaço de trabalho e configure os parâmetros:

Nome do espaço:
Descrição do espaço:
Categoria de trabalho:
Origem do código:
Selecione o provedor de serviços de warehouse:
Ambiente de desenvolvimento:
Versão:
Configuração da especificação:

Parece haver muitos parâmetros, mas na verdade a maioria deles pode ser usada diretamente com os valores padrão.
Preencha o nome do espaço e a descrição do espaço (opcional) e, a seguir, selecione o armazém associado ao código para concluir a configuração (caso contrário, você também pode selecionar vazio).
O que preenchi aqui é o seguinte:

clique em Novo, espere um momento e o Cloud Studio criará o espaço do projeto correspondente para você.

O espaço de trabalho foi criado com sucesso:

Após a criação bem-sucedida do projeto, você entra na interface de edição do IDE. Acredito que muitas pessoas têm uma sensação inexplicável de familiaridade com essa interface. Sim, é igual à interface vscode e as teclas de atalho são basicamente as mesmas.
Aqui você pode ficar completamente imerso nisso, como escrever código localmente!

Neste ponto, o ambiente está montado e o projeto é oficialmente iniciado.

Construção de projeto de máquina de venda automática

Este projeto é apenas uma demonstração para entretenimento e aprendizado. Este projeto usa principalmente python flask para construir o site e usa python para se conectar ao mysql para operações correspondentes. As etapas reais da operação e os artigos de código correspondentes serão abordados. Não perca. se precisar ~
Diretório do arquivo do projeto A estrutura é a seguinte:
|-- workspace
|-- README.md
|-- app.py
|-- directoryList.md
|-- static
| |-- axios.min.js
| -- templates
|-- index.html
onde app .py é o arquivo do lado do servidor, index.html é o arquivo da página front-end e axios.min.js é o arquivo js do qual o HTML depende (também pode ser acessado diretamente pela URL: https://cdn.jsdelivr.net /npm/axios/dist/axios.min.js Mas baixei no projeto para evitar inacessibilidade causada por problemas de transmissão de rede)
Os principais arquivos do projeto são esses.

Construção de página frontal

Como ele foi construído usando a estrutura python flask, você precisa criar uma pasta de modelos no projeto e colocar o arquivo html do modelo correspondente nela para facilitar a chamada.
O efeito de exibição da página index.html após a execução é:

As funções principais são divididas em três partes:

1. Área de exibição da lista de bebidas e botão adicionar ao carrinho de compras (requer interface de back-end: consulte o banco de dados para todas as interfaces de bebidas)

2. Área de exibição do carrinho de compras (requer interface back-end: operação de liquidação)

3. Área de exibição dos resultados da liquidação

Portanto o código fonte da página também é muito simples:

<!DOCTYPE html>
<html>
<head>
    <title>饮料自动售货机</title>
    <style>
        body {
      
      
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f2f2f2;
        }

        .container {
      
      
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
      
      
            color: #333;
            margin-top: 0;
        }

        .button {
      
      
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 3px;
        }

        .button:hover {
      
      
            opacity: 0.8;
        }

        .goods-list,
        .cart,
        .checkout-result {
      
      
            margin-bottom: 20px;
        }

        .goods-list-item {
      
      
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

        .goods-list-item:last-child {
      
      
            border-bottom: none;
        }

        .cart-item {
      
      
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

        .cart-item:last-child {
      
      
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>饮料列表</h2>
        <div class="goods-list" id="goods-list"></div>

        <hr>

        <h2>购物车</h2>
        <div class="cart" id="cart"></div>

        <button class="button" onclick="checkout()">结算</button>

        <hr>

        <h2>结算结果</h2>
        <div class="checkout-result" id="checkout-result"></div>
    </div>

    <script src="{
     
     { url_for('static', filename='axios.min.js') }}"></script>
    <script>
        const cart = {
      
      };

        // 发起 HTTP 请求获取商品数据
        axios.get("/goods")
          .then(response => {
      
      
            const goodsData = response.data;

            // 渲染商品列表
            const goodsListDiv = document.getElementById('goods-list');
            for (const drink in goodsData) {
      
      
              const price = goodsData[drink];

              const drinkDiv = document.createElement('div');
              const drinkText = document.createTextNode(drink + ": " + price + " 元");
              drinkDiv.appendChild(drinkText);

              const addButton = document.createElement('button');
              addButton.textContent = "加入购物车";
              addButton.addEventListener('click', function() {
      
      
                addToCart(drink);
              });

              drinkDiv.appendChild(addButton);
              goodsListDiv.appendChild(drinkDiv);
            }
          })
          .catch(error => {
      
      
            console.error(error);
          });

        // 添加到购物车的逻辑
        function addToCart(drink) {
      
      
          if (cart.hasOwnProperty(drink)) {
      
      
            cart[drink]++;
          } else {
      
      
            cart[drink] = 1;
          }

          renderCart();
        }

        // 渲染购物车
        function renderCart() {
      
      
          const cartDiv = document.getElementById('cart');
          cartDiv.innerHTML = '';

          for (const drink in cart) {
      
      
            const quantity = cart[drink];

            const itemDiv = document.createElement('div');
            const itemText = document.createTextNode(drink + ": " + quantity + " 杯");
            itemDiv.appendChild(itemText);

            cartDiv.appendChild(itemDiv);
          }
        }

        // 结算函数
        function checkout() {
      
      
          axios.post('/checkout', {
      
      cart:cart})
            .then(response => {
      
      
              const resultDiv = document.getElementById('checkout-result');
              const total_price = response.data.total_price;
              // 构造结果文本节点
              const resultText = document.createTextNode(`您本次总消费金额为：${ 
        total_price}元。`);
              // 清空结果容器并添加结果文本节点
              resultDiv.innerHTML = '';
              resultDiv.appendChild(resultText);
            })
            .catch(error => {
      
      
              console.error(error);
            });
        }
    </script>
</body>
</html>

Construção de interface de servidor

Como a estrutura python flask é usada para escrever a interface do servidor, é necessário importar o pacote correspondente:

from flask import Flask, jsonify, request, render_template

Usamos principalmente os módulos relevantes no pacote flask para interagir com HTML e flask.

No processo de classificação das páginas front-end, constatou-se que as interfaces que o front-end precisa chamar são:

1. Consulte todas as interfaces de bebidas

Aqui, os resultados da consulta são retornados para a página front-end.

2. Interface de liquidação do carrinho de compras

De acordo com os itens do carrinho de compras devolvidos pelo front end, os preços são acumulados e, em seguida, o valor da liquidação final é devolvido ao front end.

Código de back-end:

from flask import Flask, jsonify, request, render_template
app = Flask(__name__)

# 饮料及其价格
goods = {
    
    
    "可乐": 3.0,
    "雪碧": 2.5,
    "橙汁": 4.0,
    "苹果汁": 3.5
}

@app.route('/')
def index():
    return render_template('index.html',goods=goods)

@app.route('/goods', methods=['GET'])
def get_goods():
    return jsonify(goods)

@app.route('/checkout', methods=['POST'])
def checkout():
    cart = request.json.get('cart')
    total_price = calculate_total_price(cart)
    # 处理其他相关逻辑...
    return jsonify({
    
    'message': '结算成功', 'total_price': total_price})

def calculate_total_price(cart):
    total_price = 0
    # print(cart)
    for drink, count in cart.items():
        if drink in goods:
            total_price += goods[drink] * count
    return total_price

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

Ao executar app.py neste momento, você descobrirá que ele pode ser executado normalmente e, ao acessar o endereço fornecido após a execução, a página pode ser exibida normalmente e as funções são todas normais.
Neste ponto, as interfaces HTML e Python Flask foram conectadas com sucesso.
Mas como poderíamos parar por aí? Amigos cuidadosos descobriram que a lista de bebidas está escrita. Isso não é muito inconveniente? E isso não faz muito sentido nos negócios reais, então a seguir vamos falar sobre a conexão do python ao banco de dados

Conecte-se ao banco de dados (mysql)

Criar tabela de banco de dados:

Crie uma tabela de bebidas no mysql para armazenar as bebidas e preços correspondentes. Os campos são bem simples, apenas: nome, preço.

Após a criação ser bem-sucedida, adicione dados à tabela:

Use o pacote pymysql para se conectar ao banco de dados:

import pymysql

# MySQL数据库连接配置
db_config = {
    
    
    'host': '127.0.0.1',
    'user': 'root',
    'password': 'Fatb6XNFXsY6MM',
    'database': 'drink',
    'port':3306
}

def query_data():
    goods={
    
    }
    # 建立MySQL数据库连接
    conn = pymysql.connect(**db_config)
    cursor = conn.cursor()
    query = f"SELECT * FROM drink"
    # 执行查询并获取结果
    cursor.execute(query)
    result = cursor.fetchall()
    data=[]
    if len(result) > 0:
        columns = [desc[0] for desc in cursor.description]
        table_data = [{
    
    columns[i]: row[i] for i in range(len(columns))} for row in result]
        data.extend(table_data)

    # 提交事务并关闭连接
    conn.commit()
    cursor.close()
    conn.close()
    # 将查询出来的结果转化为字典格式，方便兼容之前的代码
    for i in data:
        goods[i['name']]=i['price']
    return goods

Nota:
1. A configuração relacionada ao banco de dados precisa ser modificada para a configuração de sua própria conexão mysql. (No Cloud Studio, se você deseja se conectar ao banco de dados mysql, não pode construir diretamente o serviço mysql. Você precisa se conectar ao banco de dados do servidor em nuvem. Como criar um banco de dados no servidor em nuvem será descrito em detalhes posteriormente .) 2. Neste caso, apenas
tente consultar dados do banco de dados. Outras adições, exclusões e modificações no banco de dados não estão envolvidas, mas os princípios são os mesmos. Basta fazer os ajustes correspondentes diretamente na instrução de consulta.

Execute o projeto

Execute app.py diretamente para executar o projeto com sucesso. Veja o diagrama de efeitos de execução abaixo:

Em seguida, clique para abrir o navegador para acessar o projeto no navegador:

Visualização do efeito

Vamos modificar as bebidas e preços no banco de dados para ver se a página entra em vigor.
Os dados no banco de dados atual são:

excluímos o suco de maçã e todas as bebidas subsequentes, adicionamos suco de romã, ao preço de 10,00 yuans, e depois alteramos o preço do Sprite para 3,00. O efeito modificado:

Agora executamos novamente o projeto para ver se a página entra em vigor.

Como você pode ver, a página entrou em vigor e os resultados da liquidação calculada estão corretos.
Nota: Após modificar o banco de dados aqui, é necessário reiniciar o serviço para que a página tenha efeito, pois os produtos gravados no servidor são obtidos quando o script do servidor é iniciado, e não serão mais obtidos depois disso, para evitar alta- frequência de acesso ao banco de dados, tempos utilizados (isso é imaginação minha, haha).
Se precisar obtê-lo sempre que atualizar a página, você pode colocar a lógica dos dados da consulta na rota principal.

As armadilhas encontradas

O banco de dados não pode ser conectado

Quando executei o código localmente, a operação ocorreu sem problemas porque o mysql foi instalado localmente. Quando usei o Cloud Studio para escrever o projeto, descobri que o mysql não podia ser criado e fiquei confuso. Depois de pensar sobre isso, só consegui conectar O MySQL do servidor em nuvem está instalado. Felizmente, eu mesmo tenho um serviço em nuvem CentOS, com Pagoda instalado, e a operação é relativamente infalível.
O registro da operação é o seguinte:
1. No painel Pagoda, encontre o menu do banco de dados e clique em Adicionar banco de dados

2. Ao adicionar um banco de dados, adicione o nome do banco de dados, nome de usuário, senha, selecione os direitos de acesso e clique em Enviar para crie com sucesso.

Observação aqui: as permissões de acesso aqui precisam ser definidas de acordo com seus próprios requisitos, caso contrário, você não conseguirá acessá-lo.
3. Conecte-se ao banco de dados do servidor em nuvem.
Use sua ferramenta de conexão de banco de dados local para conectar-se ao banco de dados mysql do serviço em nuvem que você acabou de criar para ver se consegue se conectar normalmente.

Ao preencher, o host precisa preencher o IP, porta, nome de usuário e senha do servidor exatamente como você acabou de defini-los e clicar em Test Connection.Se for bem-sucedido, significa que a conexão está conectada.
Nota: Se você não conseguir se conectar aqui, siga os seguintes passos para verificar:
1. A porta está aberta no servidor?
2. A porta é permitida no firewall do servidor?
3. A porta é permitida na política de segurança do servidor?
Depois a porta foi permitida com êxito, você deverá conseguir se conectar.
Em seguida, modifique a configuração correspondente no código.

Resumo e análise

O uso geral do Cloud Studio é muito tranquilo, com velocidade de compilação rápida e operação suave, o que muitas vezes faz você esquecer se está usando um compilador local ou um IDE em nuvem.

Vantagens do Cloud Studio:

• Plataforma cruzada e acessível: o CloudStudio
  pode ser acessado por meio de um navegador em qualquer dispositivo com conexão à Internet, incluindo desktops, laptops e dispositivos móveis. Dessa forma, você pode acessar e gerenciar facilmente projetos de vários dispositivos.

• Nenhuma instalação e configuração necessária: Com
  CloudStudio, você não precisa instalar e configurar nenhuma ferramenta de desenvolvimento e dependências. Tudo é feito na nuvem, basta fazer login e começar a codificar, o que economiza tempo e recursos.

• Colaboração e compartilhamento: CloudStudio
  permite que várias pessoas editem e compartilhem projetos simultaneamente, tornando a comunicação e a colaboração entre os membros da equipe mais fácil e eficiente. Você pode convidar outras pessoas para participar de projetos, trabalhar em conjunto e se comunicar em tempo real.

• Elasticidade e escalabilidade: usando infraestrutura em nuvem, o CloudStudio
  pode escalar elasticamente com base nas suas necessidades. Esteja você trabalhando em um projeto grande ou precise de mais recursos de computação, ele pode se adaptar às suas necessidades.

• Salvamento automático e controle de versão: CloudStudio
  pode salvar automaticamente seu trabalho e fornecer funções básicas de controle de versão. Mesmo que algo inesperado aconteça (como queda de energia ou queda de rede), seu código não será perdido e você poderá restaurar e rastrear facilmente versões históricas.

Em termos de escrita de código específico, o desempenho não é inferior ao do IDE local:

• Destaque de código: exiba palavras-chave no código em cores diferentes para melhorar a legibilidade.
• Preenchimento automático: solicita automaticamente trechos de código com base nas palavras-chave inseridas, reduzindo o tempo de gravação de código e erros.
• Integração Git: Suporta integração com sistema de controle de versão Git para facilitar o gerenciamento de código e o desenvolvimento colaborativo.
• Terminal: Fornece funções de terminal para executar comandos e scripts diretamente no IDE.
• Depuração em tempo real: oferece suporte à depuração de código em tempo real para ajudar os desenvolvedores a encontrar e corrigir erros.
• Extensão de plug-in: As funções do IDE podem ser expandidas com a instalação de plug-ins para atender a diferentes necessidades de desenvolvimento.

Desvantagens do Cloud Studio:

1. Falta de acesso ao sistema de arquivos local: IDEs on-line não podem acessar diretamente o sistema de arquivos local do seu computador e não podem abrir ou salvar facilmente arquivos localizados no seu computador. Em vez disso, eles precisam operar por meio de upload e download.

2. Problemas com múltiplas transferências de arquivos: Se você precisar fazer upload de vários arquivos para um IDE online ao mesmo tempo, pode ser necessário selecionar e fazer upload de cada arquivo um por um, o que pode ser mais complicado do que um IDE local.

3. O IP do IDE da nuvem não pode ser obtido com precisão. Por exemplo, por motivos de segurança, alguns serviços precisam adicionar o IP à lista de permissões antes de poderem ser acessados. O IP do IDE da nuvem não pode ser obtido com clareza, resultando na incapacidade de ser adicionado à lista de permissões.

Espero que o funcionário possa fazer as melhorias correspondentes e tornar a experiência cada vez melhor!

Recursos relacionados ao projeto

Neste ponto, o objetivo do projeto foi alcançado com sucesso! Espalhe flores ~
Links de recursos de projetos relevantes estão anexados aqui, amigos que precisam deles podem simplesmente buscá-los.

Endereço de codificação do projeto

Endereço do armazém de codificação: https://dashixiong6668.coding.net/public/auto_seller/auto_seller/git/files