express-generator脚手架的使用（一）
站长
· 阅读数 49
1.express 与 express-generator区别
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。 Express-generator是Express的应用生成器，通过使用生成器工具，可以快速创建一个Express的应用骨架。
2.使用Express-generator创建Express应用骨架
2.1 安装
npm install -g express-generator
cnpm i express-generator -g
yarn global add express express-generator
以上三种任选其中一种即可全局安装。
2.2验证是否安装成功
express --version
2.3 初始化应用
express -e myapp
输入以上指令会生成一个myapp的文件：
bin：可执行文件。里面包含了一个启动文件 www 默认监听端口是 3000。 public：静态文件。用来存放项目静态文件目录如js,css以及图片。 routes：路由文件。路由主要定义 url 和 资源 的映射关系 ( 一一对应关系 ), 主要用来接收前端发送的请求 响应数据给前端 views：后端模版文件。 app.js：入口文件。 package.json：工程信息和模块依赖。
然后跳转到myapp目录下，输入以下指令安装项目依赖
npm i
输入指令npm run start，在浏览器打开127.0.0.1:3000就能获取访问我们的初始项目了
安装数据库，输入指令npm i mysql。
安装ejs,输入指令 npm i ejs。
3.实现一个案例
3.1案例整体规划
- 完成 书籍列表的展示。
- 列表的分页。
- 一页显示10条
- 上一页和下一页
- 首页和尾页
- 点击页码数字，跳转
- 新增功能4.修改功能5.删除功能 6.查找功能
3.2做一个本地数据库
3.2.1 通过八爪鱼采集器抓包一个小说网，生成40个数据，
数据导出后可以生成一个json文件
【注意】这里的标题名要与我们接下来生成的数据库里的名字一一对应
3.2.2在本地数据库中生成一个表
3.2.3创建一个文件，用于将数组中每一条数据，拼接成insert语句。这里新建为switchHandler.js，代码如下：
const fs = require("fs");
const path = require("path");
fs.readFile("小说畅销.json","utf-8",(err,data)=>{
if (err) {
console.log(err);
return
}
//将读取的json字符串转为对象。
let arr = JSON.parse(data);
//将数组中每一条数据，拼接成insert语句。
arr.forEach(item => {
let sql = `INSERT INTO book (info1, info2, author, category1,category2,booktime) VALUES ('${item.info1}','${item.info2}','${item.author}','${item.category1}','${item.category2}','${item.booktime}');
`
//用appendFile不用writeFile是因为writeFile会将原来的字符覆盖掉，只显示最后一个
fs.appendFile("fiction.sql",sql,"utf-8",err=>{
if(err){
console.log(err);
return;
}
})
});
})
运行指令 node switchHandler.js,生成fiction.sql文件。
3.2.4将fiction.sql文件导入数据库
至此，本地数据库已经生成。
3.3 做一个列表页面
3.3.1 views目录下新建一个bookList.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>起点排行榜</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/book_list.css">
</head>
<body>
<h1>起点排行榜</h1>
<div class="container">
<table class="table table-hover table-bordered">
<tbody>
<tr class="info">
<th>排名</th>
<th>书名</th>
<th>作者</th>
<th>分类1</th>
<th>分类2</th>
<th>简介</th>
<th>时间</th>
</tr>
<% data.forEach((item,index) => { %>
<tr>
<td style="width: 60px;"><%= item.ranking %></td>
<td class="book_table"><%= item.info2 %></td>
<td class="book_table"><%= item.author %></td>
<td class="book_table"><%= item.category1 %></td>
<td class="book_table"><%= item.category2 %></td>
<td class="book_table"><%= item.info1.length>100?item.info1.slice(0,100)+"...":item.info1 %></td>
<td class="book_table"><%= item.booktime %></td>
</tr>
<% }) %>
</tbody>
</table>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="/book/list?page=1">1</a></li>
<li><a href="/book/list?page=2">2</a></li>
<li><a href="/book/list?page=3">3</a></li>
<li><a href="/book/list?page=4">4</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</body>
</html>
3.3.2写一个封装数据库，名字为db.js
const mysql = require("mysql");
const pool = mysql.createPool({
host: "localhost",
user: "root",
password: "123456",
database: "newstudent",
// 可选
queueLimit: 3,
connectionLimit: 20
})
//添加一个query方法
let query = function (sql, callBack) {
pool.getConnection((err, conn) => {
if (err) {
console.log(err);
return
}
conn.query(sql, (err, data) => {
if (err) {
console.log(err);
return
}
if (callBack) {
callBack(data);
}
})
})
}
//封装 插入一条数据。
let insert = (table, datas, callBack) => {
//拼接SQL
let fields = ''; //字段
let values = ''; //值
for (const k in datas) {
fields += k + "," //拼接字段
values += `'${datas[k]}',`
}
//清除最后一位的逗号。
fields = fields.slice(0, -1);
values = values.slice(0, -1);
// console.log(fields);
// console.log(values);
let sql = `INSERT INTO ${table} (${fields}) VALUES (${values})`;
query(sql, callBack)
};
//封装一个删除方法
let del = (table, datas, callBack) => {
let arr = ['1=1']; //避免datas为空时，出现异常错误。
for (const k in datas) {
arr.push(`${k} = '${datas[k]}'`);
}
let sql = `delete from ${table} where ${arr.join(" and ")}`;
query(sql, callBack)
}
/**
* 修改方法
* @param {string} table 表名
* @param {object} sets 修改的字段与值
* @param {object} wheres 判断条件
* @param {Function} callBack 回调函数
*/
let update = (table, sets, wheres, callBack) => {
//准备一个数组，用来拼接 where子句
let whereArr = ['1=1']; //避免datas为空时，出现异常错误。
for (const k in wheres) {
whereArr.push(`${k} = '${wheres[k]}'`);
}
//准备一个数组，用来拼接 set 子句
let setArr = [];
for (const k in sets) {
setArr.push(`${k} = '${sets[k]}'`)
}
let sql = `UPDATE ${table} SET ${setArr.join(",")} WHERE ${whereArr.join(" and ")}`
query(sql, callBack)
}
module.exports = {
query,
insert,
del,
update
};
3.3.3在routes目录下新建一个book.js
const express = require("express");
const db = require("../until/db")
const book = express.Router();
book.get("/list",(req,res)=>{
//获取页码
let {page} = req.query;
if (!page) {
page = 1;
}
//获取数据库中的书籍数据
let sql = `select * from book limit ${(page-1)*10},10`;
db.query(sql,data=>{
res.render("bookList",{data});
})
})
module.exports = book;
3.3.4 在app.js里面添加 引入和加载
var bookRouter =require('./routes/book');
//第一个参数是添加公共的一级路由
app.use("/book",bookRouter)；
3.3.5 运行
在这里网页的css样式不再叙说，可自行设置
接下来输入指令npm run start
打开网页输入网址http://127.0.1.1:3000/book/list/
至此大功告成！
未完待续。。。。
转载自:https://juejin.cn/post/7042922049991999496