前端小白的全栈初体验

wangym 发布于2019-08-29 12:29 / 3210人阅读

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台

原文来源：全栈初体验

前言

据说现在不会点后台的前端都找不到工作了
吓得我这几天看起了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
?

云服务器 GPU云服务器前端体验大前端体验开发最快的全排列算法 html网页的全选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111925.html

前端小白的全栈初体验

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台原文来源：全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...

Jioby 2019-08-01 16:43 评论0 收藏0
前端小白的全栈初体验

摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台原文来源：全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...

PumpkinDylan 2019-06-26 17:14 评论0 收藏0
Vue+Express+Mysql 全栈初体验

前言原文地址曾几何时，你有没有想过一个前端工程师的未来是什么样的？这个时候你是不是会想到了一个词前端架构师，那么一个合格的前端架构只会前端OK吗？那当然不行，你必须具备全栈的能力，这样才能扩大个人的形象力，才能升职加薪，才能迎娶白富美，才能走向人生巅峰... 最近我在写一些后端的项目，发现重复工作太多，尤其是框架部分，然后这就抽空整理了前后端的架子，主要是用的Vue，Express，数据存储用...

econi 2019-08-26 13:55 评论0 收藏0
小白的全栈开发一

摘要：小白的全栈开发一简介从新手的角度对有了解，对和有了解。希望能够帮助和我一样是全栈小白的你看过很多关于怎么搭建全栈的文章，部分可能有借鉴。因为要自己独立完成，所以开始自己的全栈之旅。分享出来我的全栈经历，并记录我的毕设进度逃。小白的全栈开发一简介从新手的角度（对vue有了解，对Koa和Express有了解。）从0开始搭建一个通过RESTful API提供数据，vue组成的单页面的...

hiyayiji 2019-06-26 17:11 评论0 收藏0