Vue3+ElementPlus+Koa2 全栈开发后台系统

Download: Vue3+ElementPlus+Koa2 全栈开发后台系统Vue3 ElementPlus Koa2-介绍

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。
到目前为止，Element每月已经获得了48800个Github Stars和100万NPM下载量。超过530位来自社区的贡献者已经作出4400个承诺，参与我们的团队的维护。Element Plus for Vue 3.0，Vue于2020年9月发布了3.0版本。为了支持最新的Vue 3.0语法，Element UI有机会发布一个包含大量内部更改和改进的新主要版本。经过23个alpha版本的开发，我们很高兴地宣布，Element Plus的Vue 3.0测试版今天发布了!
Koa2一个简约、扩展性强，基于Node.js平台的web开发框架。

Vue3+ElementPlus+Koa2全栈开发后台系统具体实现

环境准备

查看node --version或npm --versioncnpm(选装)npm install -g cnpmcnpm查看cnpm --version安装npm install -g yarn查看yarn --version安装npm install -g @vue/clicnpm install -g @vue/cliyarn global add @vue/cli以上命令任选查看vue --version升级npm update -g @vue/cli或yarn global upgrade --latest @vue/cli

搭建vue3.0项目

vue create [projectName]...

集成element-plus

集成Koa2

常用中间件:

一、koa-bodyparser二、koa-router三、koa-views + ejs四、koa-static五、koa-session六、koa-jwt七、koa-helmet八、koa-compress九、koa-logger十、koa-co͵��,����nvert十一、koa-compose十二、koa-http-request十三、koa-conditional-get十四、koa-csrf十五、koa-ejs十六、koa-etag十七、koa-favicon十八、koa-generic-session十九、koa-onerror二十、koa-redis二十一、koa-resource-router二十二、koa-rewrite二十三、koa-rt二十四、koa-safe-jsonp二十五、koa-static-cache

koa-router使用

const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router = new Router();//实现 '/'、'/koa'两个路由层级router    .get('/',(ctx,next)=>{        ctx.body="Index page";    })    .get('/koa',(ctx,next)=>{        ctx.body="Koa page";    });app  .use(router.routes())  .use(router.allowedMethods());app.listen(3000,()=>{    console.log('starting at port 3000');});

Koa2中 Cookie 的使用

// 设置Cookie的值ctx.cookies.set(name, value, [options])// 获取Cookie的值ctx.cookies.get('name')

Koa2 中设置全局变量可以通过 ctx.state.变量名 如下：

router.use(async (ctx, next) => {  //全局的G变量  ctx.state.G = {    username: ctx.session.username  }})

koa2 中实现 301 重定向和 302 重定向，只需要通过设置 ctx.status; 然后通过 ctx.redirect('/cart');进行跳转

// koa2 301重定向代码：ctx.status = 301ctx.redirect('/cart')// 302重定向代码：ctx.status = 302ctx.redirect('/cart')

...
<br>

<br>