vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子

前言

一个月的时间,我从一个无人指点又没有战友的的前端小白摸爬滚打,一个人做出了一个有登录,有权限,有增删改查的前后端分离的烂项目

虽然做了很多,也学到了很多,不过烂终究是烂,可能用户看不出来好不好,他们只会看美观不美观,但是我的心里其实是一团糟,总觉得哪哪都是麻绳,理不顺,凑活又能看懂,真的很难受

所以决定从头把已经实现过的功能,或是没能实现的功能再重新梳理一下

不过在这之前我是真的不敢想象自己能在这么短的时间内做到这一步的,因为我的前端基础真的差劲的厉害,所以说加油~只要有心,早晚会有些收获的

栗子功能简介

1.Vue 前端项目功能介绍

本栗子中我们新手可能会关注的功能有:

  • vue-router / 路由 小栗子
  • axios / 发布后修改baseUrl 小栗子
  • axios / 跨域请求 小栗子
  • axios / get / post / delete 小栗子
  • element-ui / 简单菜单样式小栗子
  • element-ui / 分页查询小栗子
  • element-ui / table查看明细小栗子
  • element-ui / 表单验证小栗子
  • element-ui / 表单重置小栗子

2.aps.net web api 项目功能介绍

本栗子中我们新手可能会关注的功能有:

  • webapi 允许跨域请求
  • 数据库是efcode first操作的一个.mdf

3.页面展示

添加

《vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子》

表单验证

《vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子》

添加成功

《vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子》

查询

《vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子》

明细

《vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子》

删除

《vue.js + vue-router + axios + element-ui + web api 跨域调用的小栗子》

4.Git

直接把链接放这里吧,实现方式都很普通,希望有机会帮助到大家

这里是Vue.js前端项目链接

这里是webapi接口项目链接

结语

seaconch就不在这啰嗦啦,上述的功能在小栗子中都已经实现,也是seaconch目前已有的一个月的Vue开发经验来说感觉相对起来比较清晰的小栗子啦

seaconch以后也会慢慢将还未添加进去的功能慢慢屡清楚后添加进小栗子当中的

一起加油吧~

    原文作者:bei6
    原文地址: https://segmentfault.com/a/1190000015256609
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞