zoukankan      html  css  js  c++  java
  • 前端与后台的之间的关系

    1、在使用AJXA的时候

    用get提交的时候[

            xmlhttp.open("get","/index",true);

             xmlhttp.send();

    ]

    用post提交的时候[

    xmlhttp.open("post","/index",true);

    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    xmlhttp.send();

    ]

    2、在后台处理时:get需要用query接收数据        post需要用body接收数据。

    3、中间键:

         在把CSS样式写在外部样式的时候,需要使用:

                app.use(express.static(path.join(__dirname, 'public')));

        所以,要在APP文件之前导入第三方模块path:

                    var path=require("path");

       

        在前端传值到后台的时候,需要使用中间键来实现接收,并返回到后台处理文件

             app.use(express.urlencoded());


         前端js文件:(需要在登陆页面加载AJXA)

       var input=document.getElementById("p1");


              input.onclick=function(){

                    var name=document.getElementById("username").value;
                   var pwd=document.getElementById("pwd").value;

                 var xmlHttp=getmyXmlHttpResquest();

                 xmlHttp.open("post","/dologin",true);      //采用post提交
                 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                 xmlHttp.send("uname="+name+"&pwd="+pwd);     //发送一个数组到后台

                 xmlHttp.onreadystatechange=function(){
                      if(xmlHttp.readyState==4 && xmlHttp.status==200){
                            var str =xmlHttp.responseText ;
                                     if(str=="1"){
                            window.location.href="./html/sucess.html";    // 如果str=="1",则页面进行跳转
                                    }else{
                           document.getElementById("errInfo").innerHTML="用户名或则密码错误";      //如果str!="1",则提示用户输入用户名或者密码错误
                                     }
                               }
                    }

     }

           后台js文件:

              首先要导入数据库的路径

          

    var dateUtil = require("./mysql.js");  

         function dologin(req,res){
                 var name = req.body.uname;  //接收提交过来的用户名
                var pwd = req.body.upwd;      //接收提交过来的密码
                 var con = dateUtil.getCon();    //连接数据库
               con.query("select * from userinfo where username=? and pwd=?",[name,pwd],function(e,row){
                    if(e){
                  console.log(e.stack);
                    return ;
                   }
                if(row.length){
                      res.send("1");   //如果有长度,则返回1
                  }else{
                   res.send("0");    //如果没有长度,则返回0
               }

      })

       }

          exports.dologin =dologin;   //暴露接口或方法

    AJXA文件:

      

    function getMyXmlHttpResquest(){
                 var xmlHttp=null;
               if(document.all){     //判断是不是IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                 }else{
    xmlHttp = new XMLHttpRequest();
                }
    return xmlHttp;
           }

    数据库文件:

    var mysql = require("mysql");

                var config={
                    host:"127.0.0.1", //ip地址
                    user: "wang",     //数据库登录名

                   password:"123456",   //登陆密码

                  database:"test",        //数据库使用文件
                      port:3306         //端口号
    }

    function getConnection(){
                return mysql.createConnection(config);
    }
                  exports.getCon=getConnection;

    (我觉得老师讲的很好,代码都是敲出来的,光看是看不懂,也理解不懂的,只有自己做的时候,才能发现很多问题。我们需要努力解决发现的问题,才能收获知识!)

  • 相关阅读:
    lsyncd实时同步搭建指南——取代rsync+inotify
    Linux内存管理
    [Python爬虫] 之十一:Selenium +phantomjs抓取活动行中会议活动信息
    [Python爬虫] 之十:Selenium +phantomjs抓取活动行中会议活动
    [Python爬虫] 之九:Selenium +phantomjs抓取活动行中会议活动(单线程抓取)
    python 正则表达式
    Scrapy 安装
    python 安装whl文件
    [Python爬虫] 之八:Selenium +phantomjs抓取微博数据
    [Python爬虫] 之七:selenium webdriver定位不到元素的五种原因及解决办法(转载)
  • 原文地址:https://www.cnblogs.com/liner730/p/4603905.html
Copyright © 2011-2022 走看看