精华内容
下载资源
问答
  • 【VUE】vue后台常用模板

    万次阅读 多人点赞 2019-04-11 15:30:13
    vue后台常用模板: element文档: http://element-cn.eleme.io/#/zh-CN/component/installation vue API: https://cn.vuejs.org/v2/api/ 以下是在下收集的三个常用的vue模板 1、vue-manage-system git地址:...

    vue后台常用模板:

    element文档: http://element-cn.eleme.io/#/zh-CN/component/installation
    vue API: https://cn.vuejs.org/v2/api/

    以下是在下收集的三个常用的vue模板

    1、vue-manage-system

    git地址:https://github.com/lin-xin/vue-manage-system
    线上地址: https://lin-xin.gitee.io/example/work/#/login
    模板如图:
    在这里插入图片描述


    2、vue-element-admin
    git地址:https://github.com/PanJiaChen/vue-element-admin
    国际化版本:https://github.com/PanJiaChen/vue-element-admin/tree/i18n

    中文线上预览:https://panjiachen.github.io/vue-element-admin/#/dashboard

    IE兼容处理:参考文章
    模板如图:
    在这里插入图片描述


    3、vuejs 和 element 搭建的一个后台管理界面

    相关技术:
    vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。
    element:基于vuejs2.0的ui组件库。
    vue-router:一般单页面应用spa都要用到的前端路由。
    vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

    线上地址:https://taylorchen709.github.io/vue-admin/#/login
    git地址:https://github.com/taylorchen709/vue-admin
    模板如图:
    在这里插入图片描述
    使用:

    install dependencies

    npm install
    serve with hot reload at localhost:8081

    npm run dev
    build for production with minification

    npm run build


    4、基于Vue实现后台系统权限控制

    基于Vue.js 2.x系列 + Element UI 的后台系统权限控制

    git地址:https://github.com/mgbq/vue-permission
    线上地址:https://mgbq.github.io/vue-permission/#/dashboard/dashboard

    使用参考博客: https://blog.csdn.net/qq_32340877/article/details/79416344
    在这里插入图片描述

    展开全文
  • Vue博客后台系统

    2019-08-12 00:19:48
    Vue博客后台系统
  • vue前端 后台管理

    2018-12-27 17:13:07
    vue前端 后台管理
  • Vue 电商后台管理系统后台 API 接口服务器
  • Vue 电商后台管理系统后台 API 接口服务器,里面有数据库脚本,大家可以下载自己运行,此资料仅供学习,谢谢
  • 基于Vue后台管理系统
  • Vue管理后台框架

    2019-04-17 15:23:55
    封装Vue+Element实现一套后台管理框架,实现快速构建和开发
  • vue搭建后台管理系统模板,能帮助你快速配置好webpack等功能,大神必备神器,导入即用,无需更改!
  • vue2.0后台管理系统

    2019-08-15 15:13:51
    vue2.0 +vuex+ element-ui后台管理系统
  • 主要介绍了vue配置后台接口方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue admin后台管理员模板,基于Vue.js 2.x系列 Element UI 2.x 的后台管理系统解决方案
  • vue博客后台管理系统

    2018-07-09 10:44:14
    vuevue-router搭建的博客后台管理系统,实现了文章的展示,添加,修改,文件上传功能
  • 主要介绍了详解使用VUE搭建后台管理系统(vue-cli更新至3.0),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue后台基础框架,根据导航联动Tab。可以参考学习一下vue,界面稍微有点丑,大家可以根据需求进行一些改进。长期维护地址:https://github.com/jack13163/vue-admin-custom
  • vue后台系统

    2018-09-08 14:56:13
    vue后台系统,后台vue组件开发技术,希望对你有帮助。iview,vue
  • vue 模拟后台 vue mock数据 json-server

    千次阅读 2018-11-20 09:59:50
    vue实现ajax获取后台数据是通过vue-resource,首先通过npm安装vue-resource,进入到项目目录里 npm install vue-resource --save 安装完成以后,将vue-resource引入到main.js文件中 import VueResource from '...

    vue实现ajax获取后台数据是通过vue-resource,首先通过npm安装vue-resource,进入到项目目录里

    npm install vue-resource --save


    安装完成以后,将vue-resource引入到main.js文件中

    import VueResource from 'vue-resource' // 导入vue-resource

    使用VueResource

    Vue.use(VueResource);

    具体如下图: 

    上面步骤是用vue-resource来进行数据请求的大体流程,作为前端,我们只关注前端的开发,所以使用mock data来模拟后台穿传数据,主要有两种方式:

    1)json-server模拟数据;此方法只能发送get请求不能发送post请求

    2)express启动数据服务;get请求和post请求都可以发送

    本文先介绍第一种方式:

    在另一篇文章中介绍了第二种方法:https://blog.csdn.net/lxkll/article/details/84336846

    使用json-server工具,可以虚构出后端接口对应的数据,然后在项目里发送特定的请求,就可以发请求拿到模拟的数据。

    首先npm安装

    npm install json-server --save

    然后在build/webpack.dev.conf.js中进行配置

    将一下代码片段加入到webpack.dev.conf.js中

    /*----------------jsonServer---------*/
    /*引入json-server*/
    const jsonServer = require('json-server')
    /*搭建一个server*/
    const apiServer = jsonServer.create()
    /*将db.json关联到server*/
    const apiRouter = jsonServer.router('db.json')
    const middlewares = jsonServer.defaults()
    apiServer.use(middlewares)
    apiServer.use(apiRouter)
    /*监听端口*/
    apiServer.listen(3000, () => {
      console.log('JSON Server is running')
    })

    配置完成以后,重新npm run dev 启动,浏览器输入localhost:3000,出现如下图,说明配置成功

    现在还有一个问题,我们代码的服务端接口是8080,json-server的服务端端口是3000,由于浏览器的同源策略问题,这样请求会存在一个跨域问题,所以这里要做一个服务端代理的配置,配置config/index.js中找到proxyTable,并添加一下内容:

        // 配置转化:从3000 => 8080
        proxyTable: {
           '/api': {
                 changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
                 target: 'http://localhost:3000',// 接口的域名
                 pathRewrite: {
                   '^/api': ''//后面可以使重写的新路径,一般不做更改
                 }
             }
        },

    注意:配置好后,一定要npm run dev 重新启动项目

    这样就可以在localhost:8080下访问接口了

    如果db.json中加入了数据

    则可以访问localhost:8080/api/getList     其中getList 是请求的数据名称

     

    json-server配置就完成了。

    展开全文
  • 主要介绍了Vue结合后台导入导出Excel问题详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 请求后台数据

    万次阅读 多人点赞 2017-04-02 23:11:42
    需要引用vue-resource安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入import VueResource from 'vue-resource' Vue.use(VueResource);在package.json文件中加入 "dependencies": { ...

    需要引用vue-resource

    安装请参考https://github.com/pagekit/vue-resource官方文档

    在入口函数中加入

    import VueResource from 'vue-resource'
    Vue.use(VueResource);

    在package.json文件中加入

     "dependencies": {
        "vue": "^2.2.6",
        "vue-resource":"^1.2.1"
      },

    请求如下

    mounted: function () {
            // GET /someUrl
            this.$http.get('http://localhost:8088/test').then(response => {
                 console.log(response.data);
                // get body data
                // this.someData = response.body;
    
            }, response => {
                console.log("error");
            });
        },

    注意

    1.在请求接口数据时,涉及到跨域请求
    出现下面错误:
    XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.

    解决办法:在接口中设置

    response.setHeader("Access-Control-Allow-Origin", "*");

    2.使用jsonp请求
    但是出现如下错误
    Uncaught SyntaxError: Unexpected token
    查看请求,数据已返回,未解决.

    提交表单

      <div id="app-7">
            <form @submit.prevent="submit">
                <div class="field">
                    姓名:
                    <input type="text"
                           v-model="user.username">
                </div>
    
    
                <div class="field">
                    密码:
                    <input type="text"
                           v-model="user.password">
                </div>
    
    
                <input type="submit"
                       value="提交">
                </form>
        </div>
    
    methods: {
            submit: function() {
              var formData = JSON.stringify(this.user); // 这里才是你的表单数据
    
              this.$http.post('http://localhost:8088/post', formData).then((response) => {
                  // success callback
                  console.log(response.data);
              }, (response) => {
                   console.log("error");
                  // error callback
              });
            }
        },

    提交restful接口出现跨域请求的问题
    查阅资料得知,
    当contentType设置为三个常用的格式以外的格式,如“application/json”时,会先发送一个试探的OPTIONS类型的请求给服务端。在这时,单纯的在业务接口response添加Access-Control-Allow-Origin 由于还没有走到所以不会起作用。

    解决方案:
    在服务端增加一个拦截器
    用于处理所有请求并加上允许跨域的头

    public class CommonInterceptor implements HandlerInterceptor {
    
        private List<String> excludedUrls;
    
        public List<String> getExcludedUrls() {
            return excludedUrls;
        }
    
        public void setExcludedUrls(List<String> excludedUrls) {
            this.excludedUrls = excludedUrls;
        }
    
        /**
         *
         * 在业务处理器处理请求之前被调用 如果返回false
         * 从当前的拦截器往回执行所有拦截器的afterCompletion(),
         * 再退出拦截器链, 如果返回true 执行下一个拦截器,
         * 直到所有的拦截器都执行完毕 再执行被拦截的Controller
         * 然后进入拦截器链,
         * 从最后一个拦截器往回执行所有的postHandle()
         * 接着再从最后一个拦截器往回执行所有的afterCompletion()
         *
         * @param  request
         *
         * @param  response
         */
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
                                 Object handler) throws Exception {
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "*");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers",
                    "Origin, X-Requested-With, Content-Type, Accept");
            return true;
        }
    
        // 在业务处理器处理请求执行完成后,生成视图之前执行的动作
        public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                               ModelAndView modelAndView) throws Exception {
    
        }
    
        /**
         *
         * 在DispatcherServlet完全处理完请求后被调用
         * 当有拦截器抛出异常时,
         * 会从当前拦截器往回执行所有的拦截器的afterCompletion()
         *
         * @param request
         *
         * @param response
         *
         * @param handler
         *
         */
        public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
                                    Object handler, Exception ex) throws Exception {
    
        }
    }

    spring resultful无法像在jsp提交表单一样处理数据必须加上@RequestBody,可以直接json转换object,但是对与没有bean的表单数据,建议转换为map对象,类似@RequestBody Map

    展开全文
  • 基于Vue后台选择推荐

    万次阅读 2017-07-12 21:31:19
    引言: Vue.js目前是业界大名鼎鼎的Web解决方案,具体有点,我这里就不再赘述了,感兴趣的童鞋自行查找阅读,这里罗列一下,这几天自己研究的成果,管理后台。管理后台 Vue Element Admi address: ...

    引言: Vue.js目前是业界大名鼎鼎的Web解决方案,具体有点,我这里就不再赘述了,感兴趣的童鞋自行查找阅读,这里罗列一下,这几天自己研究的成果,管理后台。

    管理后台

    这里写图片描述
    其他还有类似的系统,这里就不再赘述了。

    Vue资料汇总

    展开全文
  • vue电商后台管理系统

    2019-04-24 12:08:41
    电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能
  • Vue连接后台账号登陆

    千次阅读 2018-11-27 15:57:27
    Vue连接后台账号登陆 以下是我的学习总结,由于时间仓促省略了部分操作、、、 要求:输入框输入账号和密码进行数据库匹配,正确则跳转至其他页面,失败则不跳转。 需要工具/软件:vue-router、vue-resource、...
  • 利用iview脚手架Cli和vue2.0搭建的后台管理系统 利用iview脚手架Cli和vue2.0搭建的后台管理系统利用iview脚手架Cli和vue2.0搭建的后台管理系统
  • 超赞的Vue管理后台.zip

    2019-10-10 02:47:44
    超赞的Vue管理后台。.zip,A magical vue admin https://panjiachen.github.io/vue-element-admin
  • 使用Vue调用后台接口

    万次阅读 2019-11-27 17:21:04
    最近在学习使用vue,看完调接口之后,立马使用springboot作为后台,跃跃欲试,很尴尬,刚刚写完一个后台vue调用就出错了 1.跨域的问题 我还以为是需要的接口和我的接口不一致,后来知道并不是端口问题; 解决办法: ...
  • vue后台管理模板

    2018-05-19 13:32:32
    vue后台管理模板
  • 主要为大家详细介绍了vue后台数据时间戳转换成日期格式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue请求后台接口

    万次阅读 多人点赞 2018-09-20 10:03:08
    vue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。 一.使用axios发送AJAX请求: 1.安装axios并引入: 1)npm install axios -S (直接下载axios组件,下载完毕后axios.js就存放在node_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,625
精华内容 39,850
关键字:

vue怎么跟后台

vue 订阅