目录

一、先决条件

二、create a vue project

三、前端编码实现

3.1-创建Book.vue

3.2-修改router目录下的index.js文件

3.3-App.vue中引入Book.vue

四、调用后台接口


特别声明:本文百分之九十的内容是来自于B站上一位up主录制的前后端分离开发的视频,作者自己跟着手敲了一遍之后在这里记录了一下来。所以这篇文章的类型勉强算是翻译吧

原B站链接:https://www.bilibili.com/video/BV137411B7vB

我们来一步一步的实操一下,利用vue搭建一个最简单的前端应用框架。

一、先决条件

安装了node.js环境,安装了npm。vue的版本是3.0以上的(3.0以上可以使用vue ui命令通过更友好的界面来创建vue项目)。如果vue不是3.0以上的可以按照下面的命令来进行升级。(windows系统好使)

#查看vue版本号
vue -V 

#卸载旧版本vue
npm uninstall vue-cli -g

#安装最新版本vue
npm install -g @vue/cli

二、create a vue project

cmd 输入 vue ui 命令,打开如下界面:

1、选择创建选项卡

2、在中间选择我们本次创建的工程要保存的本机的目录

3、点击再次创建新项目

之后来到如下界面,输入项目名称,在Git选项处,如果我们想要把代码放到github上就填写一个自己的仓库url,如果说不放的话就关闭这个选项卡,然后点击下一步

预设选项卡中选择手动配置,进入如下功能选择界面,只需要将下图圈住的Vuex和Router打开,然后代码校验的部分关闭

下一步之后达到配置项,打开历史记录选项,点击创建项目

然后查看提示,不保存模板直接创建

创建过程时长与网速有关,网速不好会等很久,如果太差可能会创建失败,此处需要耐心等候,作者五六分钟才好

创建成功之后,会来到如下界面

我们可以通过这个命令行界面,来测试启动一下这个工程,点击任务选择serve,点击运行,运行成功右侧就会有一个对号,下图是已经运行成功的。

点击仪表盘右侧的输出,会看到日志信息及工程启动之后的url

我们点击http://localhost:8080/ 成功打开这个vue首页,就说明我们的工程创建工程了。这个时候我们就可以把运行vue ui的命令行窗口关掉了,因为我们要使用

三、前端编码实现

我们选择IntelliJ的WebStorm来编码(也可以选择VsCode),打开之后可以看到工程的大致目录结构如图所示:此处不对目录结构过多赘述有想了解的同学可以去vue官网查看详细教程。

我们这里只来看一下App.vue这个文件,为什么来看这个文件呢,因为他是vue工程的主窗口,vue工程是一个单页面结构的工程,他只有一个入口文件就是主窗口App.vue文件,所以在这里我们如果想要开发我们的代码的话也得在这里添加。接下来我们就一步一步的来实现一个可以展示图书信息的页面。

3.1-创建Book.vue

在views目录下新建。关于一些vue的语法,大家可以自己去vue官网上学习,资料比较xia

<template>
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Book.vue",
        data(){
            return {
                books:[
                    {
                        id: 1,
                        name: '三国演义',
                        author:'罗贯中'
                    },{
                        id: 2,
                        name: '西游记',
                        author:'吴承恩'
                    },{
                        id: 3,
                        name: '水浒传',
                        author:'施耐庵'
                    },
                    {
                        id: 4,
                        name: '红楼梦',
                        author:'曹雪芹'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>
 

<template>中写的是HTML代码,这里我们就用一个div包了一个table表格来做一个简单的数据展示的元素。我们这里还用到了vue的一个v-for标签,具体的其他语法可以

<script>中写的是js代码,在这里需要注意的是data当中定义的数据的key要和上面v-for标签中的一致,不然上面就引用不到这个数据了

<style>中写的是样式代码

3.2-修改router目录下的index.js文件

只需要添加截图中圈住的两块代码即可,先在上面引入Book.vue。然后在routes中绑定url和vue文件的关系。

3.3-App.vue中引入Book.vue

router-link中to属性配置的路径就是我们在上面的index.js中配置的路径。

上面的完成之后,在webStorm中打开terminal窗口,运行 npm run serve启动成功之后访问 http://localhost:8080/,我们就能看到这样的效果

大家可能发现了,上面的一系列过程都是前端写死的数据,跟后台没有半毛钱关系啊?对,上面的过程确实是跟后台没有任何的交互,这样写只是为了让大家体会一下,纯前端开发的开发过程,双方约定好自己接口的数据格式之后,前端就是先在自己的前端工程里面造一些假的数据,让页面先跑起来,然后等后端的接口开发好了,就可以调用后台接口传递过来的参数来进行页面的展示和联调了。

四、调用后台接口

4.1添加axios组件

vue发送ajax请求调用后台接口需要使用axios组件,所以我们需要先把组件添加到项目中,在webstorm的terminal窗口输入命令 

vue add axios 

成功添加之后,我们的项目中就会多一个披露定时的目录。如下图:

4.2编写代码

在我们之前写好的Book.vue的script标签中加上如下代码:

created() {
            const _this = this;
            axios.get('http://127.0.0.1:8082/book/list').then(function (resp) {
                _this.books = resp.data

            })
        }

如下图所示,加到圈住的位置,同时上面的假数据就可以删除掉了。

created()方法是一个页面加载就会被执行的一个方法,实现出来的效果就是我们只要一加载Book.vue这个页面执行下面的代码。后台传递过来的数据就会被绘制到表格中。

最终实现的效果如下图所示,点击BookList就会加载出来数据库中所有的图书信息。

Logo

前往低代码交流专区

更多推荐