winney

Express官网

Express 中文网

express-generator

Express-generator是Express的应用生成器，通过使用生成器工具，可以快速创建一个Express的应用骨架

express-generator简单使用

• express-generator是一个node的自动化创建项目工具，类似于vue-cli
• 通过express –version来检查当前版本号，若能显示出来，说明安装成功
• 安装后就可以使用express命令
• express 项目名，就会在当前文件夹下生成一个项目文件夹

express-generator

可把package脚本中的node改成nodemon，方便热启动

方式一

通过 npx （包含在 Node.js 8.2.0 及更高版本中）命令来运行 Express 应用程序生成器

1. 新建项目文件夹（myapp)，且切换到项目目录

2. 安装Express 应用程序生成器

   1	npx express-generator

3. 安装依赖包

   1

   npm i

4. 启动应用

   1

   npm start

5. 查看

   浏览器中打开 http://localhost:3000/

express应用HTTPS总结

摘自：express应用HTTPS总结

1. 跨域

No 'Access-Control-Allow-Origin' header is present on the requested resource

express没有允许跨域访问，使用cors中间件解决跨域问题，安装cors后在app.js中添加下方代码

1
2
3

yarn add cors
或
npm i cors

1
2
3
4
5
6
7

let cors = require('cors')

let corsOptions = {
    origin: '*' //允许访问的目标站点
}

app.use(cors(corsOptions))

2. 混入内容被阻止

Mixed content blocked” when running an HTTP AJAX operation in an HTTPS page

你在启用了https的网站上访问了通过http传输的资源，例如加载外链、获取地图瓦片等，浏览器为了安全起见拒绝了你的请求，将有关http请求更换为https或本地加载来解决该问题

3. SSL协议错误

net::ERR_SSL_PROTOCOL_ERROR

启用https的服务器上运行了http服务，在申请https后没有将express应用由默认的http更换为https，将下方代码加入到app.js中修改一下路径即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

// 引入部分
const express=require('express');
const bodyParser=require('body-parser');
const cors=require("cors");
const session=require("express-session");
// const userRouter=require("./routes/user");
const fs=require('fs');
//创建web服务器
var server=express();
// server.listen(3000);
var http=require('http');
var https=require('https');

//根据项目的路径导入生成的证书文件下面的key和pem是下载证书得到的
var privateKey  = fs.readFileSync('key.key', 'utf8');
var certificate = fs.readFileSync('pem.pem', 'utf8');
var credentials = {key: privateKey, cert: certificate};
 
var httpServer = http.createServer(server);
var httpsServer = https.createServer(credentials, server);
 
//可以分别设置http、https的访问端口号
var PORT = 3000;
var SSLPORT = 8080;
 
//创建http服务器
httpServer.listen(PORT, function() {
    console.log('HTTP Server is running on: http://localhost:%s', PORT);
});
 
//创建https服务器
httpsServer.listen(SSLPORT, function() {
    console.log('HTTPS Server is running on: https://localhost:%s', SSLPORT);
});
 
//可以根据请求判断是http还是https
server.get('/', function (req, res) {
    if(req.protocol === 'https') {
        res.status(200).send('This is https visit!');
    }
    else {
        res.status(200).send('This is http visit!');
    }
});


//使用body-parser中间件
server.use(bodyParser.urlencoded({
    extended:false
}))
//托管静态目录
server.use(express.static("public"))
//解决跨域问题
server.use(cors({
    origin:["http://127.0.0.1:8081","http://localhost:8081","http://127.0.0.1:8080","http://localhost:8080"],
    credentials:true
}))
// session功能
server.use(session({
    secret:"128字符串",
    resave:true,
    saveUninitialized:true
}))
// 挂载路由
// server.use('/user',userRouter);

主要是express需要加载https模块

传参

04 基于Express框架创建的Node后台获取前端传过来的参数

前端开发：express的具体操作流程

前后端交互-Express框架

React+Node+Express搭建一个前后端demo

get方法传参

api.js：

1
2
3
4
5

server.get('/user/:id', function (req, res, next) {
    console.log('req.params')     	
    console.log(req.params)    		//  {id: 1000}
    res.status(200).send('winney---' +  req.params.id);     //  winney---1000
})

前端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

wx.request({
  url: 'https://www.winney07.cn:8080/user/1000',  
  data: {},
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log('接口返回的数据')
    console.log(res)
    // console.log(res.data)
  },
  fail(err) {
    console.log(err)
  }
})

post方法传参

Windows环境下利用CMD命令批量修改文件名

核心命令

·文件重命名 ren

1、ren即rename的缩写，使用ren或者rename命令均可实现文件重命名的操作；命令的使用方法很简单，格式为 ren old_name new_name ；例如，想要将D盘根目录下的文件 a.txt 重命名为 b.doc ，只需要在CMD中进入D盘根目录，执行 ren a.txt b.doc ；或者使用绝对路径，执行 ren D:\a.txt b.doc ，也可以达到同样的效果

2、需要注意的是，旧文件名 old_name 可以使用相对路径，也可以包含绝对路径，但新文件名 new_name不能包含任何文件路径，只能是纯文件名；所以，要想批量修改包含子文件夹的多个路径下的大量文件名，还需要用到一款支持通配符匹配查询替换的文本编辑器，以便从路径+文件名的文件目录系统中提取出文件名的部分

3、另外， ren 也支持使用通配符；例如，想要将扩展名为 .docx 的文件扩展名批量修改为 .doc ，执行 ren *.docx *.doc 即可；但通配符的使用规则十分复杂，若无法完全理解其中的匹配规则，建议只使用通配符来修改文件扩展名

摘抄自：https://blog.csdn.net/hitomitoi/article/details/81566494

使用option

HTML：

1
2
3
4
5
6
7
8

<div class="layui-form-item">
    <label class="layui-form-label">账号：</label>
    <div class="layui-input-block">
        <select name="account" lay-filter="account">
            <option value="">请选择账号</option>
        </select>
    </div>
</div>

<option value="">请选择账号</option> ，value值为空

如图所示：

使用定位元素模拟placeholder

”所属项目“默认不选择。”账号“下拉框的数据，是根据所选的”所属项目“进行动态渲染。

因”所属项目“默认不选择，”账号“初始化时没有下拉框列表数据。需求还要求不显示可选项，也就是<option value="">请选择账号</option> 也不显示。

1
2
3
4
5
6
7

<div class="layui-form-item">
    <label class="layui-form-label">账号：</label>
    <div class="layui-input-block">
        <select name="account" lay-filter="account">
        </select>
    </div>
</div>

1. 如果不加option选项，下拉框默认样式如下图所示：

   

   项目中使用的是layui是v2.5.6 版本。而更换版本，可能会带来其他影响，而且layui也停更了。

2. 所以使用定位元素覆盖掉默认的placeholder

   HTML:

   1 2 3 4 5 6 7

   <div class="layui-form-item"> <label class="layui-form-label">账号：</label> <div class="layui-input-block" id="account-select"> <div class="account-placeholder">请选择账号</div> <select name="account" lay-filter="account"></select> </div> </div>

   CSS：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   #account-select{ position: relative; } #account-select .account-placeholder { position: absolute; left: 3px; top: 3px; z-index: 10; padding-left: 8px; height: 32px; line-height: 32px; width: 184px; pointer-events: none; color: rgb(117, 117, 117); background-color: #fff; }

   

   

3. select框初始化时设置为disabled

   如上图所示，使用了定位元素挡住了默认的placeholder，但是还是会显示”没有选项“这一项。

   所以干脆初始化时，将select框初始化时设置为disabled

   HTML：

   1 2 3 4 5 6 7

   <div class="layui-form-item"> <label class="layui-form-label">账号：</label> <div class="layui-input-block" id="account-select"> <div class="account-placeholder">请选择账号</div> <select name="account" lay-filter="account" disabled></select> </div> </div>

其他细节处理

1. 点击下拉框时，弹出”需要选择所属项目“的提示语

   1 2 3 4 5 6 7

   // 点击账号下拉框 layui.$("#account-select").on('click', '.layui-form-select', function(){ var project = layui.$('[name="project"]:checked').val(); if(!project) { layer.msg('需选择所属项目', {time: 1000}); } })

2. 向下箭头为禁用的样式，修改为正常样式：

   1 2 3

   #account-select .layui-select-disabled .layui-edge{ border-top-color: #c2c2c2; }

3. 鼠标放在select框上，是禁止图标，然而鼠标移到下拉框的向下箭头，光标显示为小手；

   如图所示：

   

   解决：

   1 2 3

   #account-select .layui-select-disabled .layui-edge{ cursor: not-allowed; }

4. 选择”所属项目“时，追加对应的数据，同时需要去除select框的disabled属性，以及隐藏模拟placeholder的定位元素

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

   // 渲染 select 框的数据 function renderSelectData(dataList) { var selectElem = layui.$('select[name="account"]'); selectElem.empty(); // 清空原有选项 selectElem.append('<option value="">请选择账号</option>'); // 添加新的选项 layui.$.each(dataList, function(index, item) { var optionElem = layui.$('<option>'); optionElem.val(item.value); optionElem.text(item.name); selectElem.append(optionElem); }); layui.form.render('select'); // 重新渲染 select 框 } var accountList = { "1": [ { value: 1, name: '项目AAA_account1'}, { value: 2, name: '项目AAA_account2'}, { value: 3, name: '项目AAA_account3'}, ], "2": [ { value: 4, name: '项目BBB_account1'}, { value: 5, name: '项目BBB_account2'}, ] } // 监听单选框 form.on('radio(project)', function(data){ // 渲染账号下拉列表 renderSelectData(accountList[data.value]); layui.$('select[name="account"]').removeAttr('disabled'); form.render('select'); layui.$('.account-placeholder').hide(); // 隐藏模拟的placeholder });

   最终效果：