当前位置：首页 > article >正文

koa、vue安装与使用

article 2024/11/12 15:31:41

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>

页面访问：