1. 程式人生 > >nodejs之express框架

nodejs之express框架

app.use(express.static(path.resolve(__dirname,"public")))常量配置結束之後,我們就可以在 ejs檔案中引入 script 標籤;在專案目錄下建立結構:        public              /scripts                       /app.js在模板中就可以引入該scripts標籤,去關聯app.js。<script src=“public/scripts/app.js">前端渲染和後端渲染(伺服器端ssr)哪個更快? 哪個更好?  你知道他的經營模式麼?好了,那你知道那個快了麼?你知道京城一鍋的限制麼?好了,那你知道前後端頁面渲染的區別了麼?Express 簡介及安裝
官網
開發環境搭建          Yarn add babel-cli babel-preset-env express -D 需要用到es6所以用到babel去進行解析;          建立 .babelrc                 {                    "preset":"env"                }配置 scripts 指令:"start":"nodemon --exec babel-node index.jspackage.json 配置詳情:{    "name": "express",    "version": "1.0.0",    "main
": "index.js",    "license": "MIT",    "devDependencies": {        "babel-cli": "^6.26.0",        "babel-preset-env": "^1.6.1",        "express": "^4.16.3",        "morgan": "^1.9.0"    },    "scripts": {        "start": "nodemon --exec babel-node index.js"    },    "dependencies": {        "ejs": "^2.5.7
"    }}模板模板,及解析引擎設定;app.set("views", path.resolve(__dirname, "views"))app.set("view engine", "ejs")前端模板 VS 後端模板SEO優化爬蟲可以爬到後端模板;後端模板可以對資料進行動態操作;路由(get方法的使用)路由的使用當路徑發生改變時引入對應檔案:express.get("/", (req, res) => {    res.render("index.ejs", { name: "hello wrold" });})express.get("/search", (req, res) => {    res.render("search.ejs");})當路由進行拆分時需要將express進行替換;const router = express.Router();router.get("/", (req, res) => {    res.render("index.ejs", { name: "hello wrold" });})router.get("/search", (req, res) => {    res.render("search.ejs");})最後將 router 暴露出去。Tip:除了 get引入JS檔案 (static方法的使用)  Tip : 因為後臺的資料返回是以路由為核心的, 所以很多路由解決不了的問題,比如模板內部的script引入應該如何處理那?引入常量路徑:EJS如果想要了解更多請點選:EJS github文件EJS流程控制標籤:<% %> 流程控制標籤;<%= %> 輸出標籤(原文輸出html標籤)<%- %> 輸出標籤(html會被瀏覽器解析)<%# %> 註釋標籤% 對標記進行轉義include<%- include(“ejs路徑”,”傳入引數") %>解析瀏覽器傳入後端的資料(bodyParser)Yarn add body-parser -D在核心入口檔案中配置對應資料:app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:false}));在 get|post|all 方法的回撥函式 request 中找到 body 中資料對應的屬性。404頁面的配置app.use((req,res,next)=>{    let err = new Error("not found");    err.status = 404;    next(err);})app.use((err,req,res,next)=>{    //全域性變數;    res.locals.message = err.message;    res.locals.error = err;    res.status(err.status || 500);    res.render("error.ejs");})express小技巧app.get('/public/:id', function (req, res, next) {})當路由中存在這樣的路徑的時候,  :id 代表任意值 , 可以在req.params.id 中進行獲取。Express 專案構建:個express 的 cli ,點選檢視github github安裝 express cli                  $ yarn global add express-generator然後建立app                $ express --view=ejs  分頁