唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会。还望路过的基友们不要抱怨,勿喷,,,,,
本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果。不过就小码哥感觉,基本思路及基本功能算是完成了。
下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等。
首先,说说NodeJs Express框架的搭建,这个唯一的前提就是需要本地搭建nodeJs的运行环境,此处不讲如何安装nodeJs和配置环境问题,希望有兴趣的同学可以去问度娘,或者直接登录nodeJs官网https://nodejs.org/en/或者中文网http://nodejs.cn/查看里面的开发文档,至于下载安装过程和配置问题,我想也会有基友早就先于小码哥以博文的形式发布了,由于对于nodeJs,小码哥还是半吊子,就不献丑了。
闲话少说,在基友们安装配置好node环境后,可以在本地某盘新建一个工作文件(此处小码哥直接在tomcat环境下的工作目录中创建的文件,便于本地预览)。在文件中直接按住shift键并鼠标单击右键打开“在此处打开命令窗口”(Win7+ 操作系统有该功能)。在里面可以直接在本目录下进行命令操作了。
前提是node环境安装配置好并配置好npm包管理器等,可以直接在命令行键入npm install express -g完成express包的安装,安装好之后,就可以直接键入express -e imgUpLoad(文件名)了。完成之后你会在你的新建的文件夹里看到名字为imgUpLoad的文件夹,之后,打开imgUpLoad文件夹,在里面再次操作打开新的命令窗口,在窗口中键入npm install 你会发现文件中又多了个node_modules的文件,里面都是npm按照imgUpLoad文件夹下的package.json文件帮你自动安装的可能用到的包文件。
完成上述操作后,你就可以在该Express框架下进行代码编写了,该框架中包含的文件如下图:
其中作为前端人员,最重要的文件就是public文件了,里面放置的都是其自动配置好的images、javascripts、stylesheets等文件,想必都知道里面该放置什么吧?
再一个就是routes文件夹了,里面有个index.js 的文件,是配置接口的代码以及项目中引用到的各种包文件的引用方式。
最后就是views文件夹下的index.ejs文件了,这就相当于平时写项目的时候的index.html文件了。
对了,这里补充一下配置express框架是命令里的 -e 的作用,由于express框架里对代码有两种后缀的形式,分别是.jade和.ejs。由于前一种小码哥也不熟悉,其也是默认安装的一种,所以在这里加上 -e后,可以是生成的代码后缀直接换成ejs了。
上面的框架也搭建好了,下面就直接上代码了:
由于代码文件比较多,一会直接会上传一个附件,大家可以下载下来,按照上面的环境,直接运行一下试试。由于附件过大,上传到51cto下载中心了,有需要可以去那里下载,,,地址:http://down.51cto.com/9301862
里面用到了美图秀秀的图片编辑工具,大家可以直接访问http://open.web.meitu.com/进行查看,并可以依照里面的开发文档进行研究,此处不多赘述了哈!!
尝试的过程中可能会遇到很多问题,不过,只要你安装配置了node环境以及安装配置了npm包管理器。就应该没啥问题。
本文只是小码哥初学node环境下第一个小示例,请大家多多包涵~