摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台
原文来源： 全栈初体验
前言据说现在不会点后台的前端都找不到工作了
吓得我这几天看起了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
?
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111925.html
摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台 原文来源： 全栈初体验 前言 据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...
摘要：原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子，如图输入账户密码，提交表单，保存信息到数据库再重定向到页面获取数据库中的信息，渲染在浏览器上具体代码主要技术前端模板后台 原文来源： 全栈初体验 前言 据说现在不会点后台的前端都找不到工作了吓得我这几天看起了Nodejs和MongoDB并且做了一个应该算是最简单的前后...
前言 原文地址 曾几何时，你有没有想过一个前端工程师的未来是什么样的？这个时候你是不是会想到了一个词前端架构师，那么一个合格的前端架构只会前端OK吗？那当然不行，你必须具备全栈的能力，这样才能扩大个人的形象力，才能升职加薪，才能迎娶白富美，才能走向人生巅峰... 最近我在写一些后端的项目，发现重复工作太多，尤其是框架部分，然后这就抽空整理了前后端的架子，主要是用的Vue，Express，数据存储用...
摘要：前言这个是开发模式，我也写过一个前后端结合开发的完整系统项目使用创建的。后面分别针对这两个版本进行区分。前提是数据库中有这个数据最后已上传项目实战，猫眼移动端，从开始搭建完整项目 前言 这个 demo 是MVVM开发模式，我也写过一个前后端结合开发的完整系统 demo Vue项目使用vue-cil3创建的。 使用vue-cil2创建的项目也可以实现，只是配置代理服务器的时候有一点差...
阅读 2110·2021-11-24 11:16
阅读 1749·2021-09-30 09:47
阅读 1865·2021-09-10 10:51
阅读 1207·2019-08-30 14:08
阅读 3041·2019-08-30 13:47
阅读 1410·2019-08-30 13:02
阅读 3137·2019-08-29 12:29
阅读 2926·2019-08-26 17:05
