flask web 开发实战电子书_Web开发基础-09-Vue实战--前端

最新推荐文章于 2023-10-17 15:23:05 发布
最新推荐文章于 2023-10-17 15:23:05 发布
阅读量238 收藏
点赞数
文章标签： flask web 开发实战电子书
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34626572/article/details/112103359
版权

Vue 实战 -- 前端

Vuex基本原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，

这个状态管理应用包含以下几个部分：

  • State，驱动应用的数据源；
  • View，以声明方式将 state 映射到视图；
  • Actions，响应在 view 上的用户输入导致的状态变化。

强调数据流的单向流动。

d9145d24fe68407896f0deb7fb10ef31.png
  1. Vue页面Commponent -- 调用 method -- State修改-- render重新渲染页面Commponent
  2. coupon页面添加优惠策略按钮
  3. Vue页面Commponent -- 异步事件调用 dispatch --> Action --> 回调（可能包含dispatch，commit）
  4. addcoupon页面确定按钮
  5. Vue页面Commponent -- 同步调用commit一个type类型 --> Mutation -- 匹配对应type操作State-- render重新渲染页面Commponent
  6. set_addHotelModalVisible设置页面的显示

List页面

coupon.vue中

3fe72475c5907ceb13dbae69878a4130.png 
<template>
   <div>
    <a-modal
        :visible="couponVisible"
        title="优惠策略"
        width="900px"
        :footer="null"
        @cancel="cancel"
    >
        <div style="width: 100%; text-align: right; margin:20px 0">
            <a-button type="primary" @click="addCoupon"><a-icon type="plus" />添加优惠策略</a-button>  //click操作绑定addCoupon方法
        </div>
        <a-table
            :columns="columns"
            :dataSource="couponList"
            bordered
        >
            <a-tag color="red" slot="couponName" slot-scope="text">
                {{text}}
            </a-tag>
        </a-table>
    </a-modal>
    <AddCoupon></AddCoupon>
   </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import AddCoupon from './addCoupon'

const columns = [
    {
        title: '优惠类型',
        dataIndex: 'couponName',
        scopedSlots: {customRender: 'couponName'}
    },
    {
        title: '折扣',
        dataIndex: 'discount',
    },
    {
        title: '优惠简介',
        dataIndex: 'description',

    },
    {
        title: '优惠金额',
        dataIndex: 'discountMoney',
    },
  ];
export default {
    name: 'coupon',
    data() {
        return {
            columns
        }
    },
    components: {
        AddCoupon,
    },
    computed: {
        ...mapGetters([
            'couponVisible',
            'couponList',
        ])
    },
    methods: {
        ...mapMutations([
            'set_addCouponVisible',
            'set_couponVisible',
        ]),
        ...mapActions([
            'getHotelCoupon'
        ]),
        cancel() {
            this.set_couponVisible(false)
        },
        addCoupon() {// 改变状态，自动渲染
            this.set_addCouponVisible(true),
            this.set_couponVisible(false)
        },
    },
}
</script>
<style scoped>

</style>

表单页面

addCoupon.vue

4b703b13e48c2045c1f807ffbe9a2db6.png 
<template>
    <a-modal
        :visible="addCouponVisible"
        title="添加优惠策略"
        cancelText="取消"
        okText="确定"
        @cancel="cancel"
        @ok="handleSubmit" 
    >   <!-- #点确定的响应方法handleSubmit -->
        <a-form :form="form" style="margin-top: 30px" v-bind="formItemLayout">
            <a-form-item label="优惠券类型" v-bind="formItemLayout">
                <a-select
                    v-decorator="[
                    'type', 
                    { rules: [{ required: true, message: '请选择类型' }] }]"
                    @change="changeType"
                >
                  <a-select-option value="1">生日特惠</a-select-option>
                  <a-select-option value="2">多间特惠</a-select-option>
                  <a-select-option value="3">满减特惠</a-select-option>
                  <a-select-option value="4">限时特惠</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="券名" v-bind="formItemLayout">
                <a-input
                    placeholder="请填写券名"
                    v-decorator="['name', { rules: [{ required: true, message: '请输入券名' }] }]"
                />
            </a-form-item>
            <a-form-item label="优惠简介" v-bind="formItemLayout">
                <a-input
                    type="textarea"
                    :rows="4"
                    placeholder="请填写优惠简介"
                    v-decorator="['description', { rules: [{ required: true, message: '请填写优惠简介' }] }]"
                />
            </a-form-item>
             <a-form-item label="达标金额">
                <a-input
                    placeholder="请填写达标金额"
                    v-decorator="['targetMoney', { rules: [{ required: true, message: '请填写达标金额' }] }]"
                />
            </a-form-item>
            <a-form-item label="优惠金额" v-bind="formItemLayout">
                <a-input
                    placeholder="请填写优惠金额"
                    v-decorator="['discountMoney', { rules: [{ required: true, message: '请填写优惠金额' }] }]"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: 'addCouponModal',
    data() {
        return {
            formItemLayout: {
                labelCol: {
                    xs: { span: 12 },
                    sm: { span: 6 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            },
        }
    },
    computed: {
        ...mapGetters([
            'activeHotelId',
            'addCouponVisible',
        ])
    },
    beforeCreate() {
        // 表单名默认为“form”
        this.form = this.$form.createForm(this, { name: 'addCouponModal' });
    },
    mounted() {

    },
    methods: {
        ...mapMutations([
            // mutations    this.$store.commit(xxx) mapMutations
            'set_addCouponVisible'   
        ]),
        ...mapActions([
            // addHotelCoupon：添加酒店优惠券接口
            //actions   this.$store.dispatch（xxx ）  mapActions
            'addHotelCoupon'
        ]),
        cancel() {
            this.set_addCouponVisible(false)
        },
        changeType(v){
            if( v == '3') {

            }else{
                this.$message.warning('请实现')
            }
        },
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    const data = {
                        name: this.form.getFieldValue('name'),
                        description: this.form.getFieldValue('description'),
                        type: Number(this.form.getFieldValue('type')),
                        targetMoney: Number(this.form.getFieldValue('targetMoney')),
                        discountMoney: Number(this.form.getFieldValue('discountMoney')),
                        hotelId: Number(this.activeHotelId),
                        status: 1,
                    }
                    this.addHotelCoupon(data)
                }
            });
        },//响应按钮的按下，调用action方法
    }
}
</script>

js

store文件夹下hotelManager.js

import {
    addRoomAPI,
    addHotelAPI,
} from '@/api/hotelManager'
import {
    getAllOrdersAPI,
} from '@/api/order'
import {
    hotelAllCouponsAPI,
    hotelTargetMoneyAPI,      //导入api的定义
} from '@/api/coupon'
import { message } from 'ant-design-vue'

const hotelManager = {
    state: {
        orderList: [],
        addHotelParams: {
            name: '',
            address: '',
            bizRegion:'XiDan',
            hotelStar:'',
            rate: 0,
            description:'',
            phoneNum:'',
            managerId:'',
        },
        addHotelModalVisible: false,
        addRoomParams: {
            roomType: '',
            hotelId: '',
            price: '',
            total: 0,
            curNum: 0,
        },
        addRoomModalVisible: false,
        couponVisible: false,
        addCouponVisible: false,
        activeHotelId: 0,
        couponList: [],
    },
    mutations: {
        set_orderList: function(state, data) {
            state.orderList = data
        },
        set_addHotelModalVisible: function(state, data) {
            state.addHotelModalVisible = data
        },
        set_addHotelParams: function(state, data) {
            state.addHotelParams = {
                ...state.addHotelParams,
                ...data,
            }
        },
        set_addRoomModalVisible: function(state, data) {
            state.addRoomModalVisible = data
        },
        set_addRoomParams: function(state, data) {
            state.addRoomParams = {
                ...state.addRoomParams,
                ...data,
            }
        },
        set_couponVisible: function(state, data) {
            state.couponVisible = data
        },
        set_activeHotelId: function(state, data) {
            state.activeHotelId = data
        },
        set_couponList: function(state, data) {
            state.couponList = data
        },
        set_addCouponVisible: function(state, data) {
            state.addCouponVisible =data
        }
    },
    actions: {
        getAllOrders: async({ state, commit }) => {
            const res = await getAllOrdersAPI()
            if(res){
                commit('set_orderList', res)
            }
        },
        addHotel: async({ state, dispatch, commit }) => {
            const res = await addHotelAPI(state.addHotelParams)
            if(res){
                dispatch('getHotelList')
                commit('set_addHotelParams', {
                    name: '',
                    address: '',
                    bizRegion:'XiDan',
                    hotelStar:'',
                    rate: 0,
                    description:'',
                    phoneNum:'',
                    managerId:'',
                })
                commit('set_addHotelModalVisible', false)
                message.success('添加成功')
            }else{
                message.error('添加失败')
            }
        },
        addRoom: async({ state, dispatch, commit }) => {
            const res = await addRoomAPI(state.addRoomParams)
            if(res){
                commit('set_addRoomModalVisible', false)
                commit('set_addRoomParams', {
                    roomType: '',
                    hotelId: '',
                    price: '',
                    total: 0,
                    curNum: 0,
                })
                message.success('添加成功')
            }else{
                message.error('添加失败')
            }
        },
        getHotelCoupon: async({ state, commit }) => {
            const res = await hotelAllCouponsAPI(state.activeHotelId)
            if(res) {
                commit('set_couponList', res)
            }
        },
        addHotelCoupon: async({ commit, dispatch }, data) => {
            const res = await hotelTargetMoneyAPI(data)
            if(res){
                dispatch('getHotelCoupon')
                commit('set_addCouponVisible', false)
                commit('set_couponVisible',true)
                message.success('添加策略成功')
            }else{
                message.error('添加失败')
            }
        }//异步的方法调用，访问服务器api，以及回调方法（包括新的dispatch 去取酒店的所有coupon信息和commit view跳转）
    }
}
export default hotelManager

api文件夹下coupon.js文件

import { axios } from '@/utils/request'
const api = {
    couponPre: '/api/coupon'
}
export function hotelTargetMoneyAPI(data) {
    return axios({
        url: `${api.couponPre}/hotelTargetMoney`,
        method: 'POST',
        data,
    })//POST请求添加coupon
}

export function hotelAllCouponsAPI(hotelId) {
    return axios({
        url: `${api.couponPre}/hotelAllCoupons`,
        method: 'GET',
        params: {hotelId: hotelId},
    })
}

export function orderMatchCouponsAPI(params) {
    return axios({
        url: `${api.couponPre}/orderMatchCoupons`,
        method: 'GET',
        params,
    })  
}

controller

package com.example.hotel.controller.coupon;

import com.example.hotel.bl.coupon.CouponService;
import com.example.hotel.vo.CouponVO;
import com.example.hotel.vo.HotelTargetMoneyCouponVO;
import com.example.hotel.vo.OrderVO;
import com.example.hotel.vo.ResponseVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/coupon")
public class CouponController {

    @Autowired
    private CouponService couponService;

    @PostMapping("/hotelTargetMoney")//添加coupon，调用逻辑层接口
    public ResponseVO addHotelTargetMoneyCoupon(@RequestBody HotelTargetMoneyCouponVO hotelTargetMoneyCouponVO) {

        CouponVO couponVO = couponService.addHotelTargetMoneyCoupon(hotelTargetMoneyCouponVO);

        return ResponseVO.buildSuccess(couponVO);
    }

    @GetMapping("/hotelAllCoupons")
    public ResponseVO getHotelAllCoupons(@RequestParam Integer hotelId) {
        return ResponseVO.buildSuccess(couponService.getHotelAllCoupon(hotelId));
    }

    @GetMapping("/orderMatchCoupons")
    public ResponseVO getOrderMatchCoupons(@RequestParam Integer userId,
                                           @RequestParam Integer hotelId,
                                           @RequestParam Double orderPrice,
                                           @RequestParam Integer roomNum,
                                           @RequestParam String checkIn,
                                           @RequestParam String checkOut) {
        OrderVO requestOrderVO = new OrderVO();
        requestOrderVO.setUserId(userId);
        requestOrderVO.setHotelId(hotelId);
        requestOrderVO.setPrice(orderPrice);
        requestOrderVO.setRoomNum(roomNum);
        requestOrderVO.setCheckInDate(checkIn);
        requestOrderVO.setCheckOutDate(checkOut);
        return ResponseVO.buildSuccess(couponService.getMatchOrderCoupon(requestOrderVO));
    }


}
苏南影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flask-Web开发书籍实战.zip
09-28
《Flask-Web开发实战》是一本专注于使用Python Flask框架进行Web应用开发的书籍。Flask作为轻量级的Web服务器网关接口（WSGI）微框架，以其简洁、灵活的特点受到众多开发者喜爱。这本书旨在帮助初学者和有一定经验的...
Flask web开发实战视频教程+源代码+课件-Python框架.txt
12-11
Flask web开发实战视频教程+源代码+课件-Python框架。 Flask是一个使用 Python 编写的轻量级 Web 应用框架,扩展性非常良好。 是web端流行框架之一, Flask web开发实战+源代码+课件, 度盘自取 ======== Flask ...
flask web 开发实战电子书_Python3爬虫实战-5、Web库的安装：Flask、Tornado
weixin_34274601的博客
12-20 186
Web 想必我们都不陌生，我们现在日常访问的网站都是 Web 服务程序搭建而成的，Python 同样不例外也有一些这样的 Web 服务程序，比如 Flask、Django 等，我们可以拿它来开发网站，开发接口等等。在本书中，我们主要要用到这些 Web 服务程序来搭建一些 API 接口，供我们的爬虫使用。例如，维护一个代理池，代理保存在 Redis 数据库中，我们要将代理池作为一个公共的组件使用，那...
Flask web开发实战之基础篇 Flask-模板
weixin_39451323的博客
03-22 8866
基础篇 第二章 Flask模板前言3. Flask模板3.1 模板基本用法3.1.1 创建模板3.1.2 模板语法3.1.3 渲染模板3.2 模板辅助工具3.3 模板结构组织3.4 模板进阶实战3.5 本章代码 前言 这一切开始于2010年4月1日，Armin Ronacher在网上发布了一篇关于“下一代Python微框架”的介绍文章，文章里称这个Denied框架不依赖Python标准库，只需要复制一份deny.py放到你的项目文件夹就可以开始编程。伴随着一本正经的介绍、名人推荐语、示例代码和演示视频，
Flask快速开发Web应用：入门到精通必备知识
DEVELOPERAA的博客
07-17 742
Flask是一个基于Python的轻量级Web框架，它具有简单易用、灵活可扩展等特点，非常适合用于小型Web应用开发。下面是关于Flask的基础知识的讲解。
[记录]基于Flask Web全栈开发实战-项目实战·上篇（黄勇 • 著）
qq_23938507的博客
10-17 2122
flask web全栈开发项目实战
python restful 框架_Python Flask Web 框架入门
weixin_34046298的博客
03-01 434
Flask是一个轻量级的基于Python的web框架。本文适合有一定HTML、Python、网络基础的同学阅读。1. 简介这份文档中的代码使用 Python 3 运行。是的，所以读者需要自己在电脑上安装Python 3 和 pip3。建议安装最新版本，我使用的是Python 3.6.4。安装方法，可以自行谷歌或者百度。建议在 linux 下实践本教程中命令行操作、执行代码。2. 安装通过pip3安...
Flask+Web开发实战,flaskweb开发实战pdf,Python
09-10
Flask的强大之处在于其丰富的扩展生态系统，如SQLAlchemy（ORM）、Flask-SQLAlchemy（简化SQLAlchemy的使用）、Flask-WTF（表单处理）、Flask-Mail（邮件发送）等。这些扩展让Flask能够轻松应对复杂项目的需求。 **...
基于实战电子书 Flask Web 开发的学习源码
最新发布
03-25
项目概述：基于实战电子书《Flask Web开发：基于Python的Web应用开发实战》的学习源码，主要采用Python语言进行开发，同时融合了JavaScript、HTML、CSS和PHP等多种技术。该项目包含476个文件，其中JavaScript文件215...
Flask_Web全栈开发阶段-flask框架.zip
11-22
在本压缩包“Flask_Web全栈开发阶段-flask框架.zip”中，核心主题是关于使用Flask框架进行Web全栈开发的知识。Flask是一个轻量级的Python Web服务器网关接口（WSGI）应用框架，由Armin Ronacher开发。它提供了基础的...
Flask Web电子教程
09-29
带目录的python flask开发教程电子书。 只要2分。你值得拥有。
flask电子书全集.rar
05-16
工作中收集的flask相关电子书，英文中文都有。flask资料相对比较少，这里收集的够用了。一共6本
flask、element、vue项目实战：搭建一个加密excel数据的网站.pdf
12-16
flask、element、vue项目实战：搭建一个加密excel数据的网站
Python-基于Flask和Vuejs前后端分离的微型博客项目
08-12
支持多用户、Markdown文章（喜欢/收藏文章）、粉丝关注、用户评论（点赞）、动态通知、站内私信、黑名单、邮件支持、管理后台、权限管理、Celery任务队列、Elasticsearch全文搜索、Linux VPS部署、Docker容器部署等
Flask Web应用开发实战.pdf
02-08
Flask Web应用开发实战.pdfFlask Web应用开发实战.pdf
Flask web开发实战之基础篇 Flask-表单
weixin_39451323的博客
03-25 6386
基础篇 第四章 Flask表单前言4. Flask 表单4.2　使用Flask-WTF处理表单4.2.1　定义WTForms表单类4.2.2　输出HTML代码4.2.3　在模板中渲染表单4.3　处理表单数据 前言 这一切开始于2010年4月1日，Armin Ronacher在网上发布了一篇关于“下一代Python微框架”的介绍文章，文章里称这个Denied框架不依赖Python标准库，只需要复制一份deny.py放到你的项目文件夹就可以开始编程。伴随着一本正经的介绍、名人推荐语、示例代码和演示视频，这
Python Flask开发web应用
Fantastic
10-16 1752
轻量化Flask Web框架总结介绍扩展Flask-RestplusFlask-HttPAuthFlask-SQLAlchemyFlask-oauthlib部署Web程序gunicornDocker 介绍 扩展 Flask-Restplus Flask-HttPAuth Flask-SQLAlchemy Flask-oauthlib 部署Web程序 gunicorn Docker
python上手--flask框架web开发实践-数据库
plumlee的专栏
11-20 5146
这篇文章，由易而难，步骤清晰，思路讲得很明白。花两小时跟着作者稻谷先生的这篇文章走一遍，对学习python使用Flask来开发web的应用很有帮助。
Flask 快速入门、教程、异步 Python web 框架
热门推荐
freeking101的博客
08-31 3万+
Flask 文档python web 框架 Sanic 比Flask还好用？Sanic 是一个和类Flask 的基于Python3.5+的web框架，它编写的代码速度特别快。除了像Flask 以外，Sanic 还支持以异步请求的方式处理请求。这意味着你可以使用新的 async/await 语法，编写非阻塞的快速的代码。
flask web开发实战 前端
07-28
- *2* [web前端开发——期末大作业网页制作——web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程大作业 web...](https://blog.csdn.net/qq_38514421/article/details/127563514)[target="_blank" data-report...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值