国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端小白的全棧初體驗

Jioby / 1462人閱讀

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

原文來源： 全棧初體驗

前言

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

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

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

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

前期 
yarn add express-generator  // 
express infoSave  // 創建生成 express 項目

cd infoSave 

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

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

cd views
將 index.jade 文件內容修改為

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 會發現 localhost:3000 可以加載
localhost:3000/showInfo 會報錯，
因為我們還沒有進行數據的交互

后期

在 infoSave 目錄下，創建兩個文件夾
schemas文件夾存放數據庫集合的模型骨架
models文件夾存放Schema構造實例進行數據操作

文件夾schemas, 在里面創建文件 info.js,內容為

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

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

文件夾models，創建文件 info.js，內容為

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

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

// 將info模型[構造函數]導出
module.exports = infos;

app.js文件添加

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

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

結語

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50703.html

相關文章

  • 前端小白的全棧初體驗

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

    wangym 評論0 收藏0

  • 前端小白的全棧初體驗

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

    PumpkinDylan 評論0 收藏0

  • Vue+Express+Mysql 全棧初體驗

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

    econi 評論0 收藏0

  • 小白的全棧開發 一

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

    hiyayiji 評論0 收藏0

發表評論

0條評論

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