使用node.js完成一个完整的项目（服务器+连接数据库增删改查）（二）【使用express框架优化代码，使用formidable，cookie-session第三方框架实现图片文件上传和登录】
html文件需要放到views文件夹下
img文件，css文件需要放到publi文件夹下
http.js
const express = require('express');
const yewu = require('./yewu');
const app = express();
var cs = require('cookie-session');
// 使用s-c模块
// 使用第三方中间件
app.use(cs({
// cookie 的名字键
name:'sessionId',
// 用于cookie值的加密关键字
keys:['hhhhhhhhh'],
// MD5加盐
}))
// 设置静态资源所在路径
// 后续无需任何操作即可使用
// express 内置中间件 (唯一内置中间件)
app.use(express.static('public'))
// 引入模板引擎,设置模板引擎加载资源的额后缀名
app.engine('html',require('express-art-template'));
var router = require('./luyou');
app.use(router);
app.listen(8888,function(){
console.log('请求访问 127.0.0.1:8888')
})
luyou.js
var express = require('express');
var yewu = require('./yewu');
var router = express.Router();
// router.get('/',(req,res)=>{
// yewu.getall(req,res);
// })
// router.get('/getone',(req,res)=>{
// yewu.getone(req,res);
// })
// router
// // .get('/',(req,res)=>{
// // yewu.getall(req,res);
// // })
// .get('/getone',(req,res)=>{
// yewu.getone(req,res);
// })
router
.get('/',yewu.getall)
.get('/getone',yewu.getone)
.get('/upuser',yewu.upuser_get)
.post('/upuser',yewu.upuser_post)
.get('/delete',yewu.delete_user)
.get('/login',yewu.login_get)
.post('/login',yewu.login_post)
module.exports = router;
yewu.js
// 加载引入 linkdb模块获取数据
var db = require('./db');
var url = require('url');
var querystring = require('querystring');
var formidable = require('formidable');
var fs = require('fs');
// var template = require('art-template');
// template.defaults.root = './';
module.exports = {
// 方法的简写
login_get(req,res){ // 展示登录页面
res.render('./login.html', {});
},
login_post(req,res){
var f = new formidable.IncomingForm();
f.parse(req,(err,fileds)=>{
// 判断用户是否合法
if(fileds.user == 'admin' && fileds.pwd == '123'){
// 将用户信息写入session
// 以供后面判断
req.session.se_da = fileds;
// 返回登录成功的提示信息并做页面跳转
var backstr = ""
res.setHeader('Content-type', 'text/html;charset=utf-8');
res.end(backstr);
}else{
// 登录失败,继续登录
var backstr = ""
res.setHeader('Content-type', 'text/html;charset=utf-8');
res.end(backstr);
}
})
},
getall: function (req, res) {
// 判断是否登录
if(!req.session.se_da){
// 如果没有登录,跳转到登录页面
var backstr = ""
res.setHeader('Content-type', 'text/html;charset=utf-8');
res.end(backstr);
return ;
}
db.select(function (datas) {
res.render('./index.html', { data: datas });
// var html_data = template('./index.html', { data: datas });
// res.end(html_data);
});
// var s = db.select();
// console.log(s);
},
getone: function (req, res) {
var urlObj = url.parse(req.url, true);
// console.log(urlObj);
db.where('id=' + urlObj.query.id).select(function (data) {
res.render('./userinfo.html', { data: data });
})
},
upuser_get: function (req, res) {
var urlObj = url.parse(req.url, true);
db.where('id=' + urlObj.query.id).select(function (data) {
res.render('./upuser.html', { data: data });
})
},
delete_user: function (req, res) {
var urlObj = url.parse(req.url, true);
db.where('id=' + urlObj.query.id).delete(function (data) {
if (data >= 1) {
var backstr = ""
res.setHeader('Content-type', 'text/html;charset=utf-8');
res.end(backstr);
}
});
},
// upuser_post:function(req,res){
// }
// 简写
upuser_post(req, res) {
var urlObj = url.parse(req.url, true);
// 获取formidable 对象,用于文件上传及表单数据解析
var form = new formidable.IncomingForm();
// 实现文件上传,获取表单数据并解析为对象
// 通过回调函数的形式,将文件上传后的路径等信息及表单数据返回
form.parse(req, (err, fileds, files) => {
// 设置上传路径
var file_path = '/img/' + files.touxiang.name
// 将上传后的文件移动到指定的目录并重命名
fs.rename(files.touxiang.path, './public' + file_path, (err) => {
// console.log(fileds);
// res.end();
// 将文件路径写入对象中
fileds.img = file_path;
// 链接数据库,将组装好的数据写入数据库
db.where('id=' + urlObj.query.id).update(fileds, (data) => {
// 判断数据库的返回信息
if(data >= 1){
// 给客户端返回数据
var backstr = ""
res.setHeader('Content-type', 'text/html;charset=utf-8');
res.end(backstr);
}
})
});
})
}
db.js
var mysql = require('mysql');
// 设置连接信息
var connection = mysql.createConnection({
host: '127.0.0.1',
user: 'root',
password: 'root',
database: 'onepiece'
});
// 打开连接
connection.connect();
module.exports = {
wh: undefined,
where: function (wh) {
this.wh = wh
return this;
},
select: function (callback) {
if (this.wh == undefined) {
var sql = "select * from users";
} else {
var sql = "select * from users where " + this.wh;
}
connection.query(sql, function (err, sql_data) {
// return sql_data;
var da = sql_data;
// 调用回调函数,将数据当做实参进行函数的回调
callback(da);
});
// return sql_data
this.wh = undefined;
},
delete:function(callback){
if (this.wh == undefined) {
console.log('请加where条件,否则去死');
return;
}else{
var sql = "delete from users where "+this.wh;
connection.query(sql,function(err,datas){
// console.log(datas);
callback(datas.affectedRows);
})
}
this.wh = undefined;
},
update: function (data,callback) {
if (this.wh == undefined) {
console.log('请加where条件,否则去死');
return;
} else {
var set = '';
for (i in data) {
set += i + "='" + data[i] + "',";
}
set = set.slice(0, set.length - 1);
var sql = "update users set " + set + ' where '+this.wh;
// console.log(sql);
connection.query(sql,function(err,datas){
// console.log(datas.changedRows);
callback(datas.changedRows);
})
}
this.wh =undefined;
}
}
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hero - Admintitle>
<link rel="stylesheet" href="/css/bootstrap.css">
<style>
.hero-list img {
width: 50px;
}
style>
head>
<body>
<header>
<div class="page-header container">
<h1>海贼王 <small>角色管理器small>h1>
div>
header>
<div class="container hero-list">
<a class="btn btn-success pull-right" href="/add">添加英雄a>
<table class="table table-hover">
<thead>
<th>编号th>
<th>名称th>
<th>能力th>
<th>团体th>
<th>头像th>
<th>操作th>
thead>
<tbody id="tbody">
{{each data}}
<tr>
<td>{{$value.id}}td>
<td>{{$value.name}}td>
<td>{{$value.nengli}}td>
<td>{{$value.jituan}}td>
<td><img src="{{$value.img}}" alt="">td>
<td>
<a href="/getone?id={{$value.id}}">查看a>
<a href="/upuser?id={{$value.id}}">修改a>
<a href="/delete?id={{$value.id}}">删除a>
td>
tr>
{{/each}}
tbody>
table>
div>
body>
html>
add.htmi
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
table {
margin: 0 auto;
border-collapse: collapse;
width: 800px;
height: 500px;
}
td {
border: 1px solid #ccc;
}
style>
head>
<body>
<form action="/add" method="post">
<table>
<tr>
<td>姓名td>
<td><input name="name" type="text">td>
tr>
<tr>
<td>能力td>
<td><input name="nengli" type="text">td>
tr>
<tr>
<td>团体td>
<td><input name="tuanti" type="text">td>
tr>
<tr>
<td>上传图片td>
<td><input type="file">td>
tr>
<tr>
<td>td>
<td><input type="submit" value="新增">td>
tr>
table>
form>
body>
html>
upuser.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
table {
margin: 0 auto;
border-collapse: collapse;
width: 800px;
height: 500px;
}
td {
border: 1px solid #ccc;
}
style>
head>
<body>
<form action="/upuser?id={{data[0].id}}" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>姓名td>
<td><input name="name" type="text" value="{{data[0].name}}">td>
tr>
<tr>
<td>能力td>
<td><input name="nengli" type="text" value="{{data[0].nengli}}">td>
tr>
<tr>
<td>团体td>
<td><input name="jituan" type="text" value="{{data[0].jituan}}">td>
tr>
<tr>
<td>上传图片td>
<td><input type="file" name="touxiang">td>
tr>
<tr>
<td>td>
<td><input type="submit" value="确认修改">td>
tr>
table>
form>
body>
html>
login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<form action="/login" method="post">
姓名: <input type="text" name="user" > <br>
密码: <input type="password" name="pwd"> <br>
<input type="submit" value="登录">
form>
body>
html>