前后端不分离

1、前后端合作方式

1、前后端不分离 --- 周1 - 周4

类似产品jsp、php ---- 前端负责写页面，后端负责渲染

<#list>
    <li>item.title</li>
</#list>

2、前后端分离 -- 周5

前端负责写页面，请求接口数据，前端渲染 --- ajax请求数据，前端渲染

前后端分离比前后端不分离（前后端耦合，前后端传统的模式）开发周期相对较短

2、express

http://www.expressjs.com.cn/

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

--- es6以前的写法

了解 koa --- es6及以上的写法

2.1 express 创建服务器

cnpm i express -S  // 安装第三方模块express

 // code
const express = require('express'); // 引入express模块
const app = express(); // 获取到express这个创建的应用的实例

app.get('/', (req, res) => { // 定义了一个路由，get请求的
    res.send('<h1>首页</h1>') // 请求成功、设定了字符编码、res.write + res.end
})
app.get('/login', (req, res) => {
    res.send('登录')
})
app.get('/register', (req, res) => {
    res.send('注册')
})

app.listen(3000, () => {
    console.log('your server is running at http://localhost:3000')
})

虽然使用了express让服务器的设计更加的简单，但是一般我们还是不会直接使用他去写项目

3、使用express脚手架 --项目生成器

3.1 安装命令行工具

只需要安装一次即可，除非换电脑、换系统

cnpm i express-generator -g

3.2 创建项目

• express -h 查看帮助文档

express pro-name 

3.2.1 模版语法

• --jade // 默认模版 --- 学习成本高
• --ejs // 推荐使用 --- 最接近HTML

express myapp --view=ejs
cd myapp
cnpm i
cnpm run start

4、ejs

模版语言

• 如果是一个变量test ，页面中通过如下渲染 --- 在任何位置都可以哪怕你是属性

<%= test %>   // 将test变量转义输出-原样输出
<%- test %>   // 解析输出

• 如果是一个条件判断

routes/index.js 传递给前端一个数组

router.get('/', function(req, res, next) {
  res.render('index', { 
    title: '<mark>Express</mark>',
    list: ['a', 'b', 'c', 'd']  // +++++++++++++
  });
});

views/index.ejs 渲染 --- js怎么写的先怎么写，然后加标签

<% for (var i = 0; i < list.length; i++) { %>
    <p><%= list[i] %></p>
<% } %>

• 如果你是条件判断 ---- 先js再加标签

<% if (flag) { %>
    <p>如果为真我就显示</p>
<% } else { %>
    <p>如果为假我就显示</p>
<% } %>

• 如果需要导入一个模版

<%- include('./header.ejs')%>