安装 NodeJ Koa2、3 + 独立插件 cli脚手架 npm cnpm Vue

安装  NodeJ  npm  cnpm   Koa2、3 + 独立插件   cli脚手架    Vue 安装 在 这里写过了  这两个分开了写 

Nodej:下载 node.js  安装  10.0版本以上

不确定的安装的情况下  来 cmd

npm:(在安装来node的基础之上)

npm install

cnpm:(在安装来npm的基础之上)

  使用淘宝镜像:

1>.官方网址:http://npm.taobao.org

2>.安装:npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

 Koa2、3 + 独立插件

 安装完 npm    再装 Koa   初始化   npm install koa    可以简写  npm i koa

npm init // 初始化package.json

npm i koa // 安装koa2

 安装 独立的独立的插件     koa-router  koa-static koa-better-body

npm i koa-router    (默认是在 当前路径文件夹下 )   加 -gf  是全局
首先,在后端使用Express框架创建API接口,包括登录接口和注册接口,另外还需要创建获取留言列表和添加留言的接口。 在前端页面中,用户需要先登录或注册才能使用留言板功能,可以在登录/注册成功后使用cookie或localStorage等方式将用户信息保存起来,然后发送带有用户信息的Ajax请求到后端获取留言列表或添加留言。 下面是一个示例代码,仅供参考: 后端代码: ``` const express = require('express'); const bodyParser = require('body-parser'); const cookieParser = require('cookie-parser'); const app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.use(cookieParser()); // 假设已经定义好用户列表users和留言列表messages // 登录接口 app.post('/login', (req, res) => { const {username, password} = req.body; const user = users.find(u => u.username === username && u.password === password); if (user) { res.cookie('user', JSON.stringify(user)); // 将用户信息保存到cookie中 res.json({code: 0, message: '登录成功'}); } else { res.json({code: 1, message: '用户名或密码错误'}); } }); // 注册接口 app.post('/register', (req, res) => { const {username, password} = req.body; const user = users.find(u => u.username === username); if (user) { res.json({code: 1, message: '用户名已存在'}); } else { users.push({username, password}); res.json({code: 0, message: '注册成功'}); } }); // 获取留言列表接口(需要登录才能访问) app.get('/messages', (req, res) => { const user = JSON.parse(req.cookies.user || '{}'); if (user.username) { res.json({code: 0, messages}); } else { res.json({code: 1, message: '请先登录'}); } }); // 添加留言接口(需要登录才能访问) app.post('/addMessage', (req, res) => { const user = JSON.parse(req.cookies.user || '{}'); if (user.username) { const {content} = req.body; messages.push({id: messages.length + 1, content, username: user.username}); res.json({code: 0, message: '添加成功'}); } else { res.json({code: 1, message: '请先登录'}); } }); app.listen(3000, () => console.log('Server is running...')); ``` 前端代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言板</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> .message-item { margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style> </head> <body> <div class="register"> <h3>注册</h3> <form id="registerForm"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">注册</button> </form> </div> <div class="login" style="display:none"> <h3>登录</h3> <form id="loginForm"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> </div> <div class="messages" style="display:none"> <h3>留言板</h3> <form id="addMessageForm"> <textarea name="content" placeholder="请输入留言内容"></textarea> <button type="submit">提交留言</button> </form> <div class="message-list"></div> </div> <script> function showMessage(message) { $('.message-list').prepend(`<div class="message-item">${message.username}: ${message.content}</div>`); } $('#registerForm').submit(function(event) { event.preventDefault(); const username = $('input[name=username]', this).val(); const password = $('input[name=password]', this).val(); $.post('/register', {username, password}, function(res) { alert(res.message); }); }); $('#loginForm').submit(function(event) { event.preventDefault(); const username = $('input[name=username]', this).val(); const password = $('input[name=password]', this).val(); $.post('/login', {username, password}, function(res) { alert(res.message); if (res.code === 0) { $('.register, .login').hide(); $('.messages').show(); // 登录成功后获取留言列表 $.get('/messages', function(res) { if (res.code === 0) { res.messages.forEach(showMessage); } else { alert(res.message); } }); } }); }); $('#addMessageForm').submit(function(event) { event.preventDefault(); const content = $('textarea[name=content]', this).val(); $.post('/addMessage', {content}, function(res) { alert(res.message); if (res.code === 0) { showMessage({username: JSON.parse(document.cookie).user.username, content}); } }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值