fastapi学习记录【九】

fastapi学习记录【九】

代码地址：GitHub - wendingming/fastapi-vue-postgresql: fastapi+vue+postgresql搭建项目

这几天在忙公司的事情，今天忙完了，继续学习fastapi。

上次学习到获取管理员信息，并显示到页面。

今天来学习：修改管理员信息，修改密码，等

每次启动VUE前端的时候，输入法都会带来灵魂的拷问，你配吗？但是没办法，全栈工程师就是要这么骚。

闲话讲完，接着继续学习。

首先更改前端页面，代码如下：

<template><div class="about"><h1>管理员信息</h1><div class="all-container"><div class="all-container-padding bg" ><el-tabs v-model="activeName"><el-tab-pane label="基本信息" name="first"><el-form :model="userInfo" :rules="rules" ref="EditorUserForms"><el-form-item label="头像" prop="avatar" :label-width="formLabelWidth"><el-upload class="avatar-uploader" action="//shujiaoke.oss-cn-hangzhou.aliyuncs" :before-upload="beforeupload" :data="uploadParm" :show-file-list="false" :on-success="handleUpSuccess"><img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon " style="width:80px;height:80px;"></i></el-upload></el-form-item><el-form-item label="用户名" prop="username" :label-width="formLabelWidth"><el-col :span="8"> <el-input v-model="userInfo.username" disabled ></el-input></el-col></el-form-item><el-form-item label="全名" prop="fullname" :label-width="formLabelWidth"><el-col :span="8">  <el-input v-model="userInfo.full_name" placeholder="请输入全名"></el-input></el-col></el-form-item><el-form-item label="邮箱" prop="email" :label-width="formLabelWidth"><el-col :span="8">  <el-input v-model=&#ail" placeholder="请输入邮箱"></el-input></el-col></el-form-item><el-form-item label="用户菜单" prop="permisson" :label-width="formLabelWidth"><el-col :span="8"><el-input v-model="userInfo.permisson" disabled ></el-input></el-col></el-form-item></el-form><div class="grid-content bg-purple"><el-button type="primary" @click="EditorUserClick('userInfo')" >保存</el-button></div></el-tab-pane><el-tab-pane label="修改密码" name="second"><el-form :model="ruleForm" :rules="rules" ref="ruleForm"><el-form-item label="原密码" prop="pass" :label-width="formLabelWidth"><el-col :span="8">  <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input></el-col></el-form-item><el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth"><el-col :span="8"><el-input v-model=&#wpass" placeholder="请输入新密码" id="newkey" type="password"></el-input></el-col></el-form-item><el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth"><el-col :span="8">  <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input></el-col></el-form-item></el-form><div class="grid-content bg-purple"><el-button type="primary" @click="submitForm('ruleForm')">保存</el-button></div></el-tab-pane></el-tabs></div></div></div>
</template><script>//挂载api.js组件//import Api from '@/api/api.js'export default {data() {//定义一个变量var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.checknewpass !== "") {this.$refs.ruleForm.validateField("checknewpass");}callback();}};var validatePass2 = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== wpass) {callback(new Error("两次输入密码不一致!"));} else {callback();}};return {userInfo: [],//用户信息表单//uploadParm: {}, //图片的上传ruleForm: {},//修改密码的表单activeName: "first",loading: true,baseUrl: v.BASE_API,userlist: {},//用户信息表单formLabelWidth: "150px",/***校验***/rules: {/*phone: [{required: true,message: "请输入电话号码"},{pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/,message: "手机格式不对"}],*/email: [{required: true,message: "请输入电子邮箱"},{pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,message: "请输入有效的邮箱"}],pass: [{required: true,trigger: "blur",message: "请输入密码"}],newpass: [{validator: validatePass,trigger: "blur"}],checknewpass: [{validator: validatePass2,trigger: "blur"}]}};},mounted(){this.$store.dispatch("GetInfo", '').then((res) => {//this.$message.success("获取管理员信息成功");let params = JSON.parse(JSON.stringify(res));this.userInfo = params;})/*Info().then((res) => {//访问接口，并把获取的数据赋值给userInfo变量this.userInfo = res;}).catch(err=>{console.log(err)});*/},name: "管理员信息",methods:{//修改密码submitForm(ruleForm) {let username = this.userInfo.username;let oldpwd = ruleForm.pass;let newpwd = wpass;var obj = {username: username,oldpwd: oldpwd,newpwd: newpwd};console.log(obj);},// 编辑提交的方法EditorUserClick() {this.$refs.EditorUserForms.validate(valid => {if (valid) {console.log(this.userlist);}});}}};
</script>

运行npm run serve，管理员信息页面如下图：

 接下来，我不准备跟VUE耗了，直接找个现成开源的框架下载，再套用fastapi接口。

刚刚看了一个开源的admin后台，瑟瑟发抖，我在此声明：下载源码仅用于学习，未用于商业目的，在CSDN发布的学习过程，仅使用vue前端开源代码，用于学习，未用于任何商业目的，特此声明。

新蜂商城VUE前端开源代码地址：

学习一下。

PS：

经过昨天一个小时的学习，这个新蜂商城是java后台，而且前端VUE比较复杂，不适合用来学习fastapi【关键是他不准别人用来教学，正在状告慕课网用了他的开源代码】

所以我另外找了个开源代码，非常适合用来学习

学生选课系统：
gitee地址：Vue3+FastAPI: Vue3+ElementPlus+FastAPI 实现学生选课系统

github地址：

注意：python版本需要在3.8+

因为我用的python是3.7.7的版本，昨天还特意升级到3.9.10

这套系统很新，而且非常适合初学者用来学习，接下来，我将一步一步跟大家讲解学习过程。