2

用node.js和mongDB建立网站

参考资料:
1.jade学习https://www.jianshu.com/p/e2a...
http://www.nooong.com/docs/ja...
2.app.js的结构设计(作用)http://www.cnblogs.com/scottj...
视频参考:https://www.imooc.com/video/1091

  • 工具选取

1.首先介绍需要的开发框架

clipboard.png

2.前端工具

clipboard.png

2.本地开发环境

clipboard.png

  • 开发步骤

clipboard.png

  • 原型图

    前端:

clipboard.png

后台:

clipboard.png

Node入口文件分析和目录初始化

  • 首先是项目结构初始化

clipboard.png

  • 编写入口文件

    引用express,实例出一个web服务器,监听端口,获取来自这个端口的请求

clipboard.png

  • 创建文件夹

clipboard.png

  • 测试可访问性

clipboard.png

创建四个jade视图及入口文件

  • 创建文件夹

clipboard.png

viwe文件夹里放视图模板        app.js

clipboard.png

安装依赖、编写入口文件

clipboard.png

  • app.js

clipboard.png

可以在命令行里改变port的值
clipboard.png

  • 在view里写jade模板

clipboard.png

注意完善app.js,不然无法访问
clipboard.png

这样就把前台请求跑通了

clipboard.png

伪造模板数据跑通前后端交互流程

  • 调整view文件夹,方便修改,模板的建立

view文件夹结构
clipboard.png

layout.jade编写
clipboard.png

header.jade编写(就是网站标题什么的)
clipboard.png

head.jade编写(网站的引用什么的比如JQ)

在安装bootstrap和jq前要先安装bower
clipboard.png
clipboard.png
安不上也没关系

clipboard.png

建立page页面

  • index.jade

clipboard.png

  • detail.jade

clipboard.png

  • admin.jade

clipboard.png

clipboard.png

  • list.jade

!clipboard.png

伪造数据

app.js加入
clipboard.png

假数据测试app.js
clipboard.png
clipboard.png
clipboard.png
clipboard.png
clipboard.png

  • 测试

clipboard.png

clipboard.png

clipboard.png

mongodb模式模型设计及编码

  • windows下安装mongodb以及node.js连接mongodb

https://www.cnblogs.com/star-...

安装完成后要设置环境变量才能运行MongoDB
如何设置环境变量?

clipboard.png

我的电脑-右键属性-高级系统设置-高级-环境变量

测试运行MongoDB

输入以下代码查看MongoDB版本号

mongod -v

在PATH里的npm环境变量后面加个分号; 然后加上刚才所安装的路径 D:MongoDBbin 确定后就安装完毕了。

  • 设计数据库模型

clipboard.png

数据库字段定义
clipboard.png

传入模式编译,生成构造函数
clipboard.png

  • 文档实例化,调用模型

clipboard.png

批量查询

clipboard.png

单条数据的查询
clipboard.png

单条数据的删除
clipboard.png

  • 数据库的正删改查,及后台开发逻辑

文件目录
clipboard.png


FengNianya
137 声望17 粉丝

数字媒体技术本科