1.结合上一篇 安装完Nodejs之后 通过手动创建一个完整的NodeJs项目

2.https://www.jianshu.com/p/7b0a5d4491ba 创建一个完整的项目之后

3.下面是一个完整的项目结构

​

3.在routes下面新建一个目录为mysql--mysql.js

var mysql = require('mysql');

var dbMsg = {

    host     : 'localhost',

    user     : 'root',

    password : 'root',

    database : '数据库名称'

}

var connection = mysql.createConnection(dbMsg);

    connection.connect();

module.exports = connection;
 

4. 配置路由

ar loginRouter = require('./routes/login');

app.use('/login', loginRouter);
 

5.在routes文件夹下面创建一个login.js

var express = require('express');

var URL = require('url');

var router = express.Router();

var connection = require('./mysql/mysql');

router.post('/user',function(req, res, next){

  var params = {

    username : req.query.username,

    password : req.query.password

  }

  var userStr = 'select * from user_info_t where login_name=? and password=?';

  var str = [params.username,params.password];

  console.log(userStr)

  connection.query(userStr,str,function(err,result){

        if(err){

            throw err;

        }else{

            res.send(result)

        }

    })

});

router.get('/', function(req, res, next) {

  var user = {

    name:'',

    age:'',

    city:''

  };

  var params = URL.parse(req.url, true).query;

  if(params.id == '1') {

    user.name = "Mr.light";

    user.age = "1";

    user.city = "深圳市";

  } else {

    user.name = "Ms.lee";

    user.age = "2";

    user.city = "广东市";

  }

  var response = {status:1,data:user};

  res.send(JSON.stringify(response))

});

module.exports = router;
启动bin下面的www文件 node www

6.浏览器输入http://127.0.0.1:3000/login

注意：记得安装 npm install mysql 模块

至此一个接口就这样完成了

实现登陆拦截 以及注册等基础功能 上代码

前端两个页面 login.ejs  register.ejs index.ejs

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>登录界面</title>

    <link rel="stylesheet" href="css/reset.css" />

    <link rel="stylesheet" href="css/common.css" />

    <link rel="stylesheet" href="css/font-awesome.min.css" />

  </head>

  <body>

    <div class="wrap login_wrap">

      <div class="content">

        <div class="logo"></div>

        <div class="login_box">  

          <div class="login_form">

            <div class="login_title">

              登录

            </div>

              <div class="form_text_ipt">

                <input name="username" id="username" type="text" placeholder="手机号/邮箱">

              </div>

              <div class="ececk_warning"><span>手机号/邮箱不能为空</span></div>

              <div class="form_text_ipt">

                <input name="password" id="password" type="password" placeholder="密码">

              </div>

              <div class="ececk_warning"><span>密码不能为空</span></div>

              <div class="form_check_ipt">

                <div class="left check_left">

                  <label><input name="" type="checkbox"> 下次自动登录</label>

                </div>

                <div class="right check_right">

                  <a href="#">忘记密码</a>

                </div>

              </div>

              <div class="form_btn">

                <button type="button" οnclick="login();">登录</button>

              </div>

              <div class="form_reg_btn">

                <span>还没有帐号？</span><a href="register">马上注册</a>

              </div>

            <div class="other_login">

              <div class="left other_left">

                <span>其它登录方式</span>

              </div>

              <div class="right other_right">

                <a href="#"><i class="fa fa-qq fa-2x"></i></a>

                <a href="#"><i class="fa fa-weixin fa-2x"></i></a>

                <a href="#"><i class="fa fa-weibo fa-2x"></i></a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

    <script type="text/javascript" src="js/common.js" ></script>

    <div style="text-align:center;">

</div>

<script>

  function check(username,password){

    if(username==''){

      alert('用户名不能为空')

      return false;

    }

    if(password==''){

      alert('密码不能为空')

      return false;

    }

    return true;

  }

  function login () {

    var username = $('#username').val();

    var password = $('#password').val();

    var params = ({

      username: username,

      password : password

    })

    if(check(username,password)){

      $.ajax({

        type:"post",

        url:"/login/login",

        async:true,

        data:params,

        success:function(data){

          if(data.code=='1'){

            alert('用户名或密码错误')

          }else{

            location.href='/index';

          }

        }

      });

    }

  }

</script>

  </body>

</html>
 

register

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>注册界面</title>

    <link rel="stylesheet" href="css/reset.css" />

    <link rel="stylesheet" href="css/common.css" />

    <link rel="stylesheet" href="css/font-awesome.min.css" />

  </head>

  <body>

    <div class="wrap login_wrap">

      <div class="content">

        <div class="logo"></div>

        <div class="login_box">  

          <div class="login_form">

            <div class="login_title">

              注册

            </div>

              <div class="form_text_ipt">

                <input name="username" id="username" type="text" placeholder="手机号/邮箱">

              </div>

              <div class="ececk_warning"><span>手机号/邮箱不能为空</span></div>

              <div class="form_text_ipt">

                <input name="password" id="password" type="password" placeholder="密码">

              </div>

              <div class="ececk_warning"><span>密码不能为空</span></div>

              <div class="form_text_ipt">

                <input name="repassword" id="repassword" type="password" placeholder="重复密码">

              </div>

              <div class="ececk_warning"><span>密码不能为空</span></div>

              <!--<div class="form_text_ipt">

                <input name="code" type="text" placeholder="验证码">

              </div>-->

              <div class="ececk_warning"><span>验证码不能为空</span></div>

              <div class="form_btn">

                <button type="button" οnclick="register();">注册</button>

              </div>

              <div class="form_reg_btn">

                <span>已有帐号？</span><a href="/">马上登录</a>

              </div>

            <div class="other_login">

              <div class="left other_left">

                <span>其它登录方式</span>

              </div>

              <div class="right other_right">

                <a href="#"><i class="fa fa-qq fa-2x"></i></a>

                <a href="#"><i class="fa fa-weixin fa-2x"></i></a>

                <a href="#"><i class="fa fa-weibo fa-2x"></i></a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <script type="text/javascript" src="/js/jquery-3.3.1.min.js" ></script>

    <script type="text/javascript" src="js/common.js" ></script>

    <div style="text-align:center;">

</div>

<script>

  function register(){

    var password = $('#password').val();

    var username = $('#username').val();

    var repassword = $('#repassword').val();

    var params = ({

      password: password,

      username: username

    })

    if(check(username,password,repassword)){

      $.ajax({

        type:"post",

        url:"/login/register",

        data:params,

        dataType:'json',

        success:function(data){

          if(data.code=="0"){

            alert('注册成功请登录');

            window.location.href="/";

          }

        }

      });

    }

  }

  function check(username,password,repassword){

    if(username==''){

      alert('手机号不能为空！')

      return false;

    }

    if(password =='' || repassword==''){

      alert('密码不能为空！')

      return false;

    }

    if(password!=repassword){

      alert('两次密码不一致！')

      return false;

    }

    return true;

  }

</script>

  </body>

</html>
 

index.ejs

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <script src="/js/jquery-3.3.1.min.js"></script>

    <script  src="/js/vue/dist/vue.js"></script>

    <script  src="/js/vue-spinner/dist/vue-spinner.min.js"></script>

    <h1><%= title %></h1>

    <p>Welcome to <%= title %></p>

    <div id="app">

      <button type="button" @click="ajax()">获取参数</button>

      <br>

      <br>

      <br>

      <table border="1">

        <tr>

          <td>id</td>

          <td>年龄</td>

          <td>电话</td>

          <td>姓名</td>

        </tr>

        <template v-for="(items,index) in data">

          <tr>

          <td>{{items.id}}</td>

          <td>{{items.age}}</td>

          <td>{{items.phone_number}}</td>

          <td>{{items.user_name}}</td>

        </tr>

        </template>

      </table>

    </div>

    <script>

      var queryWarnReportData = function (params, callback) {

        $.ajax({

            method: "get",

            url: '/query',

            data: params,

            success: callback,

            error: function (response) {

                console.error(response)

            }

        });

    }

</script>

    <script>

       var defaultParams={};

    var PulseLoader = VueSpinner.PulseLoader;

    var app = new Vue({

        el: '#app',

        data: {

            queryParams: defaultParams,

            data: {

                pageNum:0,

                pages:0,

            },

            show: true,

            color: '#43A5C9',

        },

        components: {

            PulseLoader

        },

        methods: {

            updateData: () => {

            Vue.set(app, 'show', true);

            queryWarnReportData(app.queryParams, (data) => {

                Vue.set(app, 'show', false);

                Vue.set(app, 'data', data);

            })

    },ajax:()=>{

      var params = ({

          username : 'admin',

          password : '25b7f5afee0d962a'

        });

        $.ajax({

          type:"post",

          url:"/login/user",

          data:params,

          dataType:"json",

          success:function(data){

            var str = '';

            $.each(data, function(index,obj) {

              console.log(obj.id);

            });

          }

        });

    },

    },

    created: () => queryWarnReportData(defaultParams, (data) => {

        Vue.set(app, 'show', false);

        Vue.set(app, 'data', data);

    }),

    });

</script>

  </body>

</html>
 

配置拦截 app.js

npm install express-session    下载模块

var createError = require('http-errors');

var express = require('express');

var path = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

var session = require('express-session');

var indexRouter = require('./routes/index');

var usersRouter = require('./routes/users');

var loginRouter = require('./routes/login');

var queryRouter = require('./routes/query');

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(logger('dev'));

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

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

app.use(cookieParser());

app.use(session({

    resave: true, // don't save session if unmodified

    saveUninitialized: false, // don't create session until something stored

    secret: 'admin', //密钥

    name: 'testapp', //这里的name值得是cookie的name，默认cookie的name是：connect.sid

    cookie: {

        maxAge: 80000

    } //设置maxAge是80000ms，即80s后session和相应的cookie失效过期

}));

//登录拦截器

app.use(function (req, res, next) {

  var url = req.originalUrl;

console.log("session"+req.session.user)

  if (url != "/login/login" && url != "/login/register" && url != "/" &&!req.session.user) {

      return res.redirect("/");

  }

  next();

});

app.use('/', indexRouter);

app.use('/users', usersRouter);

app.use('/login', loginRouter);

app.use('/query', queryRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

  next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

  // set locals, only providing error in development

  res.locals.message = err.message;

  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page

  res.status(err.status || 500);

  res.render('error');

});

module.exports = app;
 

session 存放  login.js

var express = require('express');

var URL = require('url');

var router = express.Router();

var connection = require('./mysql/mysql');

var bodyParser = require('body-parser');

var session = require('express-session');

router.use(bodyParser.urlencoded({extended:false}));

router.post('/login',function(req, res, next){

  var params = {

    username : req.body.username,

    password : req.body.password

  }

  var userStr = 'select * from sys_user where login_name=? and password=md5(?)';

  var str = [params.username,params.password];

  connection.query(userStr,str,function(err,user){

        if(!user[0]){

            res.send({error:'用户名或密码错误！','code':'1'})

        }else{

          req.session.user = user[0];

          console.log(req.session.user)

           res.send({error:'登陆成功！','code':'0'})

        }

    })

});

router.get('/query', function(req, res, next) {

  var user = {

    name:'',

    age:'',

    city:''

  };

  var params = URL.parse(req.url, true).query;

  if(params.id == '1') {

    user.name = "Mr.light";

    user.age = "1";

    user.city = "深圳市";

  } else {

    user.name = "Ms.lee";

    user.age = "2";

    user.city = "广东市";

  }

  var response = {status:1,data:user};

  res.send(JSON.stringify(response))

});

//用户注册

router.post('/register', function(req, res, next) {

  var params = {

    username : req.body.username,

    password : req.body.password

  }

  var userStr = 'insert into sys_user (login_name,phone_number,password,create_time,user_name) values (?,?,md5(?),now(),?)';

  var str = [params.username,params.username,params.password,params.username];

  connection.query(userStr,str,function(err,result){

        if(err){

            throw err;

        }else{

          var datas = {'code':'0','msg':'注册成功'};

            res.send(datas)

        }

    })

});

module.exports = router;
 

index.js

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('login', { title: 'Express' });

});

router.get('/register', function(req, res, next) {

  res.render('register', { title: 'Express' });

});

router.get('/index', function(req, res, next) {

  res.render('index', { title: 'Express' });

});

module.exports = router;
 

源码地址：https://gitee.com/qwerdfs/nodejs_development

NodeJS 使用内容以及模拟一个接口的更多相关文章

  1. 使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock

    使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electr ...

  2. 详解C#泛型（二） 获取C#中方法的执行时间及其代码注入 详解C#泛型（一） 详解C#委托和事件（二） 详解C#特性和反射（四） 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码

    详解C#泛型(二)   一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...

  3. 如何模拟一个http请求并把response的内容保存下载下来，导出到excel中（结尾福利）

    def doExport(self): # 模拟一个http请求 url = u'%s?dumptype=investigation&dumpid=%s&timezone=8' % ( ...

  4. C#7.2——编写安全高效的C#代码 c# 中模拟一个模式匹配及匹配值抽取 走进 LINQ 的世界 移除Excel工作表密码保护小工具含C#源代码 腾讯QQ会员中心g_tk32算法【C#版】

    C#7.2——编写安全高效的C#代码 2018-11-07 18:59 by 沉睡的木木夕, 123 阅读, 0 评论, 收藏, 编辑 原文地址:https://docs.microsoft.com/ ...

  5. ExpandoObject与DynamicObject的使用 RabbitMQ与.net core(一)安装 RabbitMQ与.net core(二)Producer与Exchange ASP.NET Core 2.1 : 十五.图解路由(2.1 or earler) .NET Core中的一个接口多种实现的依赖注入与动态选择看这篇就够了

    ExpandoObject与DynamicObject的使用   using ImpromptuInterface; using System; using System.Dynamic; names ...

  6. wiremock 模拟服务接口提供前端使用

    前后端分离同步开发时,如果前端需要等后端把接口都开发完了再去动工的话,项目周期会拉长. 以前开发时,一般前期是先把接口文档写的差不多了,要么是让前端自己构造模拟数据,要么是后端在开个控制器专门提供模拟 ...

  7. Jmeter接口测试，怎么在下一个接口调用上一个接口的数据

    常用的两种方式,第二种容易上手1.使用正则提取器 jmeter 如何将上一个请求的结果作为下一个请求的参数——使用正则提取器(http://www.cnblogs.com/0201zcr/p/5089 ...

  8. 如果使用 Python3(Flask) 一步一步模拟一个网页微信客户端

    目录 Web Weixin Pipeline 一.获取登录的二维码 1.1.打开浏览器输入下面网址 1.2.梳理原理 1.3.代码实现 1.4.启动测试 二.扫码成功 2.1.扫码状态 2.2.原理状 ...

  9. node开发一个接口详细步骤

    最近在做后台系统改版,由于目前接口还没出来,就自己用nodejs写了个简单的接口. 我这里用的是nodejs+mysql的 这里不讲nodejs和mysql的安装.这些基础略过. 首先创建文件夹.cd ...

随机推荐

  1. vim编辑器-Linux从入门到精通第四天(非原创）

    文章大纲 一.vi介绍二.vim三种模式(重点)三.命令模式四.模式间的切换(重点)五.末行模式六.编辑模式七.实用功能八.扩展九.学习资料下载十.参考文章   一.vi介绍 Vi编辑器是所有Unix ...

  2. NPOI.dll 在哪里？

    一.问题 NPOI下载后找不到网上人家说的几个DLL https://bbs.csdn.net/topics/392510552 二.答案: 1.VS2015引用NPOI2.4.1和NuGet的安装方 ...

  3. JavaScript Timing 事件及两种时钟写法

    JavaScript 可以在时间间隔内执行. 这就是所谓的定时事件( Timing Events). ------------------------------------------------- ...

  4. nginx 日志问题(\x22)

    nginx 日志问题(\x22) 问题: 1.request_body中含有中文时,nginx日志会转换为十六进制. 2.nginx记录问题 POST /xxxxx HTTP/1.1|200|4266 ...

  5. nginx日志分割及备份

    环境:centos7 nginx1.16.1 一.分割及备份的目的 nginx默认将日志信息写在一个文件中,时间一久日志文件中条目越来越多,文件越来越大,不方便查看,备份的时候也不需要备份重复的信息, ...

  6. [转]【HttpServlet】HttpServletRequest接口

    建立时间:2019.6.28 &6.29 1．HttpServletRequest概述 我们在创建Servlet时会覆盖service()方法,或doGet()/doPost(),这些方法都有 ...

  7. JfreeChart 乱码问题处理

    在前面之间加上下面这段代码即可. //创建主题样式 StandardChartTheme standardChartTheme=new StandardChartTheme("CN" ...

  8. 《Exception团队》第三次作业：团队项目的原型设计

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 学习原型设计过程以及工具的使用 二.原型设计细 ...

  9. MapReduce 程序mysql JDBC驱动类找不到原因及学习hadoop写入数据到Mysql数据库的方法

    报错 :ClassNotFoundException: com.mysql.jdbc.Driver 需求描述: hadoop需要动态加载个三方jar包(比如mysql JDBC 驱动包),是在MR结束 ...

  10. 模拟赛 T3 DFS序+树状数组+树链的并+点权/边权技巧

    题意:给定一颗树,有 $m$ 次操作. 操作 0 :向集合 $S$ 中加入一条路径 $(p,q)$,权值为 $v$ 操作 1 :给定一个点集 $T$,求 $T$ 的并集与 $S$ 中路径含交集的权和. ...