node+express+mongo:快速实现网页前后端交互(一)

笔者最近忙着考研,买了新版的《第一行代码》还没来得及看,Android知识真是很多呀,考研只能先把Android学习先缓缓啦!
最近学习了如何通过node.js实现一个网页与后台数据库的交互 !决定写个小总结与大家共同学习一下!

先申明所用到的软件等:node.js(js的运行环境)、mongo(数据库)、VS Code(代码编辑器)、Chrome浏览器(网页开发必备呀)、express框架(node.js的制作网页利器)、MVC框架(分层封装,各司其职)

下面开始(按步骤写吧,条例清晰些,大家也好参考):
第一步:创建一个新文件夹,在cmd该文件目录中初始化工程,导入需要用到的包。
这里介绍一个快速进入cmd要进入的文件目录的方法,直接在文件夹目录中输入cmd敲回车键就可以直接进入项目目录cmd了!超方便!在这里插入图片描述
下面在改文件目录cmd中初始化,把该导入的包都导入文件夹里。需要的语句如下:
1.npm init -y(初始化)
2.npm i express(安装express包)
3.npm i ejs(安装ejs包)
4.npm i mongo(安装mongo数据库包)
这些包都提供许多方法供我们使用,后面都会用得到的。初始化工作完了的文件夹下是这样的
在这里插入图片描述

第二步:通过vs code打开项目,在项目结构下创建一个server.js写服务器的入口各种方法

let express = require("express");  //导入express包
let app = express();               //创建一台叫app的服务器
app.get("/",(req,res)=>{
              //服务器响应请求,回送信息
    res.send("Hello,world") 
    })
app.listen(3000,()=>{
        //指定3000端口为服务器端口,监听其是否启动
    console.log("服务器启动了")
    })

做完上面这些,我们通过cmd启动这个服务器试试
启动服务器代码:nodemon server.js(需要安装这个全局模块,一次安装,以后可以一直用。安装命令:npm I nodemon -g)
(写nodemon这个命令的好处是在我们改动代码的时候服务器会自动更新重启,不用我们一遍遍启动。)
在这里插入图片描述
服务器启动成功了,去浏览器输入localhost:3000试试吧
在这里插入图片描述

第三步:渲染HTML页面
可见,服务器收到了我们的请求,返回了Hello,word,那么同理,我们同样也可以让服务器给我们返回一个HTML页面。由此我们使用MVC方法分别创建3个文件夹:models、views、controllers。至于为什么要使用MVC,我觉得就是让代码条例更清晰,把每个功能一样的部分放在一起,便于维护。MVC我就不细展开了。我们在views文件夹下创建个index.html
在这里插入图片描述有了html页面,我们修改一下server.js里面的一行代码,让服务器渲染出这个页面
app.get("/",(req,res)=>{ //服务器响应请求,回送信息 // res.send("/index.html") res.render("./view/index.html") })

好,让我们去浏览器看看吧。
在这里插入图片描述
出问题了,显示找不到html页面,这是因为我们渲染页面必须要用到模板引擎,通过模板引擎才能将页面渲染出来。
要使用模板引擎,我们需要:
1.把html文件的后缀改为ejs(因为我们使用的模板引擎是ejs)
2.在服务器入口中(server.js就是服务器入口文件)告诉express我们使用模板引擎ejs

let express = require("express");  //导入express包
let app = express();               //创建一台叫app的服务器
app.s
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值