vue入门:php+mysql+axios+vue写登录页面技术总结(待更新)

大概想要实现:从vue前端获取用户名密码信息,post给后台,经后台验证返回json信息,可以验证用户是否存在,可以完成登录操作(进阶设想实现:登录自动生成验证码、加密传输用户名密码(md5)、写cookie、session、了解vue声明周期(在页面载入时自动登录各种场景运用))

要点总结

  1. 写PHP接口文件,接收前台post过来的json文件,验证用户信息是否存在数据库(进阶:防止恶意SQL注入),返回给后台验证结果
  2. 写前端页面,先前端验证登录信息合法,post给后台PHP接口
  3. 前端接受到后台的json会作出相应的登录响应

一直在想登录过程的逻辑关系,先想到一个不太成熟的逻辑方案,接下来还要边查资料边完善了QAQ

这里写图片描述

关键代码

  • 在post数据前,函数会做相关验证(字段合法性验证待补),接着前端post给后台的数据,直接把用户名密码写在post参数里面,axios会把这些参数自动封装成json文件(所以后台PHP接收是json文件,而不是数组)
 login(){
        //前端验证数据
        if(!this.name || !this.password){   //若任意一个参数为空,则返回并提示错误
          this.errortip=true;
          this.errorTip='账号或密码有误';
          return;
         }
       //直接把参数写在post头部,还有好几种写法,区别不大
        axios.post('/api/test01/user.php',{
          Name:this.name,
          userPwd:this.password            
                }).then(response => {         //用户名和密码将转为json传到后台接口              
          let res = response.data;   //用res承接返回后台的json文件(像使用数组那样)
       if(res.status=='1'){   //显示登录结果             
           console.log('登录成功');
           this.errortip=true;
           this.errorTip='登录成功';
         }else {
           console.log('登录失败');
           this.errortip=true;
           this.errorTip='登录失败';

         }
        })
      },

这里写图片描述

  • 后台PHP接口主要是判断前端传来的信息是否正确,写cookie、session,返回json信息
<?php 
 header("Content-type: text/html; charset=utf-8");
 header('Access-Control-Allow-Origin:http:*');
 //写监听端口文件,还在调试中,目标限制特定端口访问,提高安全性


 $ro =file_get_contents('php://input');        //获取json文件
 $user=json_decode($ro,true);     //将json转为PHP数组,供操作
 $name=$user['Name'];
 $userPwd=$user['userPwd'];
 //注意!这里神坑,原本打算在SQL查询语句中直接用$user['Name']作为变量,结果语句中的符号识别特别严格,应用数组里面的还需要转义符,直接用会有错误,调试了很多次失败后还是老老实实赋值给变量传过去好了

 // 操作数据库
    $conn = mysql_connect('localhost','root','123456');   //连接数据库,根据自己的数据库填写
    $select = mysql_select_db('bianquan'); //选择数据库表
 $sql="select * from user where (u_name='$name') and (u_pwd='$userPwd')";
    //操作数据库,查询用户表是否存在该用户
     $result = mysql_query($sql,$conn) ; //执行数据库
     $re = mysql_num_rows($result);  //返回结果集的函数,若存在则返回1(一行结果集)
     mysql_free_result($result);   //释放查询结果内存(养成良好习惯)
     //官网对这个用法解释:mysql_free_result() 仅需要在考虑到返回很大的结果集时会占用多少内存时调用。在脚本结束后所有关联的内存都会被自动释放。

    //判断结果集,返回相应的查询结果给前端
    if($re!=0){
        $row['status']="1";
        $row['err']="0";
    }else{
        $row['status']="0";
        $row['err']="fail";
    }
echo(json_encode($row));
mysql_close($conn);//关闭数据库
 ?>

这里写图片描述

小结:进度有点慢,很多逻辑关系搞不清楚,代码都是一个个手打的,优化型有待提高

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
很高兴回答您的问题!Java项目员工管理系统是一个非常常见的实践项目。它通常涉及到前后端分离的架构,使用JavaEE作为后端框架,Vue作为前端框架,SSM作为整个项目的技术栈,MySQL作为数据库,同时使用Maven进行项目构建和依赖管理,Axios用于前后端数据交互,HTML用于构建前端页面。 以下是一个简单的步骤指南,以帮助您开始这个项目: 1. 确定项目需求:明确系统所需的功能和特性,例如员工信息的增删改查、权限管理等。 2. 创建数据库:使用MySQL或其他数据库管理系统创建一个数据库,定义员工表和其他相关表。 3. 后端开发: - 使用JavaEE作为后端框架,搭建项目结构。 - 使用SSM框架(Spring、SpringMVC、MyBatis)进行后端开发。配置数据源、连接数据库,并编DAO层接口和Mapper文件。 - 实现业务逻辑层和控制层,编接口和请求处理方法。 4. 前端开发: - 使用Vue作为前端框架,搭建项目结构。 - 使用Axios进行前后端数据交互,发送HTTP请求。 - 使用HTML和CSS构建前端页面,实现员工信息的展示、增删改查等功能。 5. 前后端联调: - 后端提供接口,在前端使用Axios发送请求,获取后端数据。 - 前端通过Ajax获取数据,并进行展示和交互。 6. 项目打包部署: - 使用Maven进行项目构建和依赖管理。配置pom.xml文件,添加所需的依赖。 - 部署后端项目到服务器,配置数据库连接等相关配置。 - 将前端代码打包为静态文件,并部署到Web服务器中。 这只是一个简单的指南,实际开发过程中还需要考虑更多的细节和问题。希望以上信息对您有所帮助!如有任何进一步的问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值