三十九、node（客户端，服务端数据渲染，设计模式mvc）

前端代理解决跨域!!!

1.安装http-proxy-middleware模块
安装命令:
cnpm i http-proxy-middleware
npm i http-proxy-middleware -D
yarn add http-proxy-middleware

注意：安装过程中如果出现报错，或是安装成功后启动服务器出现红圈圈中错误可删掉node_modules目录重新安装node模块（命令：cnpm i）

2.使用 在app.js 文件中配置(引入 使用)

此处是将网页中出现跨域要请求http://kg.zhaodashen.cn的地方换成/api即前端代理请求数据。

注意: 导入模块 会因版本问题 报错, 新语法 百度

解决项目中每次调试代码都要重启服务器问题

安装nodemon模块，手动重启修改为自动重启

1、安装nodemon模块

nodemon模块安装命令

cnpm i nodemon -g
或
yarn global add nodemon

2、修改package.json

客户端，服务端渲染简介

客户端渲染 BSR（browser side render）

没数据：先在浏览器显示HTML，再发送异步请求ajax，最后通过js操作DOM显示

服务端渲染 SSR（server side render）

 有数据：先将数据库数据和页面HTML代码拼接、组成完整的HTML，再给用户

区别
表面：服务端数据渲染ssr（浏览器中查看源代码-数据在）、客户端数据渲染bsr（浏览器中查看源代码-数据 不在）

核心：服务端渲染有利于SEO优化，也就是百度搜你的网站靠前

留心：实战工作，根据产品定

服务端渲染 SSR!

一、在路由获取数据库数据

 步骤1：创建goods模型文件
 步骤2：封装create和list方法并且导出
 步骤3：路由调用方法即可（留心：旧知识点async、await

二、方法1-replace替换数据 (不推荐

HTML

<h1>^_^</h1>
<h1>!_!</h1>//静态页面上标记出来

index.js路由

router.get('/', (req, res) => {
    let html = fs.readFileSync('./views/index.html', 'utf-8')
    let data1 = 111 // 来源于数据库
    let data2 = 222 // 来源于数据库
    html = html.replace('^_^', data1)//
    html = html.replace('!_!', data2)//将页面上打的标记替换成数据库数据
    res.send(html)  
    // res.send('this is index index')
})

发现：上述代码麻烦，难维护（1-静态文件需要标记符号、2-每次替换麻烦

解决：模板引擎 原理：基于replace封装 目的：更方便加载文件、和替换数据
三、方法2-模板引擎(推荐

在express中整合art模板引擎

步骤1：安装 cnpm i art-template express-art-template

步骤2：配置 留心：修改app.js 注意位置

 app.use('/public', express.static('public')) 	      //允许静态资源被外部访问
 app.set('views', path.join(__dirname, 'views'))       //设置视图目录
 app.engine('html', require('express-art-template'))   //声明模板引擎和模板后缀
 app.set('view engine', 'html')						  //声明render渲染不需要写后缀

步骤3：测试
语法：以前 res.end() res.send() 有模板引擎之后 直接用res.render(文件名，传递的数据)
留心：render会自定将替换后的数据，响应到浏览器

■接口相关!!!

什么是接口？
就是一个文件，主要**响应JSON数据（操作方便，体积小）**或XML数据

{
  status: 1/0,
  msg: '提示信息'
}
-----
<xml>
  <status>1/0</status>
  <msg>提示信息</msg>
  ...
</xml>

只要响应json数据所有语言都可以操作，例如ios/Android等
推荐：

{
    meta: {
        msg: 提示信息,
        status: 状态码（200/201/301/302/400/401/403/404/500）
    },
    data: 数据
}

.js

.php

.json都行 只要响应json数据

接口的作用：
数据角度：让静态页面数据动态化

功能角度：短信接口、幽默笑话接口、天气接口、股票接口等

接口开发规范（Restful API）

接口可能是一个人开发，也可能多人开发，如何保证大家的编写规范一样

a 商品模块 /goods/getIndex get
b 订单模块 /order/index post
c 用户模块 /user

发现：上面这种case项目没有统一开发规则
问题：后期维护麻烦
回答：通过目前比较火的RESTful API思想/架构

• 说明：RESTful是目前最流行的一种互联网软件架构（思想）
• 作用：声明/提供了接口设计原则和约束条件（一个范围）
• • 相关：

后端将资源发布到URL上->前端通过URL访问资源->并通过HTTP动词表示要对资源进行的操作
后端定义接口->前端请求接口->HTTP动词表名操作目的（get获取post新建put更新等）

• 举栗

列表页：访问 - /模块名 （get）
详情页：访问 - /模块名/编号 （get）
添加页：访问 - /模块名/create （get）
处 理：访问 - /模块名 （post）
修改页：访问 - /模块名/编号/edit（get）
**处 理：访问 - /模块名/编号 （put） **
删 除：访问 - /模块名/编号 （delete）

HTTP动词：get、post、put、delete

• 好处：统一开发规范，便与团队协作开发

明确需求

发现：上面SSR操作数据代码存在冗余

1 指连接数据库缺少封装
2 接口响应的格式缺少封装
3 路由有大量模型操作 后期路由越来越来   从app.js提取到routes目录失去意义
等

明确：项目越大，如果没有统一开发规范（例如命名规范等）后期开发会越来越难维护

解决：通过行业成熟的 开发模式/架构模式/开发思想 MVC、RMVC

2、MVC介绍

什么是设计模式：查看

设计模式：前辈的开发经验总结的开发思想

思想好处：1-便于维护，2-增强代码重用性，减少代码冗余等

---

什么是MVC / MVC模式 / MVC思想 / MVC架构：是软件中常见的一种开发架构模式（概括开发规则）

M model 让你搞一个目录单独存放模型文件 一般叫 model

V view 让你搞一个目录单独存放视图（静态文件）文件 一般叫views （注：接口开发忽略）

C controller 让你搞一个目录专门写逻辑代码 而不是 全部放到 router 目录中

3、按照MVC架构模式初始化目录（CV

a 初始化创建接口项目

a 创建jxshop2api项目通过express脚手架工具 【express jxshop2api】
b 进入目录、安装模块【cd jxshop2api 接着 yarn install】

b 封装全局函数&配置文件

创建文件1：common/config.json

{
	"db_config":{
		"host" : "localhost",
		"port" : 27017,
		"dbname" : "jxshop"
	}
}

yarn add mongoose 或者 cnpm i mongoose

创建文件2：common/db.js

// 导入模块
const mongoose = require('mongoose');
// 导入配置文件
const configObj = require(process.cwd() + "/common/config.json").db_config

// 连接数据库
const db = mongoose.createConnection(`mongodb://${configObj.host}:${configObj.port}/${configObj.dbname}`, {useNewUrlParser: true, useUnifiedTopology: true}, (err)=>{
    if(err){
        console.log('---------------------------------------')
        console.log('数据库连接失败：', configObj)
        console.log('---------------------------------------')
        return;
    }
    console.log('数据库连接成功');
})

// 声明全局变量
global.db = db

创建文件3：common/utils.js

// http协议状态码（背 明晚抽查 说不出来30遍）
// 2XX  成功
// 		200-成功    正常返回     （服务器已成功处理了请求）     
// 		201-创建    成功创建数据 （表示服务器执行成功，并且创建了新的资源）     
// 		202-已接受              （服务器接受请求，但未处理）
// 3XX  重定向（服务器返回信息告知浏览器如何做后续操作才能成功处理请求）
//      301-永久（新网站）
//      302-临时（站内跳转）
//      304-浏览器缓存（请求成功检测为修改数据来源于浏览器）
// 4XX  客户端错误（客户端原因，妨碍了服务器的处理）
//      400-前端请求失败，方式参数不对
//      401-未通过 HTTP 认证的认证信息（场景：网页登录失败）
//      403-禁止访问（码云私有仓库）
//      404-文件不存在
//      405-请求方法有误 
// 5XX  服务端错误
//		500-服务器端在执行请求时发生了错误
//		503-服务器过载，无法处理请求
// -------------------------------
/**
 * 接口响应
 * @param {Object} res      响应对象
 * @param {Number} code     状态码
 * @param {String} message  提示信息
 * @param {mixed}  data     响应数据
 */
global.sendJson = (res, code, message, data = null) => {
    res.json({
        "meta" : {
            "state" : code,
            "msg" 	: message
        }, 
        "data" : data
    });
}

修改app.js导入

require(process.cwd() + "/common/db.js")
require(process.cwd() + "/common/utils.js")

c 创建用户模型（M

models/users.js

const model = db.model('users',{
	uname:{type:String, default:"匿名者"},
	pwd:{type: String},
	sex:{type:String, default: '女'},
	age:{type:Number, default: 18}
})

// 封装方法


// 导出
module.exports = {
    
}

e 创建controller控制器目录（C

作用：将routes中的逻辑代码 放到 controller目录下

好处：routes中的会变得干净 一看就知道这里面有几个路由

规则

之前 服务端渲染 路由直接调用模型

现在 客户端渲染 写接口 路由调用 -> 控制器controller -> 模型model

​ 将路由里面的代码封装到控制器

1 先定义路由，响应 hello （留心：不要路由直接返回 而是路由调用控制器 控制器返回

2 修改模块，路由调用控制器、控制器调用模型 、返回json数据

4、用户列表接口

5、用户登录接口

6、用户注册接口