首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

只需几分钟跟小猫学前端:nodejs基础之用express、ejs、mongodb建设简单的网站

开门见山视频教程

前 言:

这是小猫的第二篇node教程,第一篇教程是一个简单的试水,小猫的node教程面向对象为没有后端开发经验的但对node有所了解的web前端工程师们,每篇几分钟的视频和博文,由浅入深的学习node。所以跟小猫一起学node吧,小猫期待亲的持续关注。

今天将为大家带来的是一个电商展示小网站,使用express,ejs,mongodb搭建(不要问本喵技术选型问题,本文重点是让小白前端认识全栈开发),主要用于让大家对node的express框架,在node中如何使用模版引擎和数据库有基本认识。通过这篇教程的学习,你将对全栈开发有基本的认识和能力,正式开始跨入全栈工程师的门槛哦。

想要获取文章中的代码请回复:代码

首先是技术介绍

express

第一篇node教程也有介绍过:

基于Node.js 平台,快速、开放、极简的 web 开发框架,这里主要用来做简单的路由功能,主要是用了get,静态资源管理。

ejs

比较常见的node模版引擎,web前端小伙伴们对模板引擎一定不陌生吧?

本文会以ejs为例介绍如何在node中引入模板引擎,主要用到了ejs的foreach和基本数据输出。

mongodb

MongoDB是一个基于分布式文件存储的数据库。由c++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。

本实例主要用到了,

连接数据库(connect),创建集合(createCollection),插入数据(insertMany),删除数据(deleteMany),查找数据(find)等api,后面会在编码中进行详细介绍

思路:

1.使用express搭建web服务和简单的路由

代码如下:之前的教程介绍过get方法,这里不再介绍

2.用express管理静态资源:静态资源管理可以指定静态资源根目录,使得静态资源可以按目录路由,无需在每个单独定制路由

3.引入ejs模板引擎

4.连接mongodb 数据库,并使用mongodb储存商品信息

首先我们要先安装mongodb数据库,具体安装方法可以见http://www.runoob.com/mongodb/mongodb-tutorial.html

运行命令启动mongodb数据库服务,默认端口是27017

其次,连接数据库(connect),创建集合(createCollection),并存储商品信息(insertMany)

5.从mongodb数据库中读取商品信息,并输出到页面上

这里使用到的mongodb,api 为 find,find接受的参数为查询数据的规则,传入空对象时,返回全部

6.最后整理代码:

获取全部代码请回复“代码”

后记:

这几天经历了很多诋毁,被说骗粉,被说有套路,被说用自己形象宣传恶心,被说技术太水。也让本喵这几天充满了负能量。

但本喵要强调下做这件事的初衷,本喵写这个教程从没想过要炫耀自己多牛逼的技术,只是想让更多的前端工程师可以进入全栈开发的领域,想让更多的人上手node,充满成就感的学习下去。

小猫不是计算机专业的学生,很久很久以前小猫也曾自学前端,经历过很痛苦的,求知无门的入门期,就好像面前有一层薄薄的窗户纸,当在我面前,后面就是程序世界的繁华多姿。当时本喵有幸读到一本书《javascript dom编程艺术》这本书就是没有讲什么实际原理,但是跟着书上做,你会发现你很快的做出了东西来,非常有成就感,我也是跟着这本书进入了javascript的世界,通过这本书的学习,后面又接触了《javascipt高级程序设计》,犀牛书等等。

所以小猫一直觉得,有个简单基础很快有成就感的教程,带领新手有成就感有作品的进入一个领域是非常重要的,小猫想做这个重要的人。也觉得这是一件很有意义的事。

小猫开始做这件事,还没想过会得到什么回报,更多的是为了成为技术布道者这一梦想。

如果在学习小猫的教程中,你得到了收获,希望你能分享给更多的人,也算对本喵的支持,也给了小猫继续做这件事的动力。

小猫很虚心的接受大家的批评和意见,但是被人嘲笑的梦想才有实践的价值不是吗,小猫会坚持自己的路,做自己想做的事。

对教程有意见和建议请留言公众号,另外小猫的公众号接受大家的投稿~只要是好的内容,没有很浓的推广商业性质,小猫这里没有什么所谓的商业合作!如果一经采用,附近的亲小猫可以请吃饭!

最后,祝大家都能勿忘初心,朝着梦想努力工作,努力生活,努力活着~

我是一只一直在努力的猫!

补发上次清晰版视频地址:

最后发起个小小的投票(小喵是上班族,后续由于时间原因可能每周才能更新一篇原创技术文章了)

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180506G0RKWL00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券