模块/插件

express 前端 web 模块
path 路径核心模块
art-template 模版引擎（express-art-template 的依赖所以必须安装）
express-art-template 模版引擎 (视觉效果模板子模板模板继承)
body-parser 中间件(解析表单 post 请求体)
mongoose 数据库链接
bootstrap@3 css 页面开发场景
jquery js 框架
blueimp-md5 密码加密
npm install express-session
vue 常用 1-6 使用点看 vue-day5 7 使用点看 vue-day6 8 使用点看 vue-day7 （在 vue 中安装插件尽量使用 cnpm）
- 1.webpack@3.12.0 项目构建工具
- 2.webpack-dev-server@2.9.3 自动打包
- 3.html-webpack-plugin 把 html 打包在内存
- 4.样式文件打包
  - css
    - style-loader
    - css-loader
  - less
    - style-loader
    - css-loader
    - less-loader
    - less // 不需要显示出来
  - sass
    - style-loader
    - css-loader
    - sass-loader
    - node-sass // 不需要显示出来
- 5.url 处理（图片）
  - url-loader
  - file-loader
- 6.babel Es6 语法
  - babel-core
  - babel-loader@7
  - babel-plugin-transform-runtime
  - babel-preset-env
  - babel-preset-stage-0
- 7.vue (webpack vue)
  - vue vue 依赖
  - vue-loader 转换 vue 包依赖
  - vue-template-compiler
- 8.Mint-UI vue 的 ui 组件 Mint-ui 官网
  - mint-ui 组件
  - babel-plugin-component mint-ui 按需导入
- 9.vue-resource 发送数据请求
- 10.babel-plugin-transform-remove-strict-mode 去除严格模式
- 11.vue2-preview 缩略图打包
- 12.moment 时间处理插件

模块安装与应用

express 前端开发框架

安装

1 2	$ npm init -y //添加json初始化文件 $ npm install express --save//安装express

引包

1	const express = require('express');

创建服务

1	const app = express();

使用

1
2
3

app.get('/', function (req, res) {
  req.send('index.html')
})

art-template 模版引擎 (配置在 express 中)

js 使用

安装

1 2	$ npm install --save art-template//express-art-templat依赖了art-template所以可以不用记载但是要安装 $ npm install --save express-art-template

配置

1	app.engine('art',require('express-art-template'))//art 可以替换成其他的标示 html 等

使用

app.get('/',function (req,res) {
    // 在 Express 中使用模板引擎有更好的方式：res.render('文件名， {模板对象})
  // 可以自己尝试去看 art-template 官方文档：如何让 art-template 结合 Express 来使用
    res.render('index.html',{
        title: 'hello world'
    });
});

如果希望修改默认的 views 视图渲染存储目录，可以如下修改

1 2	// 第一个参数 views 不能写错 app.set('views', 目录路径)

视图页面输出 views

安装模版引擎
- art-template
- express-art-template
编写布局页面 layout.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    <!-- 留坑给页面添加css样式等链接 -->
    {{ block 'head' }}{{ /block }}
</head>

<body>
    <!-- body-固定头部-头部重用 -->
    {{ include './header.html' }}

    <!-- body-内容模块-可修改 -->
    {{ block 'content' }}
        <h1>默认内容</h1>
    {{ /block }}

    <!-- body-固定底部-底部重用 -->
    {{ include './footer.html' }}
</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!-- 留坑给页面添加js等 -->
{{ block 'script' }}{{ /block }}
</html>

调用布局模块编写页面

<!-- 继承布局模块页 -->
{{extend './layout.html'}}

<!-- 添加css样式-通过坑 head  -->
{{block 'head'}}
<style>
    body {
        background-color: skyblue;
    }
    h1 {
        color: red;
    }
</style>
{{/block}}

<!-- 修改页面内容 -->
{{block 'content'}}
<div>
    <h1>index.html填坑</h1>
</div>
{{/block}}

<!-- 添加js 通过script -->
{{block 'script'}}
<script>
    window.alert('index 页面自己的js 脚本')
</script>
{{/block}}

留坑内容
- 中带‘’号的内容的自定义的名，最好是取一看就明白的
- 坑不止可以留一个，可以留很多个

body-parser 中间件(解析表单 post 请求体)

安装

1	$ npm install --save body-parser

引包

1	const bodyParser = require('body-parser');

配置

// parse application/x-www-form-urlencoded 解析application
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json 解析
app.use(bodyParser.json());

使用

app.post('/post',function (req,res) {
    var myDate = new Date();
    var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var date = myDate.getDate(); //获取当前日(1-31)
    let comment = req.body;
    comment.dateTime = year + "-" + month + "-" + date;
    comments.unshift(comment);
    res.redirect('/');
})

mongoose （mongodb 数据库链接插件）

安装

1	$ npm i -S mongoose

引包

1	const mongoose = require('mongoose');

配置

1 2	// 连接数据库 mongoose.connect('mongodb://localhost/test');

使用

// 创建一个模型
// 就是在设计数据库
// MongoDB 是动态的，非常灵活，只需要在代码中设计你的数据库就可以了
// mongoose 这个包就可以让你的设计编写过程变的非常的简单
const Cat = mongoose.model('Cat', {
    name: String
});

// 实例化一个 cat
const kitty = new Cat({
    name: 'yhf'
});
// 持久化保存 kitty 实例
kitty.save().then(() => console.log('meow'));

bootstrap css 样式前端架构

安装（3 版居多）

1	$ npm install bootstrap@3

使用（在视图的布局页面引入就好）
css：
js：

jquery js 框架

安装

1	$ npm i jquery

使用 (在视图的布局页面引入就好)

blueimp-md5 密码加密

安装

1	$ npm install blueimp-md5

引包

1	const md5 = require('blueimp-md5');

调用

1 2	// md() 在里面填充数据就好多加几个是多重加密，三个为三重加密 body.password = md5(md5(md5(body.password)))

express-session 数据存储

安装

1	$ npm install express-session

配置

// 引包
const session = require('express-session')

// 在 Express 这个框架中，默认不支持 Session 和 Cookie
// 但是我们可以使用第三方中间件：express-session 来解决
// 1. npm install express-session
// 2. 配置 (一定要在 app.use(router) 之前)
// 3. 使用
//    当把这个插件配置好之后，我们就可以通过 req.session 来发访问和设置 Session 成员了
//    添加 Session 数据：req.session.foo = 'bar'
//    访问 Session 数据：req.session.foo

app.use(session({
    // 配置加密字符串，它会在原有加密基础之上和这个字符串拼起来去加密
    // 目的是为了增加安全性，防止客户端恶意伪造
    secret: 'itcast',
    resave: false,
    saveUninitialized: false // 无论你是否使用 Session ，我都默认直接给你分配一把钥匙
}))

使用

// 用户存在，登录成功，通过 Session 记录登录状态
req.session.user = user;

// 用户退出，退出成功，通过 Session 清除登录状态
req.session.user = null;

webpack@3.12.0

安装

1 2	$ sudo cnpm install webpack@3.12.0 -g //全局安装webpack 3.12.0 版本 $ sudo cnpm install webpack@3.12.0 -D //项目本地安装webpack 3.12.0 版本

使用看 Vue day5

webpack-dev-server

安装

1	sudo cnpm i webpack-dev-server@2.6.0 --save-dev

使用看 Vue day5

html-webpack-plugin 把 html 打包在内存

安装

1	$ sudo cnpm i html-webpack-plugin --save-dev

webpack css (webpack 不会处理 js 以为的文件需要用其他的插件辅助)

安装 style-loader

1	$ sudo cnpm i style-loader --save-dev

安装 css-loader

1	$ sudo cnpm i css-loader --save-dev

less

安装 less-loader

1	$ sudo cnpm i less-loader -D

安装 less

1	$ sudo cnpm i less -D

sass

安装 sass-loader

1	$ sudo cnpm i sass-loader -D

安装 node-sass

1	$ sudo cnpm i node-sass -D

url-loader 与 file-loader

1	$ sudo cnpm i url-loader file-loader -D //都是两个一起用可以一起安装

babel

1 2	$ sudo cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D $ sudo cnpm i babel-preset-env babel-preset-stage-0 -D

Vue

1	$ sudo cnpm i vue -S

vue-loader vue-template-compiler

1	$ sudo cnpm i vue-loader vue-template-compiler -D

Mint-UI

1	$ sudo cnpm i mint-ui -S

babel-plugin-componen

1	$ sudo npm install babel-plugin-component -D

vue-resource

1	$ sudo cnpm i vue-resource -S

babel-plugin-transform-remove-strict-mode

安装

1	$ sudo cnpm i babel-plugin-transform-remove-strict-mode -D

配置 .babelrc 文件没有就在根目录创建

1
2
3

{
    "plugins": ["transform-remove-strict-mode"]
}

使用

  // 以mui为例
  // 在vue里面，因为这个mui.js 写法比较旧所以编译时会报错，所以我们去除严格模式
  <script>
  // 1. 导入 mui 的js文件
  import mui from "../../lib/mui/js/mui.js";
</script>

清理报错/报警

加入这个样式就可以了

1
2
3

* {
  touch-action: pan-y;
}

vue2-preview

1
2
3

https://www.npmjs.com/package/vue2-preview
$ sudo cnpm i vue2-preview -S
http://www.mamicode.com/info-detail-2462808.html

moment

安装

1	$ sudo cnpm i moment -S

使用

// 在main.js里面全局配置
// 导入时间插件
import moment from 'moment'
// 定义全局的过滤器 dateFormat 是调用方法名  dataStr 是传入参数 patter 是格式
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

不忘初心，方得始终

npm/cnpm 第三方模块/插件安装使用

模块/插件

模块安装与应用

express 前端开发框架

art-template 模版引擎 (配置在 express 中)

js 使用

视图页面输出 views

body-parser 中间件(解析表单 post 请求体)

mongoose （mongodb 数据库链接插件）

bootstrap css 样式前端架构

jquery js 框架

blueimp-md5 密码加密

express-session 数据存储

webpack@3.12.0

webpack-dev-server

html-webpack-plugin 把 html 打包在内存

webpack css (webpack 不会处理 js 以为的文件需要用其他的插件辅助)

less

sass

url-loader 与 file-loader

babel

Vue

vue-loader vue-template-compiler

Mint-UI

babel-plugin-componen

vue-resource

babel-plugin-transform-remove-strict-mode

vue2-preview

moment