Express 相關(guān)

長樂未央學(xué)習(xí)視頻@東哥

1. 安裝 express-generator 腳手架，新建項目

1. 執(zhí)行命令

npm install express express-generator@4 -g

同時安裝 express,和 express 腳手架.

npm install express express-generator@4 -g

2. 通過 express 腳手架創(chuàng)建 express 項目

express --no-view iike-api

cd iike-api

npm install

npm start (啟動項目)

指令解釋:

• --no-view 表示 不需要視圖模板
• iike-api 表示 express 項目名稱
• cd iike-api 進(jìn)入 iike-api 項目中

express --no-view iike-apicd iike-apinpm installnpm start

3. 訪問本地地址

http://localhost:3000/

頁面顯示 Express Welcome to Express ,表示項目啟動成功

2. JSON 格式配置

1. 在 express 項目啟動成功后,訪問本地地址;會發(fā)現(xiàn),是一個 html 格式.
2. express 項目一般用來做接口使用,所以我們需要將 html 格式轉(zhuǎn)化為 json 格式.
3. 操作如下:

1. iike-api\routes\index.js 修改下面代碼

router.get("/", function (req, res, next) {res.render("index", { title: "Express" });
});// 替換為
router.get("/", function (req, res, next) {res.json({ message: "Hello Nodejs!" });
});

2. 刪除 iike-api\public\index.html 文件

3. 重啟 express 服務(wù)

   ctrl + c 終止, npm start 重啟.

4. 刷新頁面后,拿到的信息就是 json 格式的了

3. 推薦瀏覽器處理 JSON 格式的插件

JSON-handle ,

• edge 瀏覽器可以直接在應(yīng)用商店中下載

4. 安裝 nodemon 解決頻繁重啟問題

1. 下載 nodemon 依賴

npm i nodemon

2. 配置 package.json 文件.

   將啟動腳本 node ./bin/www 改為 nodemon ./bin/www

  "scripts": {"start": "nodemon ./bin/www"},

3. 第一次配置,記得重啟服務(wù)

5. 項目結(jié)構(gòu) 與 代碼解析

1. routes 文件夾(重要),不同網(wǎng)址對應(yīng)要不同的程序.后續(xù)開發(fā)基本都會在 routes 中進(jìn)行
2. app.js 配置跨域 等配置,都會在這里

6. 使用 Docker 運(yùn)行 mysql （docker 運(yùn)行不了的話可以使用 小皮面板）

1. 安裝 docker

   docker 官網(wǎng)下載

7. 服務(wù)器環(huán)境配置軟件推薦

寶塔面板

小皮面板

小皮面板 mysql 數(shù)據(jù)庫連接

1. 打開 navicat 或 dbeaver ，數(shù)據(jù)庫可視化管理工具。

2. 以 dbeaver 為例，創(chuàng)建新連接

   • 服務(wù)器地址： localhost (一般不變)
   • 端口： 3306 (一般不變)
   • 數(shù)據(jù)庫（名稱）：express_demo
   • 用戶名：iike （自定義）
   • 密碼：666 （自定義）
   • 最后點擊完成數(shù)據(jù)庫就建好了。

3. 打開小皮面板 ，首頁啟動 mysql 5… 。

4. 小皮面板 ，點擊數(shù)據(jù)庫 ，創(chuàng)建數(shù)據(jù)庫。（輸入數(shù)據(jù)庫名稱，用戶名，密碼）

   • 這里的數(shù)據(jù)庫名稱 就是上面再 dbeaver 中創(chuàng)建的數(shù)據(jù)庫名稱。
   • 用戶名密碼 同樣是上述中生成的。

5. 回到 dbeaver ，右鍵創(chuàng)建好的數(shù)據(jù)庫，點擊連接。

6. 連接成功后，就可以新建數(shù)據(jù)表了。

8. Express 創(chuàng)建 mysql 連接

1. 在根目錄新建一個 database 目錄，用來存放 數(shù)據(jù)庫相關(guān)操作。
2. 新建一個 config.js 文件，用來初始化 mysql 連接操作。

database/config.js 文件內(nèi)容如下

注意，引入 mysql 之前，記得全局下載一下，npm i mysql

//db.jsconst mysql = require("mysql");
//連接數(shù)據(jù)庫module.exports = {// 數(shù)據(jù)庫基礎(chǔ)配置config: {host: "localhost", // 服務(wù)器地址port: 3306, // 端口user: "iike", // 數(shù)據(jù)庫用戶名password: "666666", // 密碼database: "express_demo", // 數(shù)據(jù)庫名稱},// 連接數(shù)據(jù)庫，使用 mysql的連接池連接方式sqlContent: function (sql, sqlArr, callBack) {var pool = mysql.createPool(this.config);pool.getConnection((err, connection) => {console.log("mysql-123");if (err) {console.log(err, "連接失敗");return;}// 事件驅(qū)動回調(diào)connection.query(sql, sqlArr, callBack(err, connection));// 釋放連接connection.release();});},
};

9. routes 文件引入 mysql

在 routes/index.js 文件中配置如下代碼

const express = require("express");
const router = express.Router();
var dbCongif = require("../dataBase/config.js");/* GET home page. */
router.get("/", function (req, res, next) {// 數(shù)據(jù)庫相關(guān)操作var sql = "SELECT* FROM cate";var sqlArr = [];var callBack = (err, conn) => {if (err) {console.log(err, "123");console.log("數(shù)據(jù)庫連接失敗");} else {conn.query(sql, function (err, result) {if (err) {console.log("查詢失敗");} else {res.send({list: result,});}});}};dbCongif.sqlContent(sql, sqlArr, callBack);
});module.exports = router;

查詢數(shù)據(jù)表時需注意

!!! 如果控制臺報錯

1. Error: ER_NO_SUCH_TABLE: Table 'express_demo.newtable' doesn't exist ,數(shù)據(jù)表不存在。

   • 一定要注意，新建的數(shù)據(jù)表是否保存
   • 注意，sql 查詢時的數(shù)據(jù)表名稱大小寫問題。

2. 數(shù)據(jù)表保存時，報錯 Incorrect table definition； there can be only one auto column and it must be defined (沒有主鍵)

   • 選擇約束，新建一個約束（id），設(shè)置主鍵。

配置好查詢的 sql 后，訪問 localhose:3000

1. 在我們配置好 mysql 連接后，就可以查詢 數(shù)據(jù)表中的內(nèi)容了。
2. 訪問 localhost:3000 , 就回將數(shù)據(jù)庫中的數(shù)據(jù)以 json 的格式展示在頁面中。

10. api.js 文件注意事項

const indexRouter = require("./routes/index");
const usersRouter = require("./routes/users");
const adminRouter = require("./routes/admin/articles");app.use("/", indexRouter);
app.use("/users", usersRouter);
app.use("/admin/articles", adminRouter);// 訪問 http://localhost:3000/users 路徑，返回 'respond with a resource'
// 訪問 http://localhost:3000/users/users 路徑，返回 '注意路由路徑拼寫'// users.js 文件內(nèi)容
var express = require("express");
var router = express.Router();/* GET users listing. */// '/'  對應(yīng) app.js 中的 /users
router.get("/", function (req, res, next) {res.send("respond with a resource");
});router.get("/users", function (req, res, next) {res.send("注意路由路徑拼寫");
});module.exports = router;