Python(Falsk) + React && Golang(Gin) + Vue 全栈开发的最佳实践

于 2024-08-21 00:15:00 发布
阅读量770 收藏 15
点赞数 14
分类专栏： GOLANG Python 文章标签： react.js golang gin python flask vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/masterphp/article/details/140294987
版权

        

        前面分别讲了 Python(Falsk) 、 React 、 Golang(Gin) 、 Vue(Element)，现在整体的给大家汇报一下，这个是简单搭建的demo，后面的添砖加瓦需要自己动手咯，有不明白的可以参考一下小编前面的文章，也许会给大家有答疑解惑的帮助

Python(Falsk):

https://blog.csdn.net/masterphp/article/details/136290855
https://blog.csdn.net/masterphp/article/details/138627802

React:

https://blog.csdn.net/masterphp/article/details/139242705

Golang(Gin):

https://blog.csdn.net/masterphp/article/details/129757434
https://blog.csdn.net/masterphp/article/details/130877001
https://blog.csdn.net/masterphp/article/details/131493155
https://blog.csdn.net/masterphp/article/details/131523360
https://blog.csdn.net/masterphp/article/details/132208407
https://blog.csdn.net/masterphp/article/details/132307220
https://blog.csdn.net/masterphp/article/details/132414796

Vscode的安装:

        首先讲一下Vscode的安装（用于React和Vue），本次完成项目的搭建，借助了一个工具：通意灵码,通意灵码：基于阿里云提供的一个服务，说的明白一点就是一个智能代码辅助工具，实际上用下来，个人觉得和Chatgpt平分秋色，各有各的优点与弊端，所以建议大家两个都去安装一下，适合自己的才是最好的

node14版本以上安装:

1.安装13版本
2.下载14版本zip（覆盖安装目录）
3.设置环境变量：NODE_SKIP_PLATFORM_CHECK ：1
4.命令行使用 node -v 指令和npm -v ，检查当前 node 版本是否更新成功
5.设置全局模块存放路径和缓存文件夹（新建：node_global文件夹 + node_cache文件夹）
6.npm config set prefix "E:\node\node_global"    npm config set cache "E:\node\node_cache"
7.更换淘宝镜像（npm config set registry=https://registry.npm.taobao.org）
8.查看配置是否成功（npm config list）
9.设置环境变量： C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\node_global
10.新建环境变量（NODE_PATH ：你的安装目录\node_global\node_modules）
11.新建环境变量（Path：%NODE_PATH%）

npm命令：

react-router-dom 安装命名（路由包）：

npm install react-router-dom


antdesign安装命令（前端UI）：

npm install antd --save
npm add antd@^4.24.2

使antdesign用babel-plugin-import插件可以实现按需加载：

npm install babel-plugin-import --save-dev


查看typescript版本：

npm view typescript version

CSS样式（5.0版本以下）

import  'antd/dist/antd.min.css'

CSS样式（5.0版本以上）

import 'antd/dist/antd.css'

cnpm安装

安装命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 命令行下输入: cnpm -v 验证是否安装成功。


npm升级命令

npm install -g tar
npm uninstall fstream 


安装react：

1.npm install -g create-react-app（或者 npx create-react-app my-app）
2.create-react-app my-app（其中my-app是你的项目名称）
3.进入创建的项目目录：cd my-app
4.启动开发服务器：npm start


切换镜像：

npm config set registry= https://registry.npmjs.org/
npm config set registry=https://registry.npm.taobao.org

        Python使用的工具的PaCharm,使用这个工具的话需要激活码，所以大家懂的，有工具的，另外来说前期一个月的时间建议大家关闭代码提示，后期可以开启，主要是前期关闭可以加强关联记忆

        Golang使用的工具是Goland,其实使用Vscode也是非常好用的，看个人习惯，当然这个也是需要激活码的，所以嫌麻烦的同学可以直接上Vscode

Golang(Gin) + Vue：项目结构

GIN框架主入口：

package main

import (
	//GIN框架引入
	"github.com/gin-gonic/gin"
	//自定义模块引入
	"project/common"
	user "project/controller"
)

//初始化
func init()  {
	//数据库初始化
	common.Dbinit()
}

func main()  {
	//GIN框架初始化
	r := gin.Default()
	//设置安全访问
	r.SetTrustedProxies([]string{"127.0.0.1"})
	//定义常量
	r.Static("/source", "static")
	//设置模版
	r.LoadHTMLGlob("template/*")

	/*******************登录页开始***********************/
	r.GET("/login", func(c *gin.Context) {
		c.HTML(200,"login.html", gin.H{"title": "登录"})
	})

	r.POST("/logindo", func(context *gin.Context) {
		username := context.PostForm("username")
		password := context.PostForm("password")
		//判断
		if(username == "12" && password == "34"){
			//todo 设置session

			//返回值
			context.JSON(200, gin.H{
				"code": 0,
				"message":"成功",
			})
		}else{
			context.JSON(200, gin.H{
				"code": 1,
				"message":"参数错误",
			})
		}
	})
	/*******************登录页结束***********************/

	/*******************首页开始***********************/
	r.GET("/index", func(context *gin.Context) {
		context.HTML(200,"index.html",gin.H{"title": "首页"})
	})

	r.GET("/indexlist",user.Userlist)
	/*******************首页结束***********************/

	/*******************用户开始***********************/
	r.GET("/user_add", func(context *gin.Context) {
		context.HTML(200,"user_add.html",gin.H{"title":"新增用户"})
	})

	r.POST("/user_add_do",user.User_add_do)

	//用户编辑
	r.GET("/user_edit", func(context *gin.Context) {
		id := context.Query("id")
		context.HTML(200,"user_edit.html",gin.H{"title":"编辑用户","id":id})
	})

	r.POST("/user_info",user.User_info)

	//操作编辑
	r.POST("/user_edit_do",user.User_edit_do)

	r.POST("/user_del", user.User_del)
	/*******************用户结束***********************/

	/*******************文件上传开始***********************/
	r.POST("/imgupload",common.Imgupload)

	/*******************文件上传结束***********************/

	r.Run("localhost:8080")
}

数据库初始化：

package common

import (
	"fmt"
	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

//定义全局变量
var  DB *gorm.DB

// 连接数据库的函数,返回一个 *sql.DB 对象以及一个 error 对象 (方法名记得大写，才可以被外部引用)。
func Dbinit(){
	dsn := "root:root@tcp(127.0.0.1:3306)/test?charset=utf8mb4&parseTime=True&loc=Local"
	DB,_ = gorm.Open(mysql.Open(dsn), &gorm.Config{})
	fmt.Print("connect success")
}

公共方法：

package common

import (
	"github.com/gin-gonic/gin"
)

// 定义一个结构体来映射分页查询的数据
type Pagination struct {
	// 当前页码
	Page int `json:"page"`
	// 每页数量
	PageSize int `json:"pageSize"`
	// 总页数
	TotalPages int `json:"totalPages"`
	// 总记录数
	TotalCount int `json:"totalCount"`
}


// 定义一个结构体来映射返回的数据
type Response struct {
	// 状态码
	Code int `json:"code"`
	// 数据
	Data interface{} `json:"data"`
	// 消息
	Msg string `json:"msg"`
}

type Publicmodel struct {
	ID uint `json:"id" gorm:"primaryKey"`
}

//文件上传
func Imgupload(context *gin.Context)  {
	// 单个文件（判断上传的文件是否为空）
	file, err := context.FormFile("file")
	if err != nil {
		context.JSON(500, gin.H{
			"message": err.Error(),
		})
		return
	}
	//文件上传路径
	dst := "./static/img/upload/" + file.Filename
	// 上传文件到指定的目录
	context.SaveUploadedFile(file, dst)
	//返回数据
	context.JSON(200, gin.H{
		"message": "上传成功",
		"filename": file.Filename,
		"raw": dst,
	})
}

登录页面：

<style>
    @import url("/source/index.css");
    .el-input__inner{width: 80%!important;}
    #app{width: 100%;height: 100%;background: url(/source/img/loginbg.png) #F5F5F5 no-repeat;background-size: 70%;position: absolute}
    #content{ box-shadow: 22px 22px 0px #ebebeb;margin-top: 10%;z-index: 999;width: 475px;padding: 2rem;
        box-sizing: border-box;background-color: #fff;border-radius: 5px;position: relative;left: 60%;height: 30%}
</style>

<script src="/source/vue.js"></script>
<script src="/source/index.js"></script>
<script src="/source/axios.min.js"></script>

<div id="app">
    <div id="content">
        <el-form ref="form" :model="form" label-width="80px" >
            <el-form-item label="账号">
                <el-input type="text" v-model="form.username" autocomplete="off"  placeholder="请输入账号"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input type="password" v-model="form.password" autocomplete="off" maxlength="10" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit(form)">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    var Main = {
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            onSubmit(form) {
                //必须使用这个数组
                // let param = new URLSearchParams()
                let param = new FormData()
                //填充护数据
                param.append('username',this.form.username)
                param.append('password',this.form.password)

                //异步请求数据
                axios.post("/logindo",param)
                    .then((response)=>{
                        if(response.data.code == 0){
                            this.$message("提示："+response.data.message);
                            location.replace("/index", "_self");
                        }else{
                            this.$message("提示："+response.data.message);
                        }
                    })
                    .catch((error)=>{//错误捕获
                        this.$message("请求错误，请重试");
                    });
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

列表页面：

<style>
    @import url("/source/index.css");
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
    .el-aside {
        color: #333;
    }
</style>

<script src="/source/vue.js"></script>
<script src="/source/index.js"></script>
<script src="/source/axios.min.js"></script>

<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <!--右上角菜单开始-->
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                        <el-dropdown-item></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>&nbsp;&nbsp;&nbsp;
                <el-button type="primary" @click="login_out()">退出</el-button>
            </el-header>
            <!--右上角菜单结束-->

            <!--主体开始-->
            <el-main>
                <el-row>
                    <el-input v-model="input" placeholder="请输入内容" style="width: 80%"></el-input>
                    <el-button type="primary">搜索</el-button>
                    <el-button type="primary" @click="user_add()">新增</el-button>
                </el-row>

                <el-table :data="tableData">
                    <el-table-column prop="id" label="ID" width="140">
                    </el-table-column>
                    <el-table-column prop="username" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别">
                    </el-table-column>
                    <el-table-column prop="age" label="年龄">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[1, 2, 3, 4,5,6,7,8,9,10]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-main>
            <!--主体结束-->
        </el-container>
    </el-container>
</div>

<script>
    var Main = {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 2,
                total: 0,
                input: '',
            };
        },
        methods: {
            //定义刷新方法
            fetchData(page, size) {
                // 这里的API请求应该替换为实际的API地址和参数
                axios.get('/indexlist', {
                    params: {
                        page: page,
                        size: size
                    }
                }).then(response => {
                    this.tableData = response.data.data.users;
                    this.total = response.data.data.pagination.totalCount;
                }).catch(error => {
                    console.error('Error fetching data: ', error);
                });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.fetchData(this.currentPage, this.pageSize);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.fetchData(this.currentPage, this.pageSize);
            },
            handleEdit(index, row) {//编辑
                var id = row.id
                var url = "/user_edit?id="+id;
                location.replace(url, "_self");
            },
            handleDelete(index, row) {//删除
                //异步请求
                axios({
                    method: "post",
                    url: "/user_del",
                    data: {id:row.id},
                    headers: { "Content-Type": "multipart/form-data" },
                }).then((response) => {
                    if(response.data.code ==200){
                        this.$message("提示："+response.data.msg);
                        //跳转
                        this.fetchData(this.currentPage, this.pageSize);
                    }else{
                        this.$message("提示："+response.data.msg);
                    }
                });
            },
            //退出
            login_out(){
                this.$message("退出提示");
            },
            //用户新增
            user_add(){
                var url = "/user_add";
                location.replace(url, "_self");

            }
        },
        mounted(){//初始化加载
            this.fetchData(this.currentPage, this.pageSize);
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

添加数据：

<style>
    @import url("/source/index.css");
    #content{width: 100%;height: 100%}
</style>

<script src="/source/vue.js"></script>
<script src="/source/index.js"></script>
<script src="/source/axios.min.js"></script>

<div id="app">
    <div id="content">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="真实名称">
                <el-input v-model="form.username"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年龄">
                <el-input type="number" v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    var Main = {
        data() {
            return {
                form: {
                    username: '',
                    sex: '',
                    age: '',
                }
            }
        },
        methods: {
            onSubmit(form) {
                //必须使用这个数组
                // let param = new URLSearchParams()
                let param = new FormData()
                //填充护数据
                param.append('username',this.form.username)
                param.append('sex',this.form.sex)
                param.append('age',this.form.age)

                //异步请求数据
                axios.post("/user_add_do",param)
                    .then((response)=>{
                        if(response.data.code ==200){
                            this.$message("提示："+response.data.msg);
                            //跳转
                            setTimeout(function () {
                                var url = "/index";
                                location.replace(url, "_self");
                            },1000);
                        }else{
                            this.$message("提示："+response.data.msg);
                        }
                    })
                    .catch((error)=>{//错误捕获
                        this.$message("请求错误，请重试");
                    });
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

编辑数据：

<style>
    @import url("/source/index.css");
    #content{width: 100%;height: 100%}
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<script src="/source/vue.js"></script>
<script src="/source/index.js"></script>
<script src="/source/axios.min.js"></script>

<div id="app">
    <div id="content">
        <el-form ref="form" :model="form" label-width="80px">

            <el-form-item label="用户ID">
                <el-input type="number" v-model="form.id" autocomplete="off" disabled></el-input>
            </el-form-item>

            <el-form-item label="真实名称">
                <el-input v-model="form.username"  autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="性别">
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年龄">
                <el-input type="number" v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>

            <!--图片上传开始-->
            <el-form-item label="头像" v-model="form.url">
                <el-upload
                        class="avatar-uploader"
                        action="/imgupload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <!--图片上传结束-->

            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    var Main = {
        data() {
            return {
                form: {
                    id: '{{.id}}',
                    username: '',
                    sex: '',
                    age: '',
                },
                imageUrl: ''
            }
        },
        methods: {
            fetchData() {
                // 这里的API请求应该替换为实际的API地址和参数
                axios({
                    method: "post",
                    url: "/user_info",
                    data: {id:'{{.id}}'},
                    headers: { "Content-Type": "multipart/form-data" },
                }).then((response) => {
                    if(response.data.code ==200){
                        //数据填充
                        this.form.username = response.data.data.users[0].username;
                        this.form.sex = response.data.data.users[0].sex;
                        this.form.age = response.data.data.users[0].age;
                        this.imageUrl = response.data.data.users[0].url;
                    }else{
                        this.$message("提示："+response.data.msg);
                    }
                });
            },
            onSubmit(form) {
                //填充数据
                let param = new FormData()
                //填充护数据
                param.append('id',this.form.id)
                param.append('username',this.form.username)
                param.append('sex',this.form.sex)
                param.append('age',this.form.age)
                param.append('url',this.imageUrl)

                //异步请求数据
                axios.post("/user_edit_do",param)
                .then((response)=>{
                    if(response.data.code ==200){
                        this.$message("提示："+response.data.msg);
                        //跳转
                        setTimeout(function () {
                            var url = "/index";
                            location.replace(url, "_self");
                        },1000);
                    }else{
                        this.$message("提示："+response.data.msg);
                    }
                })
                .catch((error)=>{//错误捕获
                    this.$message("请求错误，请重试");
                });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response.raw.replace("./static","http://127.0.0.1:8080/source")
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
        mounted(){//初始化加载
            this.fetchData();
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

Python(Falsk) + React 项目结构

Python(Flask)框架主入口：

from flask import Flask,Blueprint,json
from flask_cors import CORS
from xst.controller.user_controller import *
from xst.mapper.fileupload import *
import requests
from bs4 import BeautifulSoup

app = Flask(__name__)
#设置跨域
CORS(app)

# 蓝图
admin = Blueprint('admin', __name__)

# 登录操作
@admin.route('/logindo',methods=['POST'])
def logindo():
    # 获取数据(方式一)
    username = request.form['username']
    # 获取数据（方式二）
    # data = request.form.to_dict()
    # username = request.form['username']
    # 数据操作
    logindata = Userlogin(username)
    return json.dumps(logindata)

# 用户列表
@admin.route('/userlist',methods=['POST','GET'])
def userlist():
    list = Userlist()
    return json.dumps(list)

# 用户个数
@admin.route('/usernum',methods=['POST','GET'])
def usernum():
    num = Usercount()
    return json.dumps(num)

# 用户新增
@admin.route("/useradd",methods=["POST"])
def useradd():
    # 接收数据
    username = request.form['username']
    sex = request.form['sex']
    age = request.form['age']
    url = request.form['url']
    # 请求方法
    result = Useradd(username,sex,age,url)
    return json.dumps(result)

# 用户修改
@admin.route("/useredit",methods=["POST"])
def useredit():
    # 请求方法
    return json.dumps(Useredit())


# 文件上传
@admin.route("/fileupload",methods=["POST"])
def fileupload():
    return json.dumps(Fileupload())



# 蓝图注册
app.register_blueprint(admin,url_prefix='/admin')

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

公共方法：

from flask import Flask
import mysql.connector

# 数据库连接（设置参数）
mydb = mysql.connector.connect(
    host="localhost",
    user="root",
    passwd="root",
    database="test"
)
from flask import request
from werkzeug.utils import secure_filename
import os

# 指定文件上传路径
UPLOAD_PATH = "/upload"
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}


# 数据过滤器
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

# 文件上传方法
def Fileupload():

    # 判断文件是否存在
    if 'file' not in request.files:
        data = {
            "code": "300",
            "msg": "修改成功",
            "data": ""
        }
        return data

    # 获取文件
    file = request.files['file']
    if file.filename == '':
        data = {
            "code": "300",
            "msg": "未选择文件",
            "data": ""
        }
    return data

    # 这里可以加入文件类型的判断
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(UPLOAD_PATH, filename))
        data = {
            "code": "200",
            "msg": "上传成功",
            "data": filename
        }
    return data

数据处理：

from xst.mapper.exts import mydb
from flask import request

# 用户登录
def Userlogin(usernum):
    mycursor = mydb.cursor()
    # 获取数据量
    mycursor.execute("SELECT count(users.id) as num FROM users where username = '" + usernum + "'")
    num = mycursor.fetchone()[0]
    # 获取数据
    mycursor.execute("SELECT * FROM users where username = '" + usernum + "'")
    userinfo = mycursor.fetchall()
    # 判断
    if num >0:
        data = {
            "code": "200",
            "msg": "成功",
            "data": userinfo
        }
    else:
        data = {
            "code": "300",
            "msg": "失败",
            "data": ""
        }
    # 返回
    return data

# 数据查询（获取数据量）
def Usercount():
    mycursor = mydb.cursor()
    mycursor.execute("SELECT count(users.id) as num FROM users")
    num = mycursor.fetchone()[0]
    # 数据组合
    data = {
        "code": "200",
        "msg": "成功",
        "data": num
    }
    # 返回
    return data

# 数据查询(全部数据)
def Userlist():
    mycursor = mydb.cursor()
    mycursor.execute("SELECT * FROM users")
    userlist = mycursor.fetchall()
    # 数据组合
    data = {
        "code": "200",
        "msg": "成功",
        "data": userlist
    }
    # 返回
    return data

# 数据查询（新增用户）
def Useradd(username,sex,age,url):
    mycursor = mydb.cursor()
    mycursor.execute("INSERT INTO users (username, sex, age, url) VALUES ('"+username+"', '"+sex+"', "+age+", '"+url+"');")
    mydb.commit()
    new_id = mycursor.lastrowid
    # 判断
    if new_id >0:
        data = {
            "code": "200",
            "msg": "新增成功",
            "data": new_id
        }
    else:
        data = {
            "code": "300",
            "msg": "新增失败",
            "data": ""
        }
    # 返回
    return data

# 数据查询（修改用户）
def Useredit():
    # //接收数据
    id = request.form['id']
    username = request.form['username']
    sex = request.form['sex']
    age = request.form['age']
    url = request.form['url']

    # 数据操作
    mycursor = mydb.cursor()
    mycursor.execute("UPDATE users SET username = '"+username+"', sex = '"+sex+"', age = "+age+", url = '"+url+"' WHERE id = "+id)
    mydb.commit()

    # 判断
    if mycursor.rowcount > 0:
        data = {
            "code": "200",
            "msg": "修改成功",
            "data": ""
        }
    else:
        data = {
            "code": "300",
            "msg": "修改失败",
            "data": ""
        }
    # 返回
    return data

React主入口文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Route from './pages/route';
import reportWebVitals from './reportWebVitals';
// 新增路由组件
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Route />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

主文件：

import React from "react";
import { useRoutes } from "react-router-dom"
import Userlist from "./userlist";
import Useradd from "./useradd";
import Useredit from "./useredit";
import Layout from "./layout";


function Route(){
    const routes = useRoutes([
        { path: "/userlist", element: <Userlist /> },
        { path: "/useradd", element: <Useradd /> },
        { path: "/useredit", element: <Useredit /> },
        { path: "/*", element: <Layout /> },
      ]);

      return (
        <div className="container">
          <div className="layout">
            <div style={{ width: '100%' }}>
              {routes}
            </div>
          </div>
        </div>
      );
}

export default Route;

数据列表：

import React from 'react';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import {List, Space } from 'antd';

function Userlist(){
    // 设置数据
    const data = Array.from({ length: 23 }).map((_, i) => ({
        // 跳转地址
        href: 'https://ant.design',
        title: `序号： ${i}`,
        description:
          '描述',
        content:
          '内容',
      }));
  
    
      //列表渲染
      return (
        <List
            itemLayout="vertical"
            size="large"
            pagination={{
                onChange: page => {
                console.log(page);
                },
                pageSize: 3,
            }}
            dataSource={data}
            renderItem={item => (
                <List.Item
                key={item.title}
                extra={
                    <img
                    width={272}
                    alt="logo"
                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                    />
                }
                >
                <List.Item.Meta
                    title={<a href={item.href}>{item.title}</a>}
                    description={item.description}
                />
                {item.content}
                </List.Item>
            )}
        />
      );
}

export default Userlist;

新增数据：

import React from 'react';
// antdesign引入
import { Button, Form, Input,InputNumber  } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { message, Upload,Select } from 'antd';
import "./layout.css"

// 方法定义
function Useradd(){
  //常量定义
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  //上传组件初始化
  const { Dragger } = Upload;
  const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  //定义下拉组件
  const { Option } = Select;

  // 方法定义
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      {/* 用户名 */}
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your 用户名!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      {/* 性别 */}
      <Form.Item
        label="性别"
        name="sex"
        rules={[
          {
            required: true,
            message: 'Please input your 性别!',
          },
        ]}
      >
        <Select
          placeholder="选择性别"
          allowClear
        >
            <Option value="男">男</Option>
            <Option value="女">女</Option>
        </Select>
 
      </Form.Item>

        {/* 年龄 */}
      <Form.Item name={['user', 'age']} label="年龄" rules={[{ type: 'number', min: 0, max: 99 }]}>
        <InputNumber />
      </Form.Item>


      {/* 头像 */}
      <Form.Item label="头像"name="url">
        <Dragger {...props} maxCount={1}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击上传</p>
          <p className="ant-upload-hint">支持单次或批量上传</p>
        </Dragger>
      </Form.Item>


      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

export default Useradd;

编辑数据：

import React from 'react';
// antdesign引入
import { Button, Form, Input,InputNumber  } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { message, Upload,Select } from 'antd';
import "./layout.css"
 
// 方法定义
function Useradd(){
  //常量定义
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  //上传组件初始化
  const { Dragger } = Upload;
  const props = {
    name: 'file',
    multiple: true,
    action: 'http://127.0.0.1:500/fileupload',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  //定义下拉组件
  const { Option } = Select;

  // 方法定义
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      {/* 用户名 */}
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your 用户名!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      {/* 性别 */}
      <Form.Item
        label="性别"
        name="sex"
        rules={[
          {
            required: true,
            message: 'Please input your 性别!',
          },
        ]}
      >
        <Select
          placeholder="选择性别"
          allowClear
        >
            <Option value="男">男</Option>
            <Option value="女">女</Option>
        </Select>
 
      </Form.Item>

        {/* 年龄 */}
      <Form.Item name={['user', 'age']} label="年龄" rules={[{ type: 'number', min: 0, max: 99 }]}>
        <InputNumber />
      </Form.Item>


      {/* 头像 */}
      <Form.Item label="头像"name="url">
        <Dragger {...props} maxCount={1}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击上传</p>
          <p className="ant-upload-hint">支持单次或批量上传</p>
        </Dragger>
      </Form.Item>


      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">修改</Button>
      </Form.Item>
    </Form>
  );
}

export default Useradd;

公共样式：

 .formbody{width: 40%;height: 25%;background: white;position: absolute;top: 30%;left: 50%;padding: 1.5rem !important;}
 .ant-col-8{flex: 0 0 20% !important}
 #root{padding: 1rem;}

至此讲解完成，主要讲解了登录、数据列表、数据新增、数据编辑，至于会话控制前面小编写的文章里面有，所以大家可以参考一下，还是那句话，脑袋会了手不一定会了，所以多练练习。

masterphp
关注
  • 14
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FALSK+vue高校学生宿舍管理系统python-django
QQ58850198的博客
09-26 537
学生宿舍管理系统，主要的模块包括查看首页、个人中心、学生管理、学院信息管理、专业信息管理、宿舍信息管理、学生入住管理、宿管员管理、设备报修管理等功能。该系统分为系统管理员和普通用户两种权限，系统采用大气美观的风格，让人眼前一亮，整合的宿舍系统成为了一站通式的管理系统，提高用户的使用效率和办事效率。对学生宿舍管理系统的数据库、功能进行了详细设计。采用Django技术，从数据库中获取数据、向数据库中写入数据，实现系统直接对数据库进行各种操作，在网页中加入动态内容，从而实现学生宿舍管理系统所需要的各种基本功能。
falsk+vue项目实践之后台搭建
笔芯君
06-15 926
falsk+vue项目实践（二） python环境3.7.3 一、安装falsk包 pip install Flask Flask-Cors pip install flask_sqlalchemy 其中 Flask-Cors是因为跨域而使用到的 什么是跨域？ 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 备注： 　1、端口和协议的不同，只能通过后台来解决 ...
python+flask+vue自动化测试平台
linmumum的博客
11-05 2771
技术栈： 后端：python+flask+Jenkins 前端：vue+nodejs+h5 主要功能 新建用户 新建项目 新建全局参数 导入swagger 增删改测试用例 新建测试集 执行测试用例或测试集并生成报告 自动化平台的缺点此处不做探讨，本文为记录进阶之路，相对来说，我发现了该框架更多的优点： 1.简单易上手>>>> 这是目前大团队最需要的东西了,以我的经验来说，pytest，robotframework，都需要培训，而且是反复的培训，都不难，但关
flask+vue全栈部署方式
热门推荐
菜鸟的博客
01-04 1万+
新公司项目技术栈用的falsk+vue，在这里记录一下部署方式，以备以后回顾。 我这边的是用systemctl+nginx+gunicorn+virtualenv的架构进行部署的。大概介绍一下，systemctl是一个后台进程管理的工具，nginx是进行反向代理的工具，gunicorn是一个 Python 的高性能 WSGI HTTP 服务器。 ps：上面的介绍也只是简介，详细资料可自查。这种时候，我总会想起来我初中历史老师说了“中国开始沦为半殖民地半封建社会”后，却从不解释什么是“殖民地”而我又不懂却只是
python+flask开发mock服务
summer_my_sunshine的博客
02-14 1330
python+flask开发mock服务，模拟简单的接口
Python+Django+vue的旅游信息网站系统项目源码介绍
QQ3166678367的博客
08-06 998
为促进我国乡村旅游景点的开发及发展的标准化、信息化，乡村旅游网站作为服务平台，为旅客提供标准化的信息服务支持，能够经过平台了解到景点的各种详细信息，保证信息的及时、准确、全面，最终赢得客户的认同。尤其是在当前全球内卷严重的情况下，旅游更是能够放松精神从而刚好的投入到工作和学习中，我了能够方便的更多的人查看旅游相关的信息，我们通过Python和Django开发了本次的旅游管理系统。数据库：mysql 5.7（一定要5.7版本）3.2.1技术可行性：技术背景 5。1.2 国内外研究概况 1。...
falsk+flask_socketio+socket.io Client设置温度仪表盘实时数据更新
大师兄
11-28 1459
原文链接：https://dsx2016.com/?p=1493 公众号：大师兄2016 前言 上期文章描述使用vue+echarts设置温度仪表盘并自定义区段颜色 本期文章接着用python flask设置socket服务和前端通信实时获取温度数据 主要内容为 后端设置flask服务并启用socket 前端使用socket.io(websocket)实时获取温度数据 arduino和python usb端口通信的关闭和独占访问模式（仅POSIX） 设置flask.
react + flask web应用开发-前后端结合
qq_41303761的博客
01-06 823
react + flask web应用开发-前后端结合
CentOs 安装python+falsk+uwsgi+nigix环境
albee2的博客
08-19 231
一， 安装centOS oracle 的virtualbox 虚拟机安装centOS镜像安装。详细步骤此处略。 二，安装下载工具： yum install wget 三，安装gcc，否则安装python时会没有c complier。 yum install gcc 四，安装python wget --no-check-certificate https://www.python.org...
高分毕业设计 基于Python+Falsk+Vue+Echarts的新冠肺炎疫情数据可视化系统源码+部署文档+全部数据资料
04-23
高分毕业设计 基于Python+Falsk+Vue+Echarts的新冠肺炎疫情数据可视化系统（地图、雷达图、饼图、折线图、柱状图、数据表）源码+部署文档+全部数据资料 【备注】 1、该项目是高分毕业设计项目源码，已获导师指导认可...
农产品价格可视化Python（falsk）+pyecharts
05-23
在本项目中，"农产品价格可视化Python（falsk）+pyecharts"是一个结合了Flask框架和PyEcharts库的大数据可视化实践。这个实训项目专注于利用Python技术来处理和展示浙江省农产品的价格数据，旨在帮助用户理解并分析...
使用 Python+Flask+MySQL+Redis 开发简单接口实例
05-28
本接口项目的技术选型：Python+Flask+MySQL+Redis，通过 Python+Falsk 来开发接口，使用 MySQL 来存储用户信息，使用 Redis 用于存储token，目前为纯后端接口，暂无前端界面，可通过 Postman、Jmeter、Fiddler 等...
python + flask + LayUI + mysql 网站模板.zip
05-14
python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 python + flask + LayUI + mysql 网站模板 ...
React 学习——React.memo（简单、引用类型的prop）
qq_40269801的博客
08-20 162
React React.memo（简单、引用类型的prop） 1、传递一个简单类型的prop，prop变化时组件重新渲染 2、传递一个引用类型的prop，比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时，实际上形成的是新的数组引用； 3、保持引用稳定->useMemo 组件渲染的过程中缓存一个值
React渲染机制和源码初探（二）
feixin369的博客
08-19 907
React Fiber 是 React 核心算法的重新实现。它的主要特点是渐进式渲染: 能够将渲染工作分割成块，并将其分散到多个帧。其他关键特性包括在新的更新到来时暂停、中止或重用工作的能力;为不同类型的更新分配优先级的能力;以及新的并发方式。——广义的 Fiber，是一种新架构。为了实现这套架构，React 也在 Virtual DOM 上重建了树和节点结构，叫做 fiber 树和 fiber 节点。
React 封装自定义 hooks方法
m0_53574149的博客
08-19 247
React 封装自定义 hooks方法 在 React 中，自定义 Hooks 是一种非常强大的工具，它允许你将组件逻辑提取到可重用的函数中。这使得代码更加模块化、清晰，并且能够在多个组件之间共享状态或副作用。
webflux源码解析(3)-reactor netty
最新发布
YZDHY的博客
08-20 429
完成了从connection中接收请求动作，之后请求会传递到了，进入webflux处理请求的主流程。这个链路上的方法调用了subscribe 方法，触发了响应式调用链的执行
React 学习——useMemo
qq_40269801的博客
08-19 287
React useMemo
python falsk安装
03-06
Flask是一个轻量级的Python Web框架，用于快速构建Web应用程序。要安装Flask，可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Python解释器。你可以在命令行中输入`python --version`来检查Python的版本。如果没有安装Python，请先下载并安装Python。 2. 打开命令行终端，并使用以下命令安装Flask： ``` pip install flask ``` 这将使用pip包管理器自动下载并安装Flask及其依赖项。 3. 安装完成后，你可以编写一个简单的Flask应用程序来验证安装是否成功。创建一个新的Python文件（例如`app.py`），并将以下代码复制到文件中： ```python from flask import Flask app = Flask(__name__) @app.route('/') def hello(): return 'Hello, Flask!' if __name__ == '__main__': app.run() ``` 4. 保存文件后，在命令行中切换到文件所在的目录，并运行以下命令启动Flask应用程序： ``` python app.py ``` 5. 如果一切顺利，你将看到类似以下的输出： ``` * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) ``` 这表示Flask应用程序已经成功运行在本地服务器上。你可以在浏览器中访问`http://127.0.0.1:5000/`，应该能够看到显示"Hello, Flask!"的页面。 希望这个简单的介绍能够帮助你安装Flask。如果你有任何进一步的问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值