用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()
在浏览器输入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静态文件夹下新建以下文件
login.html对注册跟登录的post请求，代码如下：
<!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 Options
maxAge: 24 * 60 * 60 * 1000 // 24 hours
}))
七、express生成器
如果不愿意自己搭建项目架构，可以使用express生成器来快速创建一个应用的骨架。首先全局安装 express-generator，再跑一些初始命令然后下载一些依赖就可以了，也是比较简单，具体步骤参照下文档就可以http://www.expressjs.com.cn/starter/generator.html。
用Express、MySQL搭建项目（接口以及静态文件获取、文件上传等）的更多相关文章
- mvc5 + ef6 + autofac搭建项目（四）.1视屏上传生成截图
即上一篇中上传涉及到的 一个视频生成截图的问题,这个很简单,这是上一篇中的代码片段 #region 视频上传,生成默认展示图片(自动剪切) try { string fileSavePath = Da ...
- springboot成神之——springboot+mybatis+mysql搭建项目简明demo
springboot+mybatis+mysql搭建项目简明demo 项目所需目录结构 pom.xml文件配置 application.properties文件配置 MyApplication.jav ...
- docker搭建yapi接口文档系统、Idea中上传接口、在线调用
一.前言 在我们后端开发中,必不可少的是接口的交接,有很多种方式,常见的就是swagger,不过这个侵入性太强了.还有就是接口文档的框架,比如今天小编带大家一起搭建的yapi,在公司还是挺常见的! 今 ...
- Spring Boot 静态资源映射与上传文件路由配置
默认静态资源映射目录 默认映射路径 在平常的 web 开发中,避免不了需要访问静态资源,如常规的样式,JS,图片,上传文件等;Spring Boot 默认配置对静态资源映射提供了如下路径的映射 /st ...
- 手把手教你 通过 NuGet.Server 包 搭建nuget服务器，并使用桌面工具上传 nuget 包，免命令行
新建web项目 工具:VS2013 版本:.Net Framework 4.6,低版本也行,不过要找到对应版本的Nuget.Server 装了NuGet客户端(百度如何安装) WebForm或MVC都 ...
- maven项目的运行方式，maven私服的上传下载
一.maven项目父子工程的运行方式 1.通过父项目的plugin下集成的tomacat run启动 2.通过自身项目的tomcat plugin启动,但前提是所依赖的项目必须全部都install(将 ...
- php四个常用类封装 :MySQL类、 分页类、缩略图类、上传类；；分页例子；
Mysql类 <?php /** * Mysql类 */ class Mysql{ private static $link = null;//数据库连接 /** * 私有的构造方法 */ pr ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- Java开源内容管理CMS系统J4CMS支持静态化直接ftp上传到你的空间了
页面可直接编辑的cms系统j4cms能够直接支持使用ftp 输出 html到你的空间了 真正的静态化 这是静态化后的站点 http://www.j4cms.com/ 源代码上传至csdn了,能够下载源 ...
随机推荐
- C语言的学习
一.文件的使用方式 r 只读 rb只读 r+ rb+(不带b的为已存在的文本文件,带b的为二进制文件(binary),带+号的为读写文件) w 只写 wb只写 a 追加 ab追加 二.说明 1 ...
- Vue自己写组件——Demo详细步骤
公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...
- webapi框架搭建-创建项目（三）-webapi owin
上一篇:创建项目(二) 在上一篇里,我们已经创建好了webapi应用,并已经部署到iis里,本篇讲如何用owin自宿主或是iis宿主来部署webapi应用. owin介绍 传统的asp.net网站只能 ...
- T-SQL逻辑查询处理
引言 本文是对<Microsoft SQL SERVER 2008技术内幕 T-SQL查询>中的第一章做的阅读笔记,这一章的主要内容是分析SQL查询中各子句的执行顺序.如果你对此已了然于胸 ...
- MySQL数据库操作
一创建数据库 1 语法(help create database) CREATE DATABASE 数据库名 charset utf8; 2 数据库命名规则: 可以由字母.数字.下划线.@.#.＄ 区 ...
- 跟我一起读postgresql源码(九)——Executor(查询执行模块之——Scan节点(上))
从前面介绍的可优化语句处理相关的背景知识.实现思想和执行流程,不难发现可优化语句执行的核心内容是对于各种计划节点的处理,由于使用了节点表示.递归调用.统一接口等设计,计划节点的功能相对独立.代码总体流 ...
- Kotlin——从无到有系列教程（5）： 你该知道的Kotlin可空类型、空安全（null）、类型转换等特性
在我们熟知的Java中,定义一个变量可以默认不赋值,因为Java的系统会给我们默认赋一个默认值,并且Java可定义一个赋值为null的变量,这样在使用这个变量的时候都会去显示判断该变量是否为null. ...
- Jfinal启动源码解读
本文对Jfinal的启动源码做解释说明. PS:Jfinal启动容器可基于Tomcat/Jetty等web容器启动,本文基于Jetty的启动方式做启动源码的解读和分析,tomcat类似. 入口 JF ...
- CSS3让文本自动换行——word-break属性
1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...
- JavaScript中的this（你不知道的JavaScript）
JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心:随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所 ...