koa官网：https://koajs.com/
首选创建一个文件夹：mkdir koaDemo (cmd即可)
文件夹初始化：npm init (cmd即可)
初始化完成后就会产生一个package.json的文件。
安装：
npm install koa --save (vscode的控制台中安装）
安装完成后在package.json文件中就会产生koa的依赖：
同时，在koaDemo文件夹下还会产生koa 相关的依赖（类比Maven）
官网的示例copy到js文件中（保存js文件）
const Koa = require('koa'); //引入koa的包
const app = new Koa(); // 创建Koa的实例
app.use(async ctx => {
ctx.body = 'Hello World';
});
app.listen(3000); // 监听的端口号执行js文件：node app.js
网页访问：
koa轻量化的意思：所有内容都是中间件（middleware），都是接口
ctx是context，包括了request和response，所需要的东西都可以去ctx中去拿
以上代码的这部分是中间件：
async ctx => {
ctx.body = 'Hello World';
})模拟dispatcher的功能：
安装router：npm install @koa/router --save (vscode的控制台中安装）
router的文档：https://github.com/koajs/router/blob/master/API.md
代码：
const Koa = require('koa');
const Router = require('@koa/router');
const app = new Koa();
const router = new Router();
router.get('/hello', (ctx, next) => {
ctx.body = 'Hello World!!!!';
})
.get('/world', ctx => ctx.body = 'world hello!!!!')
.get('/api', ctx => ctx.body = {"name":"shanghai", "time":"20241109"})
;
app.use(router.routes())
.listen(4000); // 监听的端口号
npm install koa-static koa-mount --save
const Koa = require('koa');
const Router = require('@koa/router');
const mount = require('koa-mount');
const serve = require('koa-static');
const app = new Koa();
const router = new Router();
router.get('/hello', (ctx, next) => {
ctx.body = 'Hello World!!!!';
})
.get('/world', ctx => ctx.body = 'world hello!!!!')
.get('/api', ctx => ctx.body = {"name":"shanghai", "time":"20241109"})
;
app
.use(mount('/static', serve('.')))
.use(router.routes())
.listen(4000); // 监听的端口号
创建一个静态的html页面hello.html：
在浏览器访问页面：
koa和前端项目打成一个包。
引入vue：
再次访问页面会变慢。
vue：页面的组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id="app">hello</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello vue!' //message
},
template:`
<div>
<div>{{message}}</div>
<input v-model="message"></input>
<Button v-on:click="myClick">submit</Button>
</div>
`,
methods:{
myClick:function(){
console.log('clicked');
}
}
})
</script>
</body>
</html>
引入axios的包：<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
axios的GitHub：https://github.com/axios/axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
</head>
<body>
<div id="app">hello</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello vue!', //message
fileName: ''
},
template:`
<div>
<div>{{message}}</div>
<input v-model="fileName"></input>
<Button v-on:click="myClick">submit</Button>
</div>
`,
methods:{
myClick: async function(){
let resp = await axios.get(`/static/${this.fileName}`);
this.message = resp.data;
}
}
})
</script>
</body>
</html>
vue组件：
<body>
<div id="app">hello</div>
<script>
Vue.component('Result',{
data: function (){
return{
}
},
template: '<div>hello</div>'
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello vue!', //message
fileName: ''
},
template:`
<div>
<div>{{message}}</div>
<input v-model="fileName"></input>
<Button v-on:click="myClick">submit</Button>
<Result></Result>
</div>
`,
methods:{
myClick: async function(){
let resp = await axios.get(`/static/${this.fileName}`);
this.message = resp.data;
}
}
})
</script>
</body>引入iView组件：（可以改变前端的样式）
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>mount.js
const Koa = require('koa');
const Router = require('@koa/router');
const mount = require('koa-mount');
const serve = require('koa-static');
const app = new Koa();
const router = new Router();
router.get('/hello', (ctx, next) => {
ctx.body = 'Hello World!!!!';
})
.get('/world', ctx => ctx.body = 'world hello!!!!')
.get('/api', ctx => ctx.body = [{"location":"shanghai", "time":"20241109"},
{"location":"shanghai", "time":"20241109"}]
)
;
app
.use(mount('/static', serve('.')))
.use(router.routes())
.listen(4000); // 监听的端口号<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id="app">hello</div>
<script>
Vue.component('Result',{
props:['tableData'],
data: function (){
return{
columns1:[{title:"location",key:"location"},{title:"time",key:"time"}]
}
},
template: '<Table :columns="columns1" :data="tableData"></Table>'
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello vue!', //message
fileName: '',
apiData:[]
},
template:`
<div>
<div>{{message}}</div>
<input v-model="fileName"></input>
<Button v-on:click="myClick">submit</Button>
<Result v-bind:tableData="apiData"></Result>
</div>
`,
methods:{
myClick: async function(){
// let resp = await axios.get(`/static/${this.fileName}`);
// this.message = resp.data;
let resp2 = await axios.get(`/api`);
this.apiData = resp2.data;
}
}
})
</script>
</body>
</html>页面访问：
