动态⽹⻚制作 授课: 陈华容 蒋宏宇(助教)

先修课程 • HTML5 ⽹⻚制作 • Javascripts脚本开发 • ⽹络程序设计 • 数据库相关开发知识

课程简介 • 讲解⽬前较为流⾏的服务器环境及构建⽤户界⾯⽹ ⻚开发框架。 • 使被授能够掌握数据驱动的服务程序开发和基于框 架的前端开发。 • 并通过动态⽹⻚的制作过程，使学⽣⼊⻔全栈开发。

开发环境

• Server: Node.js + Express.js

• Client: Node.js + VUE.js

• Database: MongoDB

• Dev. Env.: Visual Studio Code Node.js

• Node.js 是⼀个基于 Chrome V8 引擎的 JavaScript 运⾏环 境。  • 常⻅的Javascript脚本只能运⾏在客户机上，Node.js 为服 务器运⾏Javascript提供了解决⽅案 Express.js

• Express 是⼀个简洁⽽灵活的 Node.js Web应⽤框架 • 简单的⼏⾏代码就能构建轻量级Web服务器 var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081) • MongoDB 是是⼀个基于分布式⽂件存储的开源数据库系统。

• MongoDB 将数据存储为⼀个⽂档，数据结构由键值(key=>value) 对组成。MongoDB ⽂档类似于 JSON 对象。字段值可以包含其他 ⽂档，数组及⽂档数组。

VUE.js • Vue 是⼀套⽤于构建⽤户界⾯的渐进式框架。 • 简单的进⾏数据绑定

var app = new Vue({ el: ‘#app', data: { message: 'Hello Vue!’ })

环境配置 • 安装Node.js Visual Studio Code • 安装需要使⽤的包 npm -i • 在VSC上进⾏应⽤的构建

课程⽬标 课程完成后，被授理应： 1. 熟悉服务器程序运⾏机制。 2. 基于开发框架构建服务程序。 3. 基于开发框架独⽴构建⽤户界⾯。 课程考核 使⽤教授的技术实现简单的⽹络应⽤程序例如： 轻博客，数据管理器，可视分析系统等。根据学⽣项 ⽬完成度，复杂度，技术覆盖度对其进⾏综合打分。

Part 1. 环境配置 • Node.js https://nodejs.org/en/ 选择8.12下载安装 • VSC https://code.visualstudio.com/docs/?dv=win64user • MongoDB https://www.mongodb.com/download-center/ community

Part 2. Node.js • 创建第⼀个应⽤ https://www.runoob.com/nodejs/nodejs-httpserver.html • Node.js 函数 https://www.runoob.com/nodejs/nodejsfunction.html • Node.js ⽂件系统 https://www.runoob.com/nodejs/nodejs-fs.html • Node.js GET/POST请求 https://www.runoob.com/nodejs/node-jsget-post.html • Node.js Web 模块 https://www.runoob.com/nodejs/nodejs-webmodule.html

Part 3. Express.js • Express.js https://www.runoob.com/nodejs/nodejs-expressframework.html • Restful API https://www.runoob.com/nodejs/nodejs-restfulapi.html

Part 4. MongoDB • NoSQL 简介 http://www.runoob.com/mongodb/nosql.html • MongoDB 连接操作 https://www.runoob.com/nodejs/nodejsmongodb.html

Part 5. VUE.js (1) • VUE 简介 http://www.runoob.com/vue2/vue-tutorial.html • VUE 安装 http://www.runoob.com/vue2/vue-install.html • VUE 起步 http://www.runoob.com/vue2/vue-start.html • VUE 模板 http://www.runoob.com/vue2/vue-templatesyntax.html

Part 6. VUE.js (2) • VUE 事件处理 http://www.runoob.com/vue2/vue-events.html • VUE 路由 http://www.runoob.com/vue2/vue-routing.html • VUE 起步 http://www.runoob.com/vue2/vue-start.html • VUE 模板 http://www.runoob.com/vue2/vue-templatesyntax.html • VUE 实例 http://www.runoob.com/vue2/vue-examples.html

Part 7. 构建⼀个数据驱动的应⽤(1) • VUE + Express http://blog.qianduanchina.cn/post/ 59704d0f7838a71273eb4da9 • Express + Mongo https://segmentfault.com/a/ 1190000009336888 • VUE+Express+Mongo 博客 https://github.com/467658159/ vue-express-mongodb-blog

Part 8. 构建⼀个数据驱动的应⽤(2) • VUE+Express+Mongo 博客 https://github.com/467658159/ vue-express-mongodb-blog • VUE+Express+Mongo 可视化 https://github.com/ HongyuJiang/changhong_healthcare

Part 9. 构建⼀个⾃⼰的应⽤