基于vue 快速搭建简单前后端分离项目-前台框架

目录

一、先决条件

二、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就会加载出来数据库中所有的图书信息。