用Express、MySQL搭建项目（接口以及静态文件获取、文件上传等）

一、简介

本文将主要基于node.js使用express框架搭建一个后台环境，包括如何自定义项目目录、所用依赖以及中间件、路由以及模板引擎、接口数据获取以及文件上传等内容。

二、后台环境搭建

1、新建一个目录node，然后在目录下跑命令：npm init,然后输入一些版本信息；

2、安装Express

运行指令：npm install express --save

3、在根目录下新建一个server.js文件，然后在建立服务器然后监听9999端口，输出hello world！

const express = require('express')var app = express()app.get('/',function(req,res){res.send('hello world!')
})app.listen(9999)

在浏览器输入http://localhost:9999就会显示hello world！

三、数据准备，登录注册

　　1、这里使用MySQL数据库与node.js链接。我用的是Navicat图形化工具，当然用其他工具也可以，这里将做登录、get列表数据、post文件上传，分页等功能。先在建立数据库然后创建相应的表。

　　2、创建一个数据库叫node，然后创建一个表user_table，有三个字段ID，username，password。

　　3、做一个注册登录功能

　　根目录下新建一个route文件夹，便于管理路由路径模块管理，然后新建一个regLogin.js文件，然后定义router，引入MySQL，建立连接池，然后定义登录跟注册路由，然后导出路由；

const express = require('express');
const router = express.Router();
const mysql = require('mysql');//连接池
var db = mysql.createPool({host:'localhost',user:'root',password:'*******',database:'node'})// 定义网站主页的路由router.use('/login', function(req, res) {var username = req.body.username;var password = req.body.password;db.query(`SELECT * FROM user_table WHERE username='${username}'`,(err,data)=>{if (err) {console.log(err);res.status(500).send('database error').end()}else{if (data[0].password==password) {res.send('登录成功！')}}})});// 定义 about 页面的路由router.use('/register', function(req, res) {var username = req.body.username;var password = req.body.password;db.query(`insert into user_table(username,password) values ('${username}','${password}')`,(err,data)=>{if (err) {console.log(err);res.status(500).send('database error').end()}else{res.send('注册成功')}})});module.exports = router;

　　4、在server.js里边引入body-parser，body-parser可以自动转换req数据为对象格式，然后使用express.static静态文件托管

const express = require('express')
const regLogin =require('./route/regLogin');//引入路由
const bodyParser = require('body-parser');
var app = express()
app.use(bodyParser.urlencoded({ extended: false }))//使用路由
app.use('/', regLogin)//静态文件托管
app.use(express.static('static'));app.listen(9999)

5.在static静态文件夹下新建以下文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Login</title><script src="jquery.js"></script><script>window.onload=function(){//注册
            $('#register').click(function(){var name = $('#name').val();var pass = $('#password').val();$.ajax({type:'POST',url:'/register',data:{username:name,password:pass},success:function(res){alert('注册成功')}})})//登录
            $('#login').click(function(){var name = $('#name').val();var pass = $('#password').val();$.ajax({type:'POST',url:'/login',data:{username:name,password:pass},success:function(res){alert('登录成功')}})})}</script>
</head>
<body><div>用户名：<input type="text" id="name"/><br/>密码：<input type="text" id="password"/><br/><button id="login">登录</button><button id="register">注册</button></div>
</body>
</html>

6.校验

当输入用户名密码，点击注册，则显示注册成功，数据库多了一条用户数据。

点击登录则显示登录成功。

四、文件上传功能

1、文件上传功能需要依赖第三方中间件multer，当然multer有一些参数，可以选择一次上传单个文件，也可以上传多个或者不限制，定义相应的输出路径等参数，详情可以看下官方文档https://www.npmjs.com/package/multer。这里首先在server.js里引入multer并设置参数：

const multer = require('multer');
//输出文件路径
const multerObj = multer({dest:'./static/upload'});app.use(multerObj.any())

2、新建路由upload.js文件以及static目录下的upload.html上传文件，并在server.js中引入upload路由。

upload.js代码如下：

const express = require('express');
const mysql = require('mysql');
const pathLib = require('path')
const fs = require('fs')var router = express.Router();//连接池
var db = mysql.createPool({host:'localhost',user:'root',password:'*******',database:'node'});router.post('/',function(req,res){var title = req.body.title;if (req.files[0]) {var extName = pathLib.parse(req.files[0].originalname).ext;var oldName = req.files[0].path;var newName = req.files[0].path+extName;var newFileName = req.files[0].filename + extName;//重命名加上后缀fs.rename(oldName,newName,(err)=>{if (err) {console.log(err);res.status(500).end();}})db.query(`INSERT INTO upload_table (title,src) VALUES ('${title}','${newFileName}')`,(err,data)=>{if (err) {console.log(err);res.status(500).send('err').end()}else{res.send('上传成功').end()}})}
})module.exports = router;

3、当选择文件上传，数据库中就会多一天记录

五、模板引擎

　　nodejs模板引擎比较常用的有jade跟ejs,jade跟我们平常时的HTML模板不兼容，而ejs跟我们平时所用的前端代码而已结合使用，所以这里将介绍使用ejs，对jade感兴趣的话也可以去了解了解。

1、首先，引入依赖consolidate，consolidate集成了很多模板引擎，可以选择其中的某个模板引擎来使用，包括jade和ejs都在里边。

2、在server.js引入consolidate然后定义相应渲染为HTML，然后在定义路径渲染

const consolidate = require('consolidate');
var app = express()//模板
app.engine('html',consolidate.ejs);
app.set('view engine','html');
app.set('views',__dirname + '/template');app.get('/index',function(req,res){res.render('index.ejs',{name:'smile',text:'这是后台返回渲染数据',flag:true});//res.send('index')
})

3、在template文件夹中新建一个index.ejs，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title>
</head>
<body><div class="warp"><% include components/header.ejs%><div>这是首页<div>名称：<%=name%></div><div>text:<%=text%></div><%if(flag){ %><div>这是flag等于true</div><% } %></div></div>
</body>
</html>

4、最后渲染出来的页面如下：

六、cookie跟session

　　1、要使用cookie以及session，得引入两个依赖，cookie-parser,cookie-session,

　　2、使用cookie

var express      = require('express')
var cookieParser = require('cookie-parser')var app = express()
app.use(cookieParser())app.get('/cookie', function(req, res) {console.log('Cookies: ', '这是返回的cookie')
})

3、使用session

var cookieSession = require('cookie-session')
var express = require('express')var app = express()app.use(cookieSession({name: 'session',keys: ['key1','key2','key3'],//secret keys// Cookie OptionsmaxAge: 24 * 60 * 60 * 1000 // 24 hours
}))

七、express生成器

　　如果不愿意自己搭建项目架构，可以使用express生成器来快速创建一个应用的骨架。首先全局安装 express-generator，再跑一些初始命令然后下载一些依赖就可以了，也是比较简单，具体步骤参照下文档就可以http://www.expressjs.com.cn/starter/generator.html。

转载于:https://www.cnblogs.com/superSmile/p/8377171.html

用Express、MySQL搭建项目（接口以及静态文件获取、文件上传等）相关推荐

express + vue 搭建项目
1.创建目录为了方便管理项目,创建根目录,内部分成两部分,server 和 view server 用来搭建 express 框架 view 用来搭建 vue 框架 2.搭建 express 框架 ...
SpringBoot+El-upload实现上传文件到通用上传接口并返回文件全路径(若依前后端分离版源码分析)
场景 SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
Jyputer 项目工程设置Github同步，本地代码上传Github实例演示
首先在 Github 上创建一个仓库,它将用于存储.同步本地 Jyputer 里的项目. 获取到仓库的 SSH 地址. 下面的文件夹就是我想同步的项目工程. 在当前文件夹下依次使用如下命令: git ...
python接口自动化测试二十四：上传多个附件，参数化
python接口自动化测试二十四:上传多个附件,参数化 # 添加多个附件参数化files = [("1.png", "1.png") ("2.png& ...
接口查询的数据生成excel上传到七牛云
接口查询的数据生成excel上传到七牛云一.注册七牛云并新建一个存储空间我们公司已经有一个七牛云的账号,登录进去之后创建一个新的对象存储空间.命名为eval_mobile.酒会有一个默认的融合 C ...
pypi-server搭建，pypi-server踩坑，使用twine上传
pypi-server搭建,pypi-server踩坑,使用twine上传搭建参考:使用pypi-server搭建简单的PyPI源上传无需密码,开启服务命令 pypi-server -P . -a ...
淘宝商品详情采集上架京东店铺（无货源商品数据采集接口，京东商品详情接口，淘宝商品详情接口，整店商品采集上传接口）接口代码对接教程
淘宝商品详情采集上架京东店铺(无货源商品数据采集接口,京东商品详情接口,淘宝商品详情接口,整店商品采集上传接口)接口代码对接教程如下: 1.公共参数名称类型必须描述(接口代码教程wx19970 ...
Java springboot项目引入腾讯云COS实现上传
Java springboot项目引入腾讯云COS实现上传 pom.xml 配置类CosConfig.java 上传工具类CosClientUtil.java pom.xml <!--腾讯云上传 ...
使用git命令，将项目包创建到本地仓库并上传到码云仓库
使用git命令,将项目包创建到本地仓库并上传到码云仓库初衷一.生成/添加SHH公钥注意:""里面的内容是用于注册码云账号的邮箱地址二.创建仓库 1. 创建仓库 2. 将仓库 ...

用Express、MySQL搭建项目（接口以及静态文件获取、文件上传等）

用Express、MySQL搭建项目（接口以及静态文件获取、文件上传等）相关推荐

最新文章

热门文章