Vue-Element和YII搭建后台

阅读更多

花3周空余时间做了一件事：看vue的官方文档然后用vue开发后台页面，更熟练了vue一些语法等感觉核心有两块：数据绑定，组件;

然后看公司的一位同事在用vue-element开发新后台，然后我自己就想着用vue-element去开发一套后台系统，然后就去看vue-element的文档，网上有一整套的vue-element-admin后台系统在自己的电脑上安装运行了，但是这套后台系统的数据需要请求接口去完成(现实中不太可能去开发后台接口)，我自己将原来用YII框架搭建的后台植入vue-element，需要注意的几个问题：

1.vue-element对变量的类型(整数/字符串)有区分限制；

2.axios({.....})  跨域问题，Vue支持axios和ajax两种写法；

3.尽量不要用watch方法来监听数据变化，据说耗性能；

4.请求url报错400,是我YII对POST和FILE的安全过滤；

5.POST请求有3种请求头：application/json;charset=UTF-8；application/x-www-form-urlencoded；等

主要功能：增删改查：列表，搜索，分页，二级下拉联动，导出，时间控件，弹层，上传图片，保存，外链等常用基本功能：

vue官方文档地址：https://cn.vuejs.org/v2/guide/

vue-element官方文档地址：https://element.faas.ele.me/#/zh-CN/component/layout

建议大家先看文档，我大概看了2遍吧；先看一下效果：

搜索后：

 

编辑：联动下拉框，上传多张图，各种开关按钮，时间控件(vue-element提供源码和示例)等

 弹层：

 由于代码较多，我这里就只上传前端页面，稍后我会把相关代码上传到github上。

php代码我就不贴出来了，我就简单贴出列表页面前端代码(并附上注释说明)：index.html

use yii\helpers\Url;

$this->title = '测试》测试订单列表';

$this->params['breadcrumbs'][] = $this->title;

?>

 

   

       

           

               

           

           

                              :programme_child_id.sync="listQuery.level_id">

                              

           

               

           

           

               

                查询

                导出

           

       

   

   

       

                  :cell-class-name="cellClassName">

           

               

           

           

               

           

           

               

           

           

               

                   

               

               

                   

               

           

            

           

               

                   

               

               

                   

               

               

                   

               

           

            

           

               

           

            

           

               

           

       

       

       

                    @pagination="fetchData"/>

   

 

 

 

上面只是列表分页的html，编辑页面在附件里，大家可以去vue-element官网去看一下文档有实例和代码还是很方便的不是太难，https://element.faas.ele.me/#/zh-CN/component/layout

 

 

 

 

 

• 
• 大小: 150.9 KB

• 
• 大小: 31.7 KB

• 
• 大小: 42.4 KB

• 
• 大小: 17.9 KB

• vue-code.zip (6.6 KB)
• 下载次数: 0

• vue-code.zip (6.6 KB)
• 下载次数: 0

• 查看图片附件