NodeJS 使用内容以及模拟一个接口
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 使用内容以及模拟一个接口的更多相关文章
- 使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock
使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electr ...
- 详解C#泛型（二） 获取C#中方法的执行时间及其代码注入 详解C#泛型（一） 详解C#委托和事件（二） 详解C#特性和反射（四） 记一次.net core调用SOAP接口遇到的问题 C# WebRequest.Create 锚点“#”字符问题 根据内容来产生一个二维码
详解C#泛型(二) 一.自定义泛型方法(Generic Method),将类型参数用作参数列表或返回值的类型: void MyFunc<T>() //声明具有一个类型参数的泛型方法 { ...
- 如何模拟一个http请求并把response的内容保存下载下来，导出到excel中（结尾福利）
def doExport(self): # 模拟一个http请求 url = u'%s?dumptype=investigation&dumpid=%s&timezone=8' % ( ...
- 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/ ...
- 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 ...
- wiremock 模拟服务接口提供前端使用
前后端分离同步开发时,如果前端需要等后端把接口都开发完了再去动工的话,项目周期会拉长. 以前开发时,一般前期是先把接口文档写的差不多了,要么是让前端自己构造模拟数据,要么是后端在开个控制器专门提供模拟 ...
- Jmeter接口测试，怎么在下一个接口调用上一个接口的数据
常用的两种方式,第二种容易上手1.使用正则提取器 jmeter 如何将上一个请求的结果作为下一个请求的参数——使用正则提取器(http://www.cnblogs.com/0201zcr/p/5089 ...
- 如果使用 Python3(Flask) 一步一步模拟一个网页微信客户端
目录 Web Weixin Pipeline 一.获取登录的二维码 1.1.打开浏览器输入下面网址 1.2.梳理原理 1.3.代码实现 1.4.启动测试 二.扫码成功 2.1.扫码状态 2.2.原理状 ...
- node开发一个接口详细步骤
最近在做后台系统改版,由于目前接口还没出来,就自己用nodejs写了个简单的接口. 我这里用的是nodejs+mysql的 这里不讲nodejs和mysql的安装.这些基础略过. 首先创建文件夹.cd ...
随机推荐
- Android 解决Execution failed for task ':app:clean.'报错
说实话,我还真是没见过比Execution failed for task ':app:clean.'更为恶心,更为不要脸的bug啦,代码没啥问题,一下子行让你爽爽,一下子又不鸟你啦,研究了下,终于找 ...
- linux查看磁盘类型（是否SSD盘）
介绍两种方法: 第一种: cat /sys/block/sda/queue/rotational 注意: 命令中的sba是你的磁盘名称,可以通过df命令查看磁盘,然后修改成你要的 结果: 返回0:SS ...
- 【Linux】查看程序是否正常运行
ps aux|grep redis-server ps -ef |grep redis netstat -tunple|grep 6379 netstat -lntp | grep 6379
- MacOS更改启动台(launchpad)图标大小
原文链接:https://www.jianshu.com/p/18224d191bd2作者:麦壳君 小麦有点强迫症,觉得 Mac 启动台(Launchpad)里面系统默认的应用程序图标太大,所以想让它 ...
- MySQL版本问题导致的SQLException
背景 学习使用 SpringCloud 时,使用 消费者 调用 生产者 时抛出 SQLException,持久层框架为 MyBatis,数据库为最新版本的 MySQL 版本如下: Server v ...
- vs启动报4.X的错
参考: https://www.cnblogs.com/zsx-blog/p/6136956.html https://blog.csdn.net/lishaoran369/article/detai ...
- 将fasta fastq文件线性化处理
将fasta文件线性化处理 awk '/^>/ {printf("%s%s\t",(N>0?"\n":""),$0);N++;n ...
- R地图包 maps
安装 maps install.packages(“maps”) 使用 maps library("maps") nz <- map_data("nz")
- Comet OJ - Contest #1 C 复读游戏（状态压缩）
题意 https://www.cometoj.com/contest/35/problem/C?problem_id=1498 思路 这题要用到一种比较小众的状压方法(没见过的话可能一时比较难想到). ...
- docker nginx-php容器镜像瘦身优化
1. 在安装好php环境的容器,参考上面贴出的链接那篇文章的部分,做好基础工作: #创建工作目录 mkdir /rootfs #进入工作目录 cd /rootfs #创建基础目录 mkdir -p b ...