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

資訊專欄INFORMATION COLUMN

前端小白的全棧初體驗(yàn)

wangym / 3237人閱讀

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

原文來(lái)源： 全棧初體驗(yàn)

前言

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

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

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

默認(rèn)電腦已安裝nodejs,yarn或者npm,MongoDB

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

cd infoSave 

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

yarn add mongoose  // 安裝 mongoose，不需要安裝jade，express-generator自動(dòng)安裝了
中期

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}

這兩個(gè)jade是我們 / 和 /showInfo 兩個(gè)路由所渲染的頁(yè)面

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文件夾新建一個(gè)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;
}

此時(shí) yarn start 會(huì)發(fā)現(xiàn) localhost:3000 可以加載
localhost:3000/showInfo 會(huì)報(bào)錯(cuò)，
因?yàn)槲覀冞€沒(méi)有進(jìn)行數(shù)據(jù)的交互

后期

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

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

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

// 導(dǎo)出InfoSchema模式
module.exports = InfoSchema;

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

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

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

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

app.js文件添加

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

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

結(jié)語(yǔ)

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

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

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

相關(guān)文章

  • 前端小白的全棧初體驗(yàn)

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

    Jioby 評(píng)論0 收藏0

  • 前端小白的全棧初體驗(yàn)

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

    PumpkinDylan 評(píng)論0 收藏0

  • Vue+Express+Mysql 全棧初體驗(yàn)

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

    econi 評(píng)論0 收藏0

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

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

    hiyayiji 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<