海南大学交友平台登录页开发实战day4解决python传输并读取登录信息的问题大家好欢迎来到海南大学交友平台开发实战系列的第四天在前三天的开发中我们已经完成了登录页、注册页的UI布局以及Python Flask后端的基础搭建实现了数据库的初始化和核心表结构的创建。今天的核心任务的是打通前端与后端的通信链路解决“前端页面输入登录/注册信息通过JS调用Python接口最终实现数据读写数据库”的核心问题同时记录开发过程中踩过的坑和对应的解决办法帮助大家避开同类问题高效完成开发。本博文采用“前端HTMLJS 后端Python Flask 数据库SQLite”的技术栈全程实战落地欢迎大家在评论区交流探讨开发过程中遇到的问题。一、今日开发核心目标提取前端JS中与接口调用、数据传输相关的核心代码实现前端与后端的联动完成本地测试确保前端输入的登录、注册信息能通过JS调用Flask接口成功写入/读取SQLite数据库解决开发过程中遇到的“接口调用失败”“数据库读写异常”“数据传输不匹配”等问题梳理全流程逻辑帮助大家理解“HTML页面 → JS接口请求 → Python后端处理 → 数据库读写”的完整链路。二、核心代码梳理接口相关今天的核心是“数据传输”因此重点提取前端JS中接口调用相关代码以及后端Python中对应的接口实现代码去掉冗余部分方便大家直接复用和理解。2.1 前端JS接口调用核心代码前端核心功能是通过JS的fetch方法向Flask后端发送POST请求传递登录、注册信息并接收后端返回的结果实现页面的交互反馈。以下是简化后的核心代码保留了数据传输、接口调用的关键逻辑去掉了页面切换、表单验证的冗余代码// API基础地址与Flask后端服务地址保持一致constAPI_BASEhttp://127.0.0.1:5000;// 登录按钮点击事件核心调用登录接口传输登录信息document.querySelector(#login-page .btn-primary).addEventListener(click,async(e){e.preventDefault();// 获取前端输入的学号和密码conststudentIddocument.getElementById(login-student-id).value;constpassworddocument.getElementById(login-password).value;// 简单验证学号和密码不能为空if(!studentId||!password){alert(请输入学号和密码);return;}try{// 向后端发送POST请求传递登录数据constresponseawaitfetch(${API_BASE}/api/login,{method:POST,headers:{Content-Type:application/json// 声明数据格式为JSON},body:JSON.stringify({student_id:studentId,// 与后端接口参数名保持一致password:password})});// 接收后端返回的JSON数据constdataawaitresponse.json();// 根据后端返回结果给出前端反馈if(data.success){// 登录成功跳转到主页window.location.hrefhome.html;}else{// 登录失败提示错误信息后端返回的错误提示alert(data.message||账号或密码错误);}}catch(error){// 捕获请求异常如后端未启动、接口地址错误console.error(登录请求失败:,error);alert(网络错误请检查服务器是否运行);}});// 注册表单提交事件核心调用注册接口传输注册信息document.getElementById(register-form).addEventListener(submit,async(e){e.preventDefault();// 密码一致性验证简化版constpwddocument.getElementById(register-password).value;constconfirmPwddocument.getElementById(register-confirm-password).value;consterrorTipdocument.getElementById(pwd-error);if(pwd!confirmPwd){errorTip.style.displayblock;return;}errorTip.style.displaynone;// 获取前端输入的注册信息conststudentIddocument.getElementById(register-student-id).value;constnamedocument.getElementById(register-name).value;constwechatdocument.getElementById(register-wechat).value;constqqdocument.getElementById(register-qq).value;constphonedocument.getElementById(register-phone).value;try{// 向后端发送POST请求传递注册数据constresponseawaitfetch(${API_BASE}/api/register,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({student_id:studentId,password:pwd,name:name,wechat:wechat,qq:qq,phone:phone})});// 接收后端返回的结果constdataawaitresponse.json();// 前端反馈处理if(data.success){alert(注册成功请登录);document.getElementById(register-form).reset();// 清空表单switchPage(login-page);// 跳转到登录页}else{alert(data.message||注册失败);}}catch(error){console.error(注册请求失败:,error);alert(网络错误请检查服务器是否运行);}});2.2 后端Python接口实现核心代码后端Flask的核心是提供登录、注册接口接收前端JS传递的JSON数据调用数据库操作函数完成数据的读写并返回对应的结果成功/失败提示信息。以下是接口相关的核心代码保留了关键逻辑fromflaskimportFlask,request,jsonifyfromflask_corsimportCORSimportsqlite3importos appFlask(__name__)CORS(app)# 解决跨域问题前端调用后端接口必加# 数据库配置DB_FILEhainanu.db# 数据库连接函数defget_db_connection():connsqlite3.connect(DB_FILE)conn.row_factorysqlite3.Rowreturnconn# 注册接口接收前端注册信息写入数据库app.route(/api/register,methods[POST])defregister():datarequest.get_json()# 接收前端传递的JSON数据# 提取前端传递的参数与JS中body的参数名保持一致student_iddata.get(student_id)passworddata.get(password)namedata.get(name)wechatdata.get(wechat,)qqdata.get(qq,)phonedata.get(phone,)# 验证必填参数学号、密码、姓名不能为空ifnotstudent_idornotpasswordornotname:returnjsonify({success:False,message:学号、密码和姓名不能为空}),400# 检查学号是否已存在避免重复注册existing_userget_user_by_student_id(student_id)ifexisting_user:returnjsonify({success:False,message:学号已存在}),409# 调用数据库操作函数写入注册信息success,messagecreate_user(student_id,password,name,wechat,qq,phone)ifsuccess:returnjsonify({success:True,message:message}),201else:returnjsonify({success:False,message:message}),409# 登录接口接收前端登录信息验证数据库app.route(/api/login,methods[POST])deflogin():datarequest.get_json()student_iddata.get(student_id)passworddata.get(password)# 验证必填参数ifnotstudent_idornotpassword:returnjsonify({success:False,message:学号和密码不能为空}),400# 从数据库中查询该学号对应的用户信息userget_user_by_student_id(student_id)# 验证密码是否正确此处为明文验证后续会优化ifuseranduser[password]password:returnjsonify({success:True,message:登录成功,data:{id:user[id],student_id:user[student_id],name:user[name]}})else:returnjsonify({success:False,message:账号或密码错误}),401# 数据库操作辅助函数简化版defget_user_by_student_id(student_id):connget_db_connection()cursorconn.cursor()cursor.execute(SELECT * FROM users WHERE student_id ?,(student_id,))usercursor.fetchone()conn.close()returnuserdefcreate_user(student_id,password,name,wechatNone,qqNone,phoneNone):try:connget_db_connection()cursorconn.cursor()cursor.execute( INSERT INTO users (student_id, password, name, wechat, qq, phone) VALUES (?, ?, ?, ?, ?, ?) ,(student_id,password,name,wechat,qq,phone))conn.commit()conn.close()returnTrue,注册成功exceptsqlite3.IntegrityError:returnFalse,学号已存在# 启动服务if__name____main__:init_db()# 初始化数据库第一次运行自动创建表print(服务器启动成功访问地址: http://127.0.0.1:5000)app.run(debugTrue,host127.0.0.1,port5000)三、本地测试全流程逻辑关键步骤今天的核心是“打通链路”因此本地测试的每一步都至关重要以下是完整的测试流程按照步骤操作就能确保前端能正常控制Python后端实现数据库的读写操作全程无坑3.1 测试准备必做确保已安装所需依赖打开PyCharm内置终端输入命令pip install flask flask-cors安装Flask框架和跨域插件跨域插件必须装否则前端调用接口会报错确认前端HTML文件、JS文件、后端Python文件app.py放在同一目录下避免路径错误确保后端Python代码中的数据库路径正确本文使用相对路径DB_FILE ‘hainanu.db’第一次运行会自动生成数据库文件。3.2 测试步骤按顺序执行步骤1启动Flask后端服务打开PyCharm找到后端Python文件app.py右键点击“Run ‘app’”启动服务。启动成功后终端会显示以下信息说明后端服务正常运行接口可访问数据库初始化完成服务器启动成功 访问地址: http://127.0.0.1:5000* Serving Flask appapp* Debug mode: on WARNING: This is a development server. Do not use itina production deployment. Use a production WSGI server instead. * Running on http://127.0.0.1:5000 Press CTRLC to quit此处的WARNING是开发服务器提示不是错误本地测试可忽略后续上线再优化步骤2打开前端HTML页面找到前端登录页HTML文件如login.html双击打开或者用浏览器打开该文件确保页面能正常显示登录框、注册框、按钮均可正常点击。步骤3测试注册功能写入数据点击登录页的“去注册”按钮切换到注册页面输入完整的注册信息学号、密码、姓名、微信等学号确保唯一点击“注册”按钮若提示“注册成功请登录”说明前端JS成功调用了后端注册接口并且数据已成功写入SQLite数据库此时可在Python文件所在目录找到hainanu.db文件用SQLite可视化工具如DB Browser for SQLite打开查看users表能看到刚刚注册的用户信息说明数据写入成功。步骤4测试登录功能读取数据注册成功后自动跳转到登录页面输入刚刚注册的学号和密码点击“登录”按钮若提示“登录成功”并跳转到主页home.html说明前端JS成功调用了后端登录接口并且后端成功从数据库中读取了用户信息完成了密码验证若输入错误的学号或密码会提示“账号或密码错误”说明后端的验证逻辑正常。步骤5验证数据库读取结果登录成功后后端会从数据库中读取该用户的id、学号、姓名等信息并返回给前端前端可根据这些信息进行后续的页面展示如个人中心。用SQLite工具查看users表确认读取的数据与前端输入的一致整个链路打通。四、开发踩坑经验与解决办法重点今天开发过程中我踩了3个核心坑花费了不少时间排查整理出来分享给大家避免大家重复踩坑提高开发效率。坑1前端调用接口报错“跨域问题”最常见报错现象前端点击登录/注册按钮控制台报错“Access to fetch at ‘http://127.0.0.1:5000/api/login’ from origin ‘null’ has been blocked by CORS policy”接口调用失败。原因分析前端HTML页面是本地打开协议为file://而后端服务的协议是http://不同协议之间的接口调用会被浏览器的跨域政策拦截导致请求失败。解决办法在Flask后端代码中添加CORS配置允许跨域请求。具体操作就是在创建app实例后添加一行CORS(app)如本文后端代码所示。添加后重启后端服务跨域问题即可解决。坑2后端报错“no such column: student_id”数据库表结构不匹配报错现象前端提交注册信息后后端终端报错“sqlite3.OperationalError: no such column: student_id”接口返回失败。原因分析后端代码中的init_db()函数初始化数据库、创建表只有第一次运行时才会执行。如果后续修改了表结构如添加student_id列或者复制了代码文件夹导致数据库文件hainanu.db是旧的旧表中没有student_id列就会报错。解决办法最省事的方式是“重置数据库”① 停止Flask服务按CtrlC② 找到Python文件所在目录删除hainanu.db文件③ 重新运行app.py代码会自动执行init_db()创建结构正确的users表报错即可解决。坑3前端传递的数据后端无法接收参数名不匹配报错现象前端点击登录/注册后端终端没有报错但返回“学号和密码不能为空”即使已经输入了信息。原因分析前端JS传递的参数名与后端接口接收的参数名不一致。比如前端传递的是“studentId”而后端接收的是“student_id”参数名不匹配后端无法获取到数据就会判定为“未输入”。解决办法确保前端JS中JSON数据的参数名与后端request.get_json()获取的参数名完全一致。本文中前端传递的是“student_id”“password”后端也是用这两个参数名接收避免大小写、下划线的差异。坑4后端服务启动成功但前端提示“网络错误”报错现象后端终端显示启动成功但前端点击按钮后提示“网络错误请检查服务器是否运行”。原因分析① 前端JS中的API_BASE地址错误比如写成了“http://127.0.0.1:5001”与后端服务的端口5000不一致② 后端服务未正常启动或者启动后被意外关闭③ 电脑防火墙拦截了本地服务。解决办法① 核对API_BASE地址确保与后端启动的地址http://127.0.0.1:5000完全一致② 检查后端终端确保服务处于运行状态③ 临时关闭电脑防火墙重新测试。五、今日总结与明日计划今日顺利打通了前端与后端的通信链路完成了登录、注册功能的本地测试实现了“HTML页面 → JS接口请求 → Python后端处理 → SQLite数据库读写”的完整流程同时解决了开发过程中遇到的跨域、数据库表结构不匹配、参数名不匹配等核心问题积累了宝贵的实战经验。通过今天的开发深刻体会到“前后端参数一致性”“数据库表结构同步”的重要性尤其是新手开发细节决定成败一个小小的参数名错误、路径错误都可能导致整个链路无法打通耐心排查才能高效解决问题。明日计划构建主页UI和主要功能栏目如果大家在开发过程中遇到了和我一样的问题或者有更好的解决办法欢迎在评论区留言交流如果觉得本文对你有帮助别忘了点赞、收藏、关注后续会持续更新海南大学交友平台的开发实战内容和大家一起从0到1完成项目开发