NodeJS 使用內容以及模擬一個接口
1.結合上一篇 安裝完Nodejs以後 經過手動建立一個完整的NodeJs項目javascript
2.https://www.jianshu.com/p/7b0a5d4491ba 建立一個完整的項目以後php
3.下面是一個完整的項目結構css
3.在routes下面新建一個目錄爲mysql--mysql.jshtml
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.jsvue
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/loginjava
注意：記得安裝 npm install mysql 模塊node
至此一個接口就這樣完成了mysql
實現登錄攔截 以及註冊等基礎功能 上代碼jquery
前端兩個頁面 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;
相關文章
- 1. NodeJS 使用內容以及模擬一個接口【一】
- 2. NodeJS 使用內容以及模擬一個接口【二】
- 3. Django自定義接口返回內容，以及接口傳參
- 4. 使用 NodeJs 模擬後臺測試接口
- 5. 堆棧以及接口在一個程序中的使用
- 6. 隊列以及接口在一個程序中的使用
- 7. JS Promise的用法, 以及本身模擬一個Promise
- 8. CURL命令模擬Http Get/Post以及帶cookies調用接口
- 9. VUE使用Mock模擬接口
- 10. 使用node模擬前端接口
- 更多相關文章...
- • Docker 容器使用 - Docker教程
- • Eclipse 內容輔助 - Eclipse 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 委託模式
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
