成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端小白的全棧初體驗

Jioby / 1489人閱讀

摘要：原文來源全棧初體驗前言據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺

原文來源： 全棧初體驗

前言

據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了
嚇得我這幾天看起了Nodejs和MongoDB
并且做了一個應(yīng)該算是最簡單的前后端例子，如圖

輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫
再重定向到 showInfo 頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上
具體代碼： github

主要技術(shù) 
前端模板： jade
后臺框架： express-generator
數(shù)據(jù)庫連接： mongoose

默認電腦已安裝nodejs,yarn或者npm,MongoDB

前期 
yarn add express-generator  // 
express infoSave  // 創(chuàng)建生成 express 項目

cd infoSave 

yarn install  // 安裝依賴包
yarn start  // 可以到 localhost:3000 看到運行界面

yarn add mongoose  // 安裝 mongoose，不需要安裝jade，express-generator自動安裝了
中期

cd views
將 index.jade 文件內(nèi)容修改為

extends layout
block content
  h1= title
  p Welcome to #{title}
  form(method="post", action="/")
    babel(for="user") 用戶名
      input(type="text",name="user",id="user")
    br
    babel(for="passwd") 密碼
      input(type="password",name="passwd",id="passwd")
    br
    input(type="submit",value="提交")

touch showInfo.jade

extends layout
block content
  h1= title
  p Welcome to #{title}
  ul
   each info, i in infos
     li
       span.user 賬戶： #{info.user}
           
       span.passwd 密碼： #{info.passwd}

這兩個jade是我們 / 和 /showInfo 兩個路由所渲染的頁面

cd index.js
修改為

router.get("/", function(req, res, next) {
  res.render("index", { title: "infoSave" });
});

添加

router.get("/showInfo", function(req, res, next) {
  infos.find({}, function(err, docs){
    if(err) {
      res.render("showInfo", { title: "showInfo" });
    }else {
      res.render("showInfo", {
      title: "showInfo",
      infos: docs
    });
    }
  });

public文件夾中的stylesheets文件夾新建一個css文件form.css

form {
  width: 300px;
  height: 300px;
}

babel {
  display: block;
  font-size: 20px;
}

input:not([type="submit"]) {
  box-sizing: border-box;
  padding: 5px;
  width: 200px;
  font-size: 15px;
  float: right;
}

input[type="submit"] {
  float: right;
  width: 100px;
  padding: 5px;
  background: #79f;
  cursor: pointer;
  font-size: 15px;
}

此時 yarn start 會發(fā)現(xiàn) localhost:3000 可以加載
localhost:3000/showInfo 會報錯，
因為我們還沒有進行數(shù)據(jù)的交互

后期

在 infoSave 目錄下，創(chuàng)建兩個文件夾
schemas文件夾存放數(shù)據(jù)庫集合的模型骨架
models文件夾存放Schema構(gòu)造實例進行數(shù)據(jù)操作

文件夾schemas, 在里面創(chuàng)建文件 info.js,內(nèi)容為

let mongoose = require("mongoose");
let InfoSchema = new mongoose.Schema({
  user: String,
  passwd: String
})

// 導出InfoSchema模式
module.exports = InfoSchema;

文件夾models，創(chuàng)建文件 info.js，內(nèi)容為

let mongoose = require("mongoose");
let infoSchema = require("../schemas/info.js"); //引入"../schemas/info.js"導出的模式模塊

// 編譯生成info模型
let infos = mongoose.model("userInfo", infoSchema);

// 將info模型[構(gòu)造函數(shù)]導出
module.exports = infos;

app.js文件添加

// 連接MongoDB中的 infoDB 數(shù)據(jù)庫，若沒有則自動生成
var mongoose = require("mongoose");
mongoose.connect("mongodb://127.0.0.1:27017/infosDB");

到此，我們的工程結(jié)束了，
yarn start試試看，記得先開啟MongoDB

結(jié)語

啊，有一種搬代碼，沒有寫教程的感覺
第一次自己搭建運行前后端環(huán)境，真是愉悅呀
歡迎私信交流，也可以看我博客cheesekun.top
?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50703.html

相關(guān)文章

  • 前端小白的全棧初體驗

    摘要：原文來源全棧初體驗前言據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺 原文來源： 全棧初體驗 前言 據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應(yīng)該算是最簡單的前后...

    wangym 評論0 收藏0

  • 前端小白的全棧初體驗

    摘要：原文來源全棧初體驗前言據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了和并且做了一個應(yīng)該算是最簡單的前后端例子，如圖輸入賬戶密碼，提交表單，保存信息到數(shù)據(jù)庫再重定向到頁面獲取數(shù)據(jù)庫中的信息，渲染在瀏覽器上具體代碼主要技術(shù)前端模板后臺 原文來源： 全棧初體驗 前言 據(jù)說現(xiàn)在不會點后臺的前端都找不到工作了嚇得我這幾天看起了Nodejs和MongoDB并且做了一個應(yīng)該算是最簡單的前后...

    PumpkinDylan 評論0 收藏0

  • Vue+Express+Mysql 全棧初體驗

    前言 原文地址 曾幾何時，你有沒有想過一個前端工程師的未來是什么樣的？這個時候你是不是會想到了一個詞前端架構(gòu)師，那么一個合格的前端架構(gòu)只會前端OK嗎？那當然不行，你必須具備全棧的能力，這樣才能擴大個人的形象力，才能升職加薪，才能迎娶白富美，才能走向人生巔峰... 最近我在寫一些后端的項目，發(fā)現(xiàn)重復(fù)工作太多，尤其是框架部分，然后這就抽空整理了前后端的架子，主要是用的Vue，Express，數(shù)據(jù)存儲用...

    econi 評論0 收藏0

  • 小白的全棧開發(fā) 一

    摘要：小白的全棧開發(fā)一簡介從新手的角度對有了解，對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關(guān)于怎么搭建全棧的文章，部分可能有借鑒。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經(jīng)歷，并記錄我的畢設(shè)進度逃。 小白的全棧開發(fā) 一 簡介 從新手的角度（對vue有了解，對Koa和Express有了解。）從0開始搭建一個通過RESTful API提供數(shù)據(jù)，vue組成的單頁面的...

    hiyayiji 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<