zoukankan      html  css  js  c++  java
  • 博客管理与文章发布系统-第三方模块及其用法Part1

    写个帖子记录一下自己写的第一个express完整项目。

    所需第三方模块及其用法。

    一.先把所需文件和准备工作写一下

    写项目前的准备

    1.创建所需文件夹 public 静态资源
    model 数据库操作
    route 路由
    views 模板

    2.初始化项目描述文件
    npm init -y

    3.下载第三方模块
    npm install express mongoose  express的数据库处理模块

    art-template 模板模块

    express-art-template. express的模板渲染模块 

    二.第三方模块

    1.express创建服务器初始化

     // 引用框架
     const express = require('express');
      // 创建网站服务器
      const app = express();
      // 数据库连接
      require('./model/connet.js');
      // 监听端口
      app.listen(80);
     
     

    express引擎下面有3个接收请求的方法:

    1.app.get

    app.get('/', (req, res) => {
        // send()
        // 1.send内部会检测响应内容的类型
        // 2.会自动帮我们设置HTTP的状态码
        // 3.自动设置响应内容的编码
        res.send('Hello Express');
    })

    app.get('/request', (req, res, next) => {
        req.name = '张三';
        next();
    })

    这里如果回调函数中再加入一个next的话,可以把请求传给下一个中间件处理,为了更好理解,后面将再举一个例子。

    2.app.use接收所有类型的请求

    例:

    app.use('/admin', (req, res, next) => {
        // let isLogin = false;
        let isLogin = true;
        if (isLogin) {
            // 如果登录了让请求继续向下执行
            next();
        } else {
            // 如果没有响应一个结果
            res.send('您还没有登录 不等访问admin这个页面')
        }
    })

    当我们拦截了请求之后,我们还想让后面的中间件继续处理这个请求,我们可以用next,但是用之前一定要先传入next

    3.app.post

    const bodyParser = require('body-parser');
    //拦截所有请求
    app.use(bodyParser.urlencoded({extended: false}));
    //再内部用系body-parser方式来处理post请求参数
    //如果true方法内部用第三方模块qs来处理请求参数
    app.post('/add', (req, res) => {
        res.send(req.body);
        // req.body为bodyparser在req中添加的属性
    })

    express为我们提供了req.query方法处理get请求参数。(网上说是nodejs自带的方法,可是我在没有express的文件中使用发现值为undefined=。=)

    2.模板引擎art-template与express-art-template

    先在项目的目录下创建一个名为views的文件夹

    // 告诉express框架模板所在的位置
    app.set('views', path.join(__dirname, 'views'));
    //告诉express模板的默认后缀
    app.set('view engine', 'art');
    //告诉express渲染后缀为art时,使用的渲染引擎是什么
    app.engine('art', require('express-art-template'));

    a.日期转换模块dataFormat

    在模块下有template.defaults.imports.xxx=xxx(其中xxx为想要加入到模板中的方法,在模板中可以直接使用了);

    //导入dateformat第三方模块
    //要对模板引擎进行配置向外部开放变量,在模板内部才能调用该方法
    const dateFormat = require('dataformat');
    //导入art-template
    const template = require('art-template');
    //向模板内部导入dataformat变量
    template.defaults.imports.dateFormat = dateFormat;
    //开放静态资源文件
    app.use(express.static(path.join(__dirname, 'public')));

    开放静态资源文件,当接到需要静态资源的请求时,自动返回相应的静态资源,括号内为文件所在的上级目录,由于app.js处于顶级目录,而静态资源都存放在public里面所以这么写。

    此时需要注意的是,当我们返回模板的时候,里面外链的css和img的路径还是相对路径例如:

    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/base.css">

    此时的路径是相对路径,但不一定会报错(请求地址与静态文件所在的目录相同的情况下)

    假设我们当前的请求路径是/admin/login,而css的路径/blog/public/admin/css/bass.css的话,绝对路径和相对路径的结果是相同的,但如果我们的请求路径改变的话,就无法完成静态资源的渲染了,

    所以在这里我们把css的地址改一改

    <link rel="stylesheet" href="/admin/css/base.css">
  • 相关阅读:
    iOS使用Charles(青花瓷)抓包并篡改返回数据图文详解(转)
    iOS 9 添加白名单
    iOS 中字体的应用(转)
    iOS 后台操作的开发(转)
    iOS 知识点大总结(转)
    在Xcode中找中文字符串(正则表达式)
    block 使用时的注意点(转)
    xcode armv6 armv7 armv7s arm64 (转)
    使用Android studio过程中发现的几个解决R变红的办法
    折腾了一晚上的“equals”和“==”
  • 原文地址:https://www.cnblogs.com/dokom666/p/12943964.html
Copyright © 2011-2022 走看看