iview-admin 学习

一、跨域设置

• 1. 在项目的 vue.config.js中增加代码
     注意：上一段代码后加逗号

productionSourceMap: false,
devServer: {
  　　　　　　open: true,
  　　　　　　host: 'localhost',
  　　　　　　port: 8080,
  　　　　　　https: false,
  　　　　　　//以上的ip和端口是我们本机的;下面为需要跨域的
  　　　　　　proxy: {  //配置跨域
  　　　　　　　　'/app': {
  　　　　　　　　　　target: 'http://local.crm.net/app/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
  　　　　　　　　　　ws: true,
  　　　　　　　　　　changOrigin: true,  //允许跨域
  　　　　　　　　　　pathRewrite: {
  　　　　　　　　　　　　'^/app': ''  //请求的时候使用这个api就可以
  　　　　　　　　　　}
  　　　　　　}
  　　　　}
  　　}

• 2. src/config/index.js中修改baseUrl 为proxy中设的app

  /**
   * @description api请求基础路径
   */
  baseUrl: {
    dev: '/app/',
    pro: 'https://produce.com'
  },

二、登录流程

• 1.在src/view/login/login.vue中 handleLogin

handleSubmit ({ userName, password }) {
      this.handleLogin({ userName, password }).then(res => {
        this.getUserInfo().then(res => {
          this.$router.push({
            name: this.$config.homeName
          })
        })
      })
    }

• 2.跳转到src/store/module/user.js 中handleLogin

// 登录
    handleLogin ({ commit }, { userName, password }) {
      userName = userName.trim()
      return new Promise((resolve, reject) => {
        login({
          userName,
          password
        }).then(res => {
          const data = res.data.data
          commit('setToken', data.accessToken)          // login成功后，将token保存
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    },

• 3.调用src/api/user.js 中的login方法 进行ajax提交

export const login = ({ userName, password }) => {
  const data = {
    userName,
    password
  }
  return axios.request({
    url: 'user/login',
    data,
    method: 'post'
  })
}

三、请求时headers中带token

登录成功后，访问后端接口时，都要带上token进行身份验证。
/src/libs/axios.js中 headers增加相应的项

getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        'ACCESSTOKEN': store.state.user.token    //取得本地保存的token
      }
    }
    return config
  }

四、根据权限显示左侧菜单

• 1. 后台返回user信息时带上 access数组，即用户拥有的权限
• 2. src/router/routers.js中给页面加上access

 		path: 'level_2_2',
        name: 'level_2_2',
        meta: {
          access: ['super_admin','user'],
          icon: 'md-funnel',
          showAlways: true,
          title: '二级-2'
        },

五、页面注册及语言设置

src/router/routers.js 中设置

{
    path: '/sets',
    name: 'sets',    \\这里的name与 src/locale/lang/zh-CN.js 中的标签对应显示中文 
    meta: {
      title: '系统设置',
      icon: 'ios-hammer'    // 前面的图标
      },
    component: Main,
    children: [                              // 子菜单设置
      {
        path: 'base_set',
        name: 'base_set',
        meta: {
          icon: 'ios-cog',
          title: '基本设置'
        },
        component: () => import('@/view/sets/base_set.vue') 			 // 子菜单对应页面
      },
      {
        path: 'email_set',
        name: 'email_set',
        meta: {
          icon: 'md-filing',
          title: '邮件设置'
        },
        component: () => import('@/view/join-page.vue')
      },
      {
        path: 'sms_set',
        name: 'sms_set',
        meta: {
          icon: 'md-mail',
          title: '短信设置'
        },
        component: () => import('@/view/join-page.vue')
      },
      {
        path: 'line_set',
        name: 'line_set',
        meta: {
          icon: 'ios-link',
          title: '线路设置'
        },
        component: () => import('@/view/join-page.vue')
      },
      {
        path: 'app_set',
        name: 'app_set',
        meta: {
          icon: 'md-phone-portrait',
          title: 'App设置'
        },
        component: () => import('@/view/join-page.vue')
      },
      {
        path: 'app_version',
        name: 'app_version',
        meta: {
          icon: 'md-git-pull-request',
          title: 'App版本'
        },
        component: () => import('@/view/join-page.vue')
      }
    ]
  },

语言切换在 src/local/lang/目录下

六、页面表单的提交与php后台接收

• 1.在vue页面中创建表单，created时加数据，submit时提交

<template>
    <Form :model="formItem" :label-width="80" @submit.prevent="submit($event)">
        <FormItem label="服务器">
            <Input v-model="formItem.smtp_server" placeholder="服务器..."></Input>
        </FormItem>            
        <FormItem label="Text">
            <Input v-model="formItem.test_eamil_info" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="测试邮件内容..."></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit()">提交</Button>
            <Button @click="handleReset()" style="margin-left: 8px">取消</Button>
        </FormItem>
    </Form>
</template>
<script>
  import {
    getSystemEmailSets,
    setSystemEmail
  } from '@/api/system'				//引入src/api/system.js中的远程get set方法
    export default {
        data () {
            return {
                formItem: {
                    smtp_server: '',                 
                    test_eamil_info: ''
                }
            }
        },
        created(){
          this.loadData();   //打开页面时加载数据        
        },
        methods: {
         	//加载
            loadData(){
              let that = this;
              getSystemEmailSets().then(res => {
                that.formItem = res.data.data;
              })
            },
            //提交表单
            handleSubmit() {
                  var formData = this.formItem;
                  setSystemEmail(formData).then(res => {
                     this.$Message.info(res.data.msg)
                  })
                },
            handleReset(){
 				this.loadData();  
            }


        }

    }
</script>

• 2.在api中定义远程访问方法 get set

import axios from '@/libs/api.request'

export const getSystemEmailSets = () => {
  return axios.request({
    url: 'system/get_email_set',
    method: 'get'
  })
}
export const setSystemEmail = (data) => {
  return axios.request({
    url: 'system/set_email',
    data,
    method: 'post'
  })
}

• 3. 后台接口实现

//取得系统邮箱设置
    public function get_email_set(){
        if(Request::isGet()) {
            $smtp = Db::name('config')->where('inc_type','smtp')->select();
            $info = convert_arr_kv($smtp,'name','value');
            return json(['code' => 1, 'msg' => '邮箱设置成功!', 'data'=>$info]);
        }
    }
    //更新系统邮箱设置
    public function set_email(){
        if(Request::isPost()) {
            $datas = input('post.');
            foreach ($datas as $k=>$v){
                Db::name('config')->where([['name','=',$k],['inc_type','=','smtp']])->update(['value'=>$v]);
            }
            return json(['code' => 1, 'msg' => '邮箱设置成功!']);
        }
    }