前端小白的全棧初體驗

原文來源： 全棧初體驗

前言

聽說如今不會點後臺的前端都找不到工做了
嚇得我這幾天看起了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}
       &nbsp&nbsp&nbsp&nbsp
       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?