位置: 编程技术 - 正文
Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）(express后端)
发布时间：2024-02-27推荐整理分享Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（一）(express后端)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:express做后端,express 前后端分离,express 前后端分离,express 前后端分离,express怎么给前端写接口,express前端框架,express前端框架,express怎么给前端写接口,内容如对您有帮助，希望把文章链接给更多的朋友！
在前端这个坑里摸爬滚打已经一年多了，终于下定决心写下自己第一篇博客（虽然内容原创居少，算是个整合内容），开始使用express的原因是因为自己想测试接收下前端上传图片并返回，实现图片上传。后端各位大大们又都比较忙，没办法了，只能自己上了（哎，都是逼出来的）。
此教程适合没有接触过node的web前端开发，快速构建自己的框架，基于express4.x。
首先安装express ， 安装完成后，继续安装express的应用骨架，生成默认项目
（-g表示全局安装，下次可以直接使用，不用再次安装）
接着在myapp文件夹下直接运行express，项目目录就直接生成了
然后安装所有依赖包：
启动这个应用（MacOS 或 Linux 平台）：
Windows 平台使用如下命令：
看到这个页面时，大家已经完成了基础的项目构建，继续往上添加自己的代码就可以了。（到这部后大家可以把public目录下的文件夹修改为自己喜欢的格式，例如：js，css，只是一个路径而已）
接下来大家就可以把自己的页面添加到项目里面了，不过express到目前我只发现可以加载jade模板和ejs。大家不用担心还要从新学习jade，这里 现在大家打开核心的app.js
这几行定义的是express的路由，大家可以简单了解下路由的作用， 比如现在你打开 下面咱们先不急着上传图片，先测试下前端发送的post和get请求。
以post请求为例，咱们把layout.jade修改成下面的样子
在public/js下新建个index.js，加载jquery（只是为了简写的ajax）有人可能会问为什么会没有public路径，因为Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等，详细内容点这里,对应app.js的内容为 app.use(express.static(path.join(__dirname, 'public')));
只有这样才能读取到文件。
下面开始修改js代码，public/js/index.js内写个最基础的ajax请求就好了，这里发送请求的路径为"/"，就是往主页发送请求（路由一定要理解，路由一定要理解，路由一定要理解！！）
然后在routes/index.js里面修改
在此监听首页的post请求，req.body.num表示发送过来的数据，大家可以直接打印下req，看看里面包含了什么内容，加深理解（修改完文件后记得重启express）。
这时候在控制台中就可以看到返回的数据了。
现在大家已经可以使用node接收前端发送的请求了（是不是灰长开心！！），下面进行我们的重头戏，上传图片。
因为是测试接口，公司的项目要兼容低版本浏览器，所有plupload.js就上场了(不是我不想用h5的方法)。官网，下载后如图，就够用了。（记得在layout.jade里面加载）
把index.js修改成下面的样子,这是个标准的官网上传事例，不理解的在官网看下api，很好理解（其实看变量名字也都能理解~）
index.jade修改成下面的样子，主要是添加上传点击的元素，添加了两个按钮而已（不要嫌弃它确实是比较丑--）
这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块。它对解析上传的文件数据做了很好的抽象。 其实说白了，处理文件上传“就是”处理POST数据 —— 但是，麻烦的是在具体的处理细节，所以，这里采用现成的方案更合适点。
安装formidable模块。
修改routes/index.js
module.exports = router;
此时需要在public下手动新建文件夹upload以及下面的temp文件夹。
先把文件上传到临时文件夹，再通过fs重命名移动到指定的目录即可。
fs.rename即重命名，但是fs.rename不能夸磁盘移动文件，所以我们需要指定上传的临时目录要和最终目录在同一磁盘下。
res.write就是往前端返回的数据，这里我直接返回一个img标签，并添加上传文件的路径，前端只要把标签append到页面中就ok了。
完成前端图片上传功能！！
今天进行到这里，明天进行讲解node连接数据库的操作。
在 Express 中使用模板引擎 需要在应用中进行如下设置才能让Express渲染模板文件：views,放模板文件的目录，比如：app.set('views','./views')viewengine,模板引擎，比如：app.set('viewengine','ja
Express的路由详解 路由路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。路由是由一个URI、HTTP请求（GET、POST等）和若干个句柄组成，它的结构如下：app.M
Express实现前端后端通信上传图片之存储数据库（mysql）傻瓜式教程（二） 在上篇文章给大家介绍了express实现前端后端通信上传图片之存储数据库（mysql）傻瓜教程（一)数据库如标题，使用开源的mysql为基础，我是下载的解压
标签: express后端
本文链接地址:https://www.jiuchutong.com/biancheng/387190.html 转载请保留说明！上一篇：日常收集整理的JavaScript常用函数方法(收集和整理的区别)
下一篇：在 Express 中使用模板引擎(express常用api)
