當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Egg.js框架的简单使用

發布時間：2023/12/9 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Egg.js框架的简单使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

創建

??創建項目文件夾，在文件下打開cmd:

npm init egg --type=simple npm install npm run dev

靜態文件目錄

app/public
??創建html文件

訪問:

控制器和路由

直接響應數據或者渲染模板

接受用戶的輸入

與路由建立對應關系
??this.ctx可以獲取到當前請求的上下文對象，通過此對象可以便捷的獲取到請求與響應的屬性與方法。

創建控制器

app/controller下創建js文件：
fruits.js

'use strict'; // *嚴格模式const Controller = require('egg').Controller; class FruitsController extends Controller {async index() {const { ctx } = this;ctx.body = '列表';} } module.exports = FruitsController;

添加路由

app/router.js 添加要訪問的路由

路由傳參

query

fruits.js

訪問：

打印：

params

app/router.js

fruits.js

'use strict'; // *嚴格模式const Controller = require('egg').Controller; class FruitsController extends Controller {async index() {const { ctx } = this;const index = ctx.request.body;console.log(index)ctx.body = '列表';}async getId() {const { ctx } = this;const id = ctx.params.id;console.log(id);ctx.body = `<h1 style='color:red;'>傳遞的id值是${id}</h1>`;} } module.exports = FruitsController;

訪問：

打印：

POST請求

??上面介紹的params和query是GET請求方式，下面講一下POST請求：
獲取post請求的參數：this.ctx.request.body

CSRF

??CSRF是指跨站請求偽造，Egg中對post請求做了一些安全驗證，可以在config\config.default.js文件中設置驗證：

RESTful風格的URL定義

??restful風格的url可以簡化路由文件

router.resources('posts','/api/posts',controller.posts); //一個方法同時定義增刪改查 MethodsPathRouter NameController.Action

GET	/posts	posts	app.controllers.posts.index
GET	/posts/new	new_posts	app.controllers.posts.new
GET	/posts/:id	post	app.controllers.posts.show
GET	/posts/:id/edit	edit _post	app.controllers.posts.edit
POST	/posts	posts	app.controllers.posts.create
PUT	/posts/:id	post	app.controllers.posts.update
DELETE	/posts/:id	post	app.controllers.posts.destroy

demo:
app\router.js

'use strict';/*** @param {Egg.Application} app - egg application*/ module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);// !很繁瑣// router.get('/fruits', controller.fruits.index);// router.get('/fruits/:id', controller.fruits.getId);// router.get('/createfruit', controller.fruits.createPage);// router.post('/createfruit', controller.fruits.createFruit);// * RESTful風格的URL定義router.resources('fruits', '/fruits', controller.fruits); };

app\controller\fruits.js

'use strict'; // *嚴格模式const Controller = require('egg').Controller; let fruitList = [ '香蕉', '蘋果', '橘子' ];class FruitsController extends Controller {// ? /fruits get請求async index() {// this.ctx; // ?上下文對象const { ctx } = this;ctx.body = fruitList;}async new() {const { ctx } = this;ctx.body = `<form method='post' action='/fruits'><input name='fruitsName' type='text'/><button>添加</button></form>`;}// ? postasync create() {const { ctx } = this;const fruit = ctx.request.body.fruit;fruitList.push(fruit);// ctx.body = '添加成功';// ?跳轉到fruits頁面，實現get請求// *重定向ctx.redirect('/fruits');}// ?deleteasync destroy() {const { ctx } = this;const id = ctx.params.id;fruitList.splice(id, 1);ctx.body = '刪除成功';}}module.exports = FruitsController;

Egg插件

numjucks模板插件

安裝：

npm install --save egg-view-nunjucks

配置：
在config\plugin.js中引入：

'use strict';/** @type Egg.EggPlugin */ module.exports = {// had enabled by egg// static: {// enable: true,// }nunjucks: {enable: true,package: 'egg-view-nunjucks',}, };

在config\config.default.js中配置

在view目錄中創建模板文件，并在控制器中使用render方法渲染模板
app\view\index.html

<!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>Document</title> </head> <body><h1>nunjucks模板</h1> </body> </html> 'use strict';const Controller = require('egg').Controller;class HomeController extends Controller {async index() {const { ctx } = this;await ctx.render('index');} }module.exports = HomeController;

跨域請求配置插件 egg-cors

安裝：

npm install --save egg-cors

配置：
在config\plugin.js中引入：

在config\config.default.js中配置

/* eslint valid-jsdoc: "off" */'use strict';/*** @param {Egg.EggAppInfo} appInfo app info*/ module.exports = appInfo => {/*** built-in config* @type {Egg.EggAppConfig}**/const config = exports = {};// use for cookie sign key, should change to your own and keep securityconfig.keys = appInfo.name + '_1620442177015_7667';// add your middleware config hereconfig.middleware = [];// add your user config hereconst userConfig = {// myAppName: 'egg',};config.security = {csrf: {enable: false,},};config.view = {defaultViewEngine: 'nunjucks',};config.cors = {origin: '*',allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',};return {...config,...userConfig,}; };

服務器如何識別用戶

session識別用戶

app\view\index.html

<!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>Document</title> </head> <body><h1>首頁</h1><form action="/logout" method="post"><button>注銷用戶</button></form> </body> </html>

app\view\login.html

<!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>Document</title><style>input{display: block;}</style> </head> <body><form action="/login" method="post"><label for="">賬號</label><input type="text" name="username" id=""><label for="">密碼</label><input type="password" name="password" id=""><button>登錄</button></form> </body> </html>

app\controller\home.js

'use strict';const Controller = require('egg').Controller;class HomeController extends Controller {async index() {const { ctx } = this;if (ctx.session.user) {await ctx.render('index');} else {ctx.redirect('/login');}}async getData() {const { ctx } = this;ctx.body = 'hello egg';}async login() {const { ctx } = this;await ctx.render('login');}async doLogin() {const { ctx } = this;const username = ctx.request.body.username;const password = ctx.request.body.password;if (username === 'mgd' && password === '123') {ctx.session.user = username;ctx.redirect('/');} else {ctx.redirect('/login');}}async logout() {const { ctx } = this;ctx.session.user = '';ctx.redirect('/login');} }module.exports = HomeController;

app\router.js

'use strict';/*** @param {Egg.Application} app - egg application*/ module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);router.get('/login', controller.home.login);router.post('/login', controller.home.doLogin);router.post('/logout', controller.home.logout); };

JWT(Json Web Token)識別用戶

安裝：

npm install --save egg-jwt

配置：
在config\plugin.js中引入：

'use strict';/** @type Egg.EggPlugin */ module.exports = {// had enabled by egg// static: {// enable: true,// }nunjucks: {enable: true,package: 'egg-view-nunjucks',},cors: {enable: true,package: 'egg-cors',},jwt: {enable: true,package: 'egg-jwt',}, };

在config\config.default.js中配置

app\controller\jwt.js

'use strict';const Controller = require('egg').Controller; class JwtController extends Controller {async index() {const { ctx } = this;const user = {username: 'mgd',};// ?egg-jwt引入后就可使用// ?用戶登錄const token = this.app.jwt.sign(user, this.app.config.jwt.secret);// ctx.body = token;try {const decode = this.app.jwt.verify(token, this.app.config.jwt.secret);ctx.body = decode;} catch (e) {ctx.body = 'token未能通過驗證';}}async doLogin() {const { ctx } = this;const user = ctx.request.body.user;if (user.username === 'mgd' && user.password === '123') {const user_jwt = { username: user.username };const token = this.app.jwt.sign(user_jwt, this.app.config.jwt.secret);ctx.body = {code: 200,token,};} else {ctx.body = {code: 400,msg: '用戶名或密碼錯誤',};}}async getMessage() {const { ctx } = this;ctx.body = 'hello jwt';} } module.exports = JwtController;

app\router.js

'use strict';/*** @param {Egg.Application} app - egg application*/ module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);router.get('/jwt', controller.jwt.index);router.post('/jwtlogin', controller.jwt.doLogin);router.get('/jwtmessage', controller.jwt.getMeaaage); };

新建vue項目測試：
Login.vue

<template><h1>登錄</h1><form @submit.prevent="login"><label for="">賬號</label><input type="text" v-model="user.username"><label for="">密碼</label><input type="password" v-model="user.password"><button>登錄</button></form> </template><script> import { reactive, toRefs } from 'vue' import { useRouter } from 'vue-router'; import { doLogin } from '../server/loginServer.js' export default {setup () {const router = useRouter();const state = reactive({user:{username:'',password:''}})async function login(){await doLogin({user:state.user}).then(ret=>{console.log(ret); if(ret.data.code==200){localStorage.setItem('token',ret.data.token)console.log(ret.data.token);router.push("/")}})}return {...toRefs(state),login}} } </script><style lang="less" scoped></style>

Home.vue

<template><h1>首頁</h1><button @click="getMessage">獲取數據</button><button @click="logOut">注銷用戶</button><HelloWorld></HelloWorld> </template><script> import { reactive, toRefs } from 'vue' import { getData } from '../server/homeServer.js' import HelloWorld from '../components/HelloWorld.vue' export default {components:{HelloWorld},setup () {const state = reactive({count: 0,})async function getMessage() {let token = localStorage.getItem("token");await getData(null,{headers:{token}}).then(ret=>{console.log(ret);})}async function logOut() {localStorage.removeItem('token');location.reload()}return {...toRefs(state),getMessage,logOut,}} } </script><style lang="less" scoped></style>

router.js

import Home from '../view/Home.vue' import Login from '../view/Login.vue' import {createRouter, createWebHistory} from 'vue-router' const router = createRouter({history:createWebHistory(),routes:[{path:"/",component:Home,name:"home"},{path:"/login",component:Login,name:"login"},] }) router.beforeEach((to, from, next) => {if(to.path === '/login'){next()}else{if(localStorage.getItem('token')){next();}else{next('/login');}} }) export default router

homeServer.js

import http from '../Api/Api' const get = (url, params = {},header={}) =>http.get(url,params,header)const getData = (query={},header) => {get('jwtmessage',query,header) } export {getData, }

loginServer.js

import http from '../Api/Api' const post = (url, data = {}, isBody) =>http.post(url,data,isBody)const doLogin = query => post('jwtlogin',query)export {doLogin, }

api.js

import axios from "axios"; import qs from 'qs'; // 導入 NProgress 包對應的 css 與 js import NProgress from 'nprogress' import 'nprogress/nprogress.css' // import {getStorage} from '../utils/Storage.js'// axios.defaults.baseURL = 'https://oj.s001.xin/api' //正式 axios.defaults.baseURL = 'http://127.0.0.1:7001' //測試 //post請求頭 axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"; //設置超時 axios.defaults.timeout = 10000;axios.interceptors.request.use(config => {// console.log(config)NProgress.start()// config.headers.Authorization = window.sessionStorage.getItem('token')return config }) // 在 response 攔截器中，隱藏進度條 NProgress.done() axios.interceptors.response.use(config => {NProgress.done()return config })function post(url, data, isBody = true) {if (isBody) {axios.defaults.headers.post["Content-Type"] = 'application/json';} else {data = qs.stringify(data)}return new Promise((resolve, reject) => {axios({method: 'post',url,data}).then(res => {resolve(res)}).catch(err => {reject(err)});}) };function get(url, data, headers) {if(headers.headers){console.log(headers);axios.defaults.headers.get["token"] = headers.headers.token;}return new Promise((resolve, reject) => {axios({method: 'get',url,params: data,}).then(res => {resolve(res)}).catch(err => {reject(err)})}) };function put(url, data) {return new Promise((resolve, reject) => {axios({method: 'put',url,params: data,}).then(res => {resolve(res)}).catch(err => {reject(err)})}) };function deletes(url, data) {return new Promise((resolve, reject) => {axios({method: 'delete',url,params: data,}).then(res => {resolve(res)}).catch(err => {reject(err)})}) }; export default {post,get,put,deletes };

中間件

??egg是一個基于koa的函數，中間件是一個函數，在請求與響應之間執行。

在Egg中定義中間件

app\middleware\checkToken.js

'use strict'; function checkToken() {return async function(ctx, next) {try {// ?獲取tokenconst token = ctx.request.header.token;// ?校驗token// ?1.獲取app實例const decode = ctx.app.jwt.verify(token, ctx.app.config.jwt.secret);if (decode.username) {await next();} else {ctx.body = {code: 400,msg: '用戶校驗失敗',};}} catch (e) {ctx.body = {code: 400,msg: 'token校驗失敗',};}}; } module.exports = checkToken;

執行中間件需要調用：
app\router.js

'use strict';/*** @param {Egg.Application} app - egg application*/ module.exports = app => {const { router, controller } = app;router.get('/', controller.home.index);router.get('/jwt', controller.jwt.index);router.post('/jwtlogin', controller.jwt.doLogin);// router.get('/jwtmessage', controller.jwt.getMeaaage);// ?添加中間件router.get('/jwtmessage', app.middleware.checkToken(), controller.jwt.getMeaaage); };

數據持久化

ORM

對象關系映射(Object Relational Mapping 。簡稱ORM)

將數據從對象的形式轉換成表格的形式

sequelzie是一個基于node的orm框架

通過egg-sequelize，可以直接使用sequelize提供的方法操作數據庫，而不需要手動寫SQL語句

安裝和使用sequelize

步驟：

下載:npm install --save egg-sequelize mysql2

在plugin.js文件中引入插件

在config.default.js文件中配置數據庫連接

在app/model文件中創建數據模型

添加app.js文件，初始化數據庫
config\plugin.js

config\config.default.js

app\model\clazz.js

'use strict';module.exports = app => {const { STRING } = app.Sequelize;// ?默認情況下sequelize將自動將所有傳遞的模型名稱(define的第一個參數)抓換位復const Clazz = app.model.define('clazz', {// *自動生成idname: STRING,});return Clazz; }; // ?班級：id，name

app.js

'use strict'; module.exports = app => {// * beforeStart是egg生命周期函數，啟動應用時執行app.beforeStart(async function() {// await app.model.sync({ force: true }); // ?開發環境使用會刪除數據// *創建數據表的方法 sync會根據模型去創建表await app.model.sync({});}); };

npm run dev啟動

數據操作

??在controller中實現數據的增刪改查
說明：在真實項目中，controller和操作數據的邏輯要分離，以便于項目的擴展和維護

this.app.model.Clazz.findAll(); //查詢數據 this.app.model.Clazz.findAll({where:{id:1}}); //通過where設置查詢條件 this.app.model.Clazz.create({name:'xxx'}); //添加數據 this.app.model.Clazz.update({name:'xxx'},{where:{id:1}}); //通過條件修改數據 this.app.model.Clazz.destroy({where:{id:1}}); //通過條件刪除數據

app\controller\clazz.js

'use strict';const Controller = require('egg').Controller; class ClazzController extends Controller {// ?restful接口 index/create/destroy/update// ?先不做異常處理async index() {const { ctx } = this;const clazzList = await this.app.model.Clazz.findAll();/* const id = ctx.request.query.id;const clazzList = await this.app.model.Clazz.findAll({where: {id,},}); */ctx.body = {code: 200,data: clazzList,};}async create() {const { ctx } = this;const name = ctx.request.body.name;await this.app.model.Clazz.create({name,});ctx.body = '添加成功';}async destroy() {const { ctx } = this;const id = ctx.params.id;await this.app.model.Clazz.destroy({where: {id,},});ctx.body = '刪除成功';}async update() {const { ctx } = this;const id = ctx.params.id;const name = ctx.request.body.name;await this.app.model.Clazz.update({ name }, {where: {id,},});ctx.body = '更新成功';} }module.exports = ClazzController;

app\router.js

添加外鍵

app\model\student.js

'use strict'; module.exports = app => {const { STRING, DOUBLE } = app.Sequelize;// ?默認情況下sequelize將自動將所有傳遞的模型名稱(define的第一個參數)抓換位復const Student = app.model.define('student', {// *自動生成idname: STRING,achievement: DOUBLE,});Student.associate = function() { // ?所屬哪個班級，指向班級的主鍵app.model.Student.belongsTo(app.model.Clazz, {foreignKey: 'clazz_id',as: 'clazz',});};return Student; };

app\controller\student.js

Service(服務層)

簡單來說，Service就是在復雜業務場景下用于做業務邏輯封裝的抽象層，提供這個抽象有一下幾個好處：

保持Controller中的邏輯更加簡潔

保持業務邏輯的獨立性，抽象出來的Servive可以被多個Controller重復調用

定義servive

app\service\student.js

'use strict'; const Service = require('egg').Service;class StudentService extends Service {async getStudentList() {try {const studentList = await this.app.model.Student.findAll();return studentList;} catch (e) {return null;}}async createStudent(name, achievement, clazz_id) {try {await this.app.model.Student.create({name,achievement,clazz_id,});return true;} catch (e) {return false;}}async updateStudent(name, achievement, clazzId, id) {try {await this.app.model.Student.update({ name, achievement, clazzId }, {where: {id,},});return true;} catch (e) {return false;}}async deleteStudent(id) {try {await this.app.model.Student.destroy({where: {id,},});return true;} catch (e) {return false;}} }module.exports = StudentService;

app\controller\student.js

'use strict'; const Controller = require('egg').Controller;class StudentController extends Controller {async create() {const { ctx } = this;const name = ctx.request.body.name;const achievement = ctx.request.body.achievement;const clazz_id = ctx.request.body.clazz_id;/* await this.app.model.Student.create({name: names,achievement: achievements,clazz_id: clazzId,});ctx.body = '添加成功'; */// ?調用serviceconst result = await ctx.service.student.createStudent(name, achievement, clazz_id);if (result) {ctx.body = {code: 200,msg: '添加成功',};} else {ctx.body = {code: 500,msg: '數據添加失敗',};}}async index() {const { ctx } = this;/* const studentList = await this.app.model.Student.findAll();ctx.body = {code: 200,data: studentList,}; */// ?調用serviceconst list = await ctx.service.student.getStudentList();// const list = null;if (list) {ctx.body = {code: 200,data: list,};} else {ctx.body = {code: 500,msg: '服務器異常',};}}async update() {const { ctx } = this;const id = ctx.params.id;const name = ctx.request.body.name;const achievement = ctx.request.body.achievement;const clazzId = ctx.request.body.clazzId;// ?調用serviceconst update = await ctx.service.student.updateStudent(name, achievement, clazzId, id);if (update) {ctx.body = {code: 200,msg: '更新成功',};} else {ctx.body = {code: 400,msg: '更新失敗',};}}async destroy() {const { ctx } = this;const id = ctx.params.id;const destroy = await ctx.service.student.deleteStudent(id);if (destroy) {ctx.body = {code: 200,msg: '刪除成功',};} else {ctx.body = {code: 400,msg: '刪除失敗',};}} } module.exports = StudentController;

部署

前端打包好的項目會生成dist文件夾，將dist文件夾內的內容移動到egg項目下的app/public文件夾內。

配置Egg的靜態文件訪問路徑

config\config.default.js

/* eslint valid-jsdoc: "off" */'use strict';/*** @param {Egg.EggAppInfo} appInfo app info*/ const path = require('path'); module.exports = appInfo => {/*** built-in config* @type {Egg.EggAppConfig}**/const config = exports = {};// use for cookie sign key, should change to your own and keep securityconfig.keys = appInfo.name + '_1620442177015_7667';// add your middleware config hereconfig.middleware = [];// add your user config hereconst userConfig = {// myAppName: 'egg',};config.security = {csrf: {enable: false,},};config.view = {defaultViewEngine: 'nunjucks',};config.cors = {origin: '*',allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',};config.jwt = {secret: 'maguodong',};config.sequelize = {dialect: 'mysql',database: 'eggdemo',host: '127.0.0.1',port: 3306,username: 'root',password: 'mgd12345',timezone: '+08:00',};// ?配置Egg的靜態文件訪問路徑config.static = {prefix: '/',dir: path.join(appInfo.baseDir, 'app/public'),};return {...config,...userConfig,}; };

啟動和關閉

啟動:npm start 關閉:npm stop

用ctrl+c不能停止服務

總結

以上是生活随笔為你收集整理的Egg.js框架的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： U Sparkle 开发者计划招募中！
下一篇： win10 64位 JavaJDK的下载