Download: Vue3+ElementPlus+Koa2 全栈开发后台系统
Vue3+ElementPlus+Koa2全栈开发后台系统具体实现
环境准备
查看
node --version
或
npm --version
cnpm(选装)
npm install -g cnpm
cnpm查看
cnpm --version
安装
npm install -g yarn
查看
yarn --version
安装
npm install -g @vue/cli
cnpm install -g @vue/cli
yarn 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-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 = 301 ctx.redirect('/cart')
// 302重定向代码： ctx.status = 302 ctx.redirect('/cart')
...
<br>
<br>
