先後端不分離

一、先後端合做方式

一、先後端不分離 --- 周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')%>