先后端不分离

一、先后端合做方式

一、先后端不分离 --- 周1 - 周4

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

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

二、先后端分离 -- 周5

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

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

二、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让服务器的设计更加的简单，可是通常咱们仍是不会直接使用他去写项目

三、使用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

四、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')%>