Vue + ElementUI 制作后台管理类项目

历时2周左右，我终于完成了我的毕业项目。虽说页面不是特别美观，但是对于一个后端开发人员来说，我觉得已经是很不错了。今天主要分享前端页面的实现，以及如何对接后端的接口，先看项目效果。

目录

一、页面展示

登录界面

管理界面

数据 *** 作

二、代码展示

登录页代码

管理页代码

*** 作页代码 

三、重点突破

路由突破

接口突破

四、总结 

一、页面展示 登录界面

管理界面

数据 *** 作

二、代码展示 登录页代码

管理页代码

*** 作页代码 

 可以看到我们用Vue + elementui其实还是遵循三要素，只不过我们的html变成了template模板，里面用的是elem组件。这块感兴趣的朋友可以查看其他人的博客，如何搭建Vue框架，包括路由配置、模板选择，把整个环境搭建好之后我们可以去element官网学习其使用方法，链接如下：Element - The world's most popular Vue UI framework 详细的讲述了从安装到使用的过程，熟悉其原理和逻辑之后基本上就是面向CV编程。

三、重点突破

作为后端开发人员，当然是更加喜欢研究业务逻辑的。分析接口上的一些原理，页面美不美咱也不知道，咱就是能实现功能就行。页面上存在的增删改查等业务逻辑都需要后台接口，那怎么去开发后台接口呢，可以用java也可以用python，两种语言都有框架，例如java的spring MVC、spring boot，python的django、flask等等。有兴趣的朋友可以下去自学一下。今天主要是前台拿到后台给的接口之后怎么去对接好。

路由突破

首先就是引入路由，路由是在route目录下的index.js文件里面配置的，和这里的name名要一直，目的在于找到当前url所属模块，就是通过路由去定位找到的。其次就是判断前台传入字段，把用的到的字段都放在一个字典里，这里我们经常叫做json数据，因为前后端交互的时候就是通过json数据传递的，前台stingify把json数据转成字符串，后台json.dump，json.load的再把字符串形式的json数据转成字典或列表形式。

接口突破

 

 随后重要的点就是我们的方法，可以理解成函数。一般情况下，前端页面做出一些 *** 作之后，会产生逻辑上的变化的这种，我们会将其设置成点击事件、移动事件、拖拽事件等。这里就以点击事件为例子：

可以看到@click后面跟的我们设计好的方法名字，然后再method里面开始对其进行分装，在封装的过程中，需要用到http，或者https网络协议，对网络感兴趣的可以下去研究一下。确定好网络协议、请求方法、请求路径(后台的接口路由)之后我们就可以安装上述代码进行封装了。

随后我们接收后台响应的数据。resp，可以对响应做一些判断、循环等 *** 作。这个可以根据业务需求而定。

四、总结 

总体架构设计就是这样的一个思路，写好一个页面之后其他的都可以举一反三一一列出。设计思路就是：

1、根据需求分析搭建Vue项目框架、模块、路由、配置项、各种插件等

2、设计页面可以参考上述分享的链接进行学习并开发

3、设计样式可以学习一下css的基础知识

4、对接接口：在有接口的前提下，熟悉网络知识、json数据传输知识等

祝愿每一个对计算机感兴趣的朋友都能学有所成。创作不易，记得点赞收藏关注。