位置: 编程技术 - 正文

Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)(express后端)

编辑:rootadmin

推荐整理分享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请求就好了,这里发送请求的路径为"/",就是往主页发送请求(路由一定要理解,路由一定要理解,路由一定要理解!!)

Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)(express后端)

  然后在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)

  • 知识产权入股需要过户给对方么
  • 企业所得税优惠政策最新2023小规模纳税人
  • 交易性金融资产是什么意思
  • 退回资本金要交税吗
  • 代扣代缴个税对企业所得税的影响
  • 企业流水账怎么查
  • 向投资者分配现金股利会影响负债吗
  • 代扣代缴增值税纳税义务发生时间
  • 融资性售后回租承租方出售资产为什么不缴纳增值税
  • 雇佣退休人员工伤赔偿标准
  • 备用金三栏式明细账图片
  • 应收账款确认无法收回分录
  • 劳务派遣用工的岗位只能在哪些工作岗位上实施
  • 行政事业单位应当进行摊销的无形资产
  • 开具有误拒收的增值税专用发票怎么办?
  • 金税盘应用程序中发生了未经处理的异常
  • 个人取得的咨询费是什么
  • 建筑行业异地预缴增值税
  • 税率及征收率的区别
  • 安装过程中材料和工资
  • 工会经费购买发的东西要算个税吗?
  • 买烟酒开专票可以抵税吗
  • 外管证开具后如何缴税?
  • 企业职工补助
  • 缴纳印花税税会计分录怎么做
  • 滴滴发票报销是什么意思
  • 防暑降温费如何做账
  • 免税和零税率和税率区别
  • 新公司会计建账流程
  • 外资公司股东要求
  • php数组函数,选班长
  • Apache+php+mysql在windows下的安装与配置图解(最新版)
  • PHP:session_status()的用法_Session函数
  • 甘油三血脂高怎么办
  • 生育津贴如何做账
  • 契税发票遗失怎么处理
  • mp3格式最高音质
  • paul滑雪
  • img标签怎么写
  • Vue项目打包
  • php的urlencode
  • 减资的程序
  • 主营业务收入需要结转吗
  • 想要上海名媛群群号
  • 购买办公楼之后怎么入住
  • 小规模纳税人销售额超过500万
  • 劳务派遣公司经营情况说明怎么写
  • 产品广告费属于什么会计科目类别
  • 租办公室自己装修可以拆走吗
  • 外币报表折算差额可以转损益吗
  • 转出进项税额会计分录
  • 建筑业异地预缴税款怎么纳税申报
  • 政府扶持资金怎么做账
  • 现金折扣和商业折扣怎么确定收入
  • 公司向股东个人借款
  • 公司固定资产报废申请范文
  • 车票抵扣填在申请表哪里
  • 为什么零售业只进不出呢
  • 建筑施工企业会计分录大全
  • 数据库alter change
  • windows 文件名太长无法删除
  • win7 光盘
  • linux 设置文件系统
  • 映泰主板bios设置内存频率
  • win7系统连接VPN失败时提示错误代码721的故障分析及解决方法
  • xp电脑怎么样
  • xp怎么关闭自启动
  • win8优化驱动器
  • msedge.exe是什么
  • ExtJS4 Grid改变单元格背景颜色及Column render学习
  • dos命令批处理
  • perl读取文件内容
  • 解析几何
  • shell脚本 -ne 0
  • javascript基于什么的语言
  • onclick和onfocus
  • jQuery使用ajax跨域获取数据的简单实例
  • 社保在税务系统交,有何用意
  • 国税手撕发票图片
  • 个税3月份申报2月的个税?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设