【实战】用 express+MongoDB 搭建一个完整的前端项目

news/2023/12/1 7:37:01 标签: 数据库, 前端, json
前言:要做一个全沾的工程师,对于后端和数据库来说,即使不认识也要见个面的。本文给的例子很简单,也贴出来源码,只要一步步下来,就可以跑起来啦~~~

思考一个需求:做一个登录页面,自己搭建服务和数据库,将用户输入的登录信息保存到数据库
如何完成呢:首先选择一个应用框架,无论是 express、koa、egg 都可以;然后是数据库选择,MySQL、MongoDB 都可以,Node.js 都支持连接;最后是插件和中间件的选择,将应用于数据库连接起来... 这是大致的思路,那本文以 express+MongoDB 为例建一个简单的程序,完成提出的需求。
数据库准备:MongoDB与可视化工具adminMongo的安装、启动与连接

一、MongoDB 数据库

数据库选择 MongoDB 是因为其结构与 JSON 数据格式很像。基本了解 MongoDB 的概念就好,主要是安装上数据库,并进行简单的增删操作。

SQL 与 MongoDB

clipboard.png

更多学习:http://www.runoob.com/mongodb/

安装并运行

更详细的过程参考:MongoDB与可视化工具adminMongo的安装、启动与连接

  • 下载:MongoDB网址 https://www.mongodb.com/downl...
  • 配置:进入解压后的目录,为MongoDB添加默认的/data/db数据库存储目录 $ mkdir data/db
  • 启动:进入bin目录下,启动 mongodb 数据库服务器 $ sudo ./mongod
  • 访问:再通过localhost访问本地数据库$ ./mongo
  • 一些常用的命令:
    数据库:show dbs ;use mytest ; db.dropDatabase()
    集合:show collections ; db.createCollection("mycollection") ; db.mycollection.drop()
    文档:db.mycollection.find() ; db.mycollection.insert({name:"xxx"}) ; db.mycollection.remove({'name':'xxx'})

二、adminMongo 可视化工具

选择一款可视化工具,能让你的数据库变得清晰,也可以选择其他的工具,这里安装的是adminMongo
  • 下载adminMongo

    $  git clone https://github.com/mrvautin/adminMongo
  • 安装并启动:

      $  cd adminMongo
      $  npm install
      $  npm start
  • 连接本地数据库:mongodb://127.0.0.1:27017

三、mongoose 数据模型

直接用 node.js 也可以连接数据库进行读写,但很多插件除了封装这个基本功能之外,还提供了很多其他的服务。对于 MongoDB,我不会使用原生 node 去操作,而是选了 mongoose 这个插件。mongoose 官网: https://mongoosedoc.top/
  • 安装了 node.js 建一个 test 项目文件夹,初始化 package.json

    $  npm init 
  • 安装 mongoose

    $ npm install mongoose  --save-dev
  • 新建一个js文件,用来写 mongoose 代码

     $  touch mongoose.js
  • 连接数据库

    /* 
      mongoose.js :建立数据库连接
     */
    var mongoose = require('mongoose') // 引入 mongoose
    var url = "mongodb://localhost:27017/mytest"; // 本地数据库地址
    mongoose.connect(url)
    
    // connect() 返回一个状态待定(pending)的连接,可以用来判断连接成功或失败
    var db = mongoose.connection; 
    db.on('error', console.error.bind(console, 'connection error:'));
    db.once('open', function() {
      console.log("Successful connection to "+url)
    });

    运行$ node mongoose.js 后输出:
    Successful connection to mongodb://localhost:27017/mytest

  • 此时连接数据库成功,建立 Schema(Mongoose 定义的相当于 collection 集合的概念) ,写数据

    /*
      mongoose.js :建立数据库连接用 mongoose.Schema 插入数据
     */
    var Schema = mongoose.Schema //schema 都会映射到一个 MongoDB collection
    
    let user = {
      name:String
    }
    
    var userSchema = Schema(user)
    var User = mongoose.model('User', userSchema); //将schema编译为model构造函数
    
    var newUser = new User({name: "yyyyyyyyyyyy"})// Mongoose 会自动找到名称是 model 名字复数形式的 collection
    newUser.save()
    

    运行$ node mongoose.js 后,可以通过 adminmongo 查看数据是否添加成功,也可以通过 terminal 命令查看。

    clipboard.png

  • 补充说明:以下是 mongoose 的所有合法 SchemaTypes:
    常见的 String , Number , Date , Buffer , Boolean , Array ,
    Mixed: 一个啥都可以放的 SchemaType,虽然便利,但也会让数据难以维护,
    ObjectId:指定类型为 ObjectId,即“主键”,
    Decimal128:自定义的Type

四、Express 服务框架

mongoose 只是帮我们连接数据并进行读写,还需要启动一个服务框架,这个框架封装了 node 的 http 服务。
  • 安装 express

    $ npm install express --save-dev
  • 创建 express.js 应用Demo,启动服务接口

    /*
     express.js: 引入 express 模块,设置路由
    */
    var express = require('express')()
    
    express.get('/',function (request, response) { // 路由
      response.send("hello world!") // 传送HTTP响应
    })
    express.listen(3000) //监听3000端口,默认localhost: 127.0.0.1 || 0.0.0.0

    运行$ node express.js 后打开浏览器输入 http://localhost:3000/

clipboard.png

五、完成一个表单提交

三四步骤完成后思路会清晰起来,现在只需要建立一个表单,提交数据到 express 提供的接口,express 接收到请求后通过 mongoose 访问数据库
  • express.js 导入 mongoose 模块,

    /*
      mongoose.js: 导出模块
     */
    module.exports = {mongoose,User}
    
    /*
      express.js: 引入 mongoose
     */
    var {mongoose, User} = require("./mongoose")
    

    *支持ES6需要

    $  npm install babel-core --save-dev
  • 在express.js中创建一个请求数据的路由/接口

    /*
      express.js: 使用 mongoose 建立接口,添加数据到 MongoDB
     */    
    express.get("/addUser",function (request, response) {
      let data = {
        name: request.query.myinput
      }
      console.log(data)
      var addUser = new User(data)
      addUser.save()
      response.send(JSON.stringify(data))
    })
  • 新建一个html,向 http://127.0.0.1:3000/addUser 发送 get 请求,提交数据。

    <!-- index.html -->
    <form action="http://127.0.0.1:3000/addUser" method="GET">
        <h1>随便输入:</h1>
        <input type="text" name="myinput">
        <input type="submit" value="Submit">
    </form>
  • 运行$ node express.js 打开 index.html 文件:
    clipboard.png

    成功存储:
    clipboard.png

    在 adminMongo 中查看:
    clipboard.png

六、模板引擎与视图渲染

问题:html请求为什么带url和端口? 如何将html也放在 http://127.0.0.1:3000/ 地址下进行访问?
  • 所有的应用框架都需要使用引擎才能将视图渲染输出为HTML!express 官网上默认模板引擎 jade,express 4+ 用 ejs,也可以自定义模板引擎进行视图渲染
  • 安装模板引擎 ejs

    $  npm i ejs --save-dev
  • 配置模板引擎,使用我们习惯的 html 类型的模板代替 ejs

    /*
     express.js: 配置引擎
    */
    express.set('views', './views'); // 添加视图路径
    express.engine('html', require('ejs').renderFile); // 将EJS模板映射至".html"文件
    express.set('view engine', 'html'); // 设置视图引擎
    
  • 配置路由与渲染的模板

    /*
     express.js: 配置引擎
    */
    express.get('/view', function (request, response) {
      response.render('test')
    })
  • 新建 views 文件夹与 test.html

    /*
     views/test.html
    */
    <h1>使用了模板引擎,可以直接看到我!</h1>
    <form action="/addUser" method="GET">
        <h1>随便输入:</h1>
        <input type="text" name="myinput">
        <input type="submit" value="Submit">
    </form>
  • 打开浏览器访问:http://127.0.0.1:3000/view

    clipboard.png

  • 注意此时数据的提交路径是 “/addUser” ,没有地址和端口号,数据也可以提交。

总结

  • 整体的目录结构如下:
    clipboard.png
  • 整个流程下来,可以直接复制代码跑一下,但要知道每个步骤需要做什么,最重要的是思路,其他的都是工具。

加油哦~ 少年!


http://www.niftyadmin.cn/n/837262.html

相关文章

一项很有生命力的技术(Ajax)

Ajax(Asynchronous JavaScript and XML&#xff0c;异步JavaScript和XML)是目前很新的一项网络应用技术。确切的说&#xff0c;Ajax不是一项技术&#xff0c;它是一组技术的集合&#xff0c;它能使浏览器为用户提供更为自然的浏览体验&#xff0c;就像在使用桌面应用程序一样。…

Plaid.com的监控系统如何实现与9600多家金融机构的集成

金融技术企业Plaid.com已实现与9600多家金融机构的集成&#xff0c;从这些机构获取并处理数据供企业后期使用。由于集成的异构本质以及所集成机构的数量&#xff0c;并且同一度量在不同的集成可能会有不同的解释&#xff0c;需要报警的度量也不同&#xff0c;所以实现监控集成是…

营销型网站对网站所提供的优化方案包括哪些?

1、网站栏目及内容优化 2、网站结构及布局优化 3、搜索引擎收录优化 4、搜索引擎点击率优化

【火炉炼AI】机器学习002-标记编码方法

【火炉炼AI】机器学习002-标记编码方法 (本文所使用的Python库和版本号: Python 3.5, Numpy 1.14, scikit-learn 0.19, matplotlib 2.2 ) 监督学习中的标记的形式有各种各样&#xff0c;比如对于人脸识别的标记&#xff0c;可能是[“小红”&#xff0c;“小花”&#xff0c;“翠…

营销型网站技术与营销的关系

摆在我们面前的一个很重要的问题&#xff0c;营销型企业网站是以营销为导向&#xff0c;而技术是一个什么样的地位与角色&#xff0c;在营销型企业网站整体体系中技术是基础&#xff0c;同时技术也是支持营销型网站实现营销目标的一个不可或缺的重要因素。以营销为导向的营销型…

用Python写算法 | 蓄水池算法实现随机抽样

现在有一组数&#xff0c;不知道这组数的总量有多少&#xff0c;请描述一种算法能够在这组数据中随机抽取k个数&#xff0c;使得每个数被取出来的概率相等。 如果这组数有n个&#xff0c;那么每个数字取到的概率就是k/n&#xff0c;但是这个问题的难点在于不知道这组数的总数&a…

营销型企业网站与现在的企业网站核心区别

传统网站都是甲方要求做什么网站&#xff0c;然后向乙方提供相关的产品、图片、文字等相关资料&#xff0c;然后由乙方进行规划、设计&#xff0c;页面上来个漂亮的FLASH&#xff0c; 栏目一般设置为公司简介、新闻中心&#xff0c;产品中心、销售网络、 工程案例、联系我们等栏…

MS SQL 监控错误日志的告警信息

原文:MS SQL 监控错误日志的告警信息SQL Server的错误消息&#xff08;Error Message&#xff09;按照消息的严重级别一共划分25个等级&#xff0c;级别越高&#xff0c;表示严重性也越高。但是如果你统计sys.messages,你会发现&#xff0c;实际上只有16&#xff08;SQL SERVER…

做营销型网站需要考虑的问题

我们知道搜索引擎收录的信息量是以网页数为单位的,被收录的每一个网页都有被用户发现的机会,也只有被搜索引擎收录才能获得搜索引擎推广的机会。因此,通过增加网站内容而实现网站推广的策略,本质上仍然是搜索引擎推广方法的一种具体应用形式,应服从于搜索引擎营销的一般原…

深度解析丨秒懂nova3手机上超酷炫的AR应用及开发

此前在HUAWEI nova3发布会中&#xff0c;相信大家都已经感受到了AR能力带来的惊喜&#xff1a; 现实场景召唤圣斗士&#xff0c;随时随地交流合影&#xff1a; 点击观看视频&#xff1a;https://v.qq.com/x/page/m1344f6bzpj.html 三大电商平台&#xff08;京东、苏宁、天猫&am…

洛谷——P2071 座位安排 seat.cpp/c/pas

P2071 座位安排 seat.cpp/c/pas 题目背景 公元二零一四年四月十七日&#xff0c;小明参加了省赛&#xff0c;在一路上&#xff0c;他遇到了许多问题&#xff0c;请你帮他解决。 题目描述 已知车上有N排座位&#xff0c;有N*2个人参加省赛&#xff0c;每排座位只能坐两人&#x…

卡漫绘图

头像&#xff1a; 正常、惊讶、高兴、愤怒、忧郁、哭泣 转载于:https://www.cnblogs.com/maoriaty/p/9441087.html

[转] C# 隐藏方法和重写方法

1&#xff1a;方法重写&#xff1a;就是在基类中的方法用virtual关键字来标识&#xff0c;然后在继承类中对该类进行重写 &#xff08;override&#xff09;&#xff0c;这样基类中的方法在子类中已经被重写了&#xff0c;基类中的方法在子类中已经失去了功能 了。当让基类的对…

oracle ora-01002

背景&#xff1a;用PL/SQL Devloper调试存储过程&#xff0c;修改存储过程之后再次测试就报ORA-1002这个错fetch out of sequence 解决&#xff1a;关闭该测试窗口&#xff0c;重新点TEST&#xff0c;OK啦。这个错有点莫名奇妙&#xff01;转载于:https://www.cnblogs.com/luhp…

RAP + MOCK

前后端分离式开发的思考 目前大部分公司都实行了前后端分离开发。然而在项目开发过程当中&#xff0c;经常会遇到以下几个尴尬的场景&#xff1b; 1、前端开发依赖于后端接口数据&#xff0c;需要与后端接口联调才能获得数据展示&#xff0c;从而拖慢了开发进度&#xff1b; 2、…

队列(first in first out )

队列是遵循first in first out 原则的一组有序队列&#xff0c;队列从尾部添加新元素&#xff0c;从顶部移除元素&#xff0c;最新添加的元素必须排在队列的末尾。 1.创建队列 我们通过创建自己类来创建队列&#xff0c;先从最基本的声明开始&#xff1a;function Queue() {这里…
最新文章