Download: Vue3+ElementPlus+Koa2 Full stack development background system

Vue3+ElementPlus+Koa2 full stack development background system concrete implementation

Environment to prepare

View node --version or NPM --version CNPM (optional) NPM install -g CNPM CNPM View CNPM --version Install NPM install -g yarn View YARN --version Install NPM install -g@vue/CLI CNPM install -g@vue/CLI YARN global add @vue/ CLI You can run any of the preceding commands to view vue --version Upgrade NPM Update -g@vue /cli or YARN Global upgrade --latest @vue/cliCopy the code

Set upvue3.0project

vue create [projectName]
...
Copy the code

integrationelement-plus

integrationKoa2

# # # ` ` koa - the router ` ` useCopy the code

const Koa = require(‘koa’); const Router = require(‘koa-router’);

const app = new Koa(); const router = new Router();

/ / ‘/’, ‘/ koa’ two routing hierarchy. The 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’); });

### use of cookies in Koa2Copy the code

// Set the value of the Cookie ctx.cookies. Set (name, value, [options])

// Get the value of Cookie ctx.cookies. Get (‘name’)

Global variables can be set in ### Koa2 via ctx.state. The variable names are as follows:Copy the code

Router.use (async (CTX, next) => {// Global G variable ctx.state.G = {username: ctx.session.username}})

To implement 301 and 302 redirects in koA2, simply set ctx.status; ' 'then pass the' 'ctx.redirect('/cart'); Jump toCopy the code

// koA2 301 redirect code: ctx.status = 301 ctx.redirect(‘/cart’)

// ctx.status = ctx.redirect(‘/cart’)

. <br> <br>Copy the code