erp前端项目总结

太极ERP前端开发总结

一、项目目录(vue-cli2)

├── build
├── config
├── dist //打包后生成的静态页面文件
├── src  
│   ├── assets //全局静态图片 
│   ├── components //所有组件(项目核心部分)
│   │   ├── element //业务代码
│   │   ├── layout //布局代码（导航，头，和主体部分）
│   │   ├── login //登录代码
│   │   ├── public//公用功能组件 
│   ├── filters //全局过滤器
│   ├── my-theme //全局样式表
│   ├── router //路由
│   ├── sever
│   │   ├── api.js //全局API
│   │   ├── method // API方法
│   │   ├── https.js // axios封装，路由请求响应拦截等
│   ├── store //状态管理
│   ├── utils //公用方法
│   │   ├── public_function //公用api增删改查审核作废等方法
│   │   ├── fetch.js //签名生成方法
│   │   ├── rules.js //封装验证方法
│   ├── App.vue //父组件
│   ├── main.js //入口文件
└── static //静态资源

项目目录是采用 vue-cli 自动生成的，如需添加依赖，"$ npm install 依赖名" 即可（如果仅用于开发阶段，则使用 $ npm install --save-dev ）。

注：-save 和 save-dev 可以省掉你手动修改 package.json 文件的步骤。

npm install module-name -save 自动把模块和版本号添加到 dependencies 部分。
npm install module-name -save-dev 自动把模块和版本号添加到 devdependencies 部分。

​现已将 vue-cli2 升级到 vue-cli3 ，大大加快了项目编译及打包速度， 但 src 下的目录结构与业务代码几乎没有变动。
​

二、开发实践

(一) 权限

1. 权限需求定位到每个页面的每个按钮（主要是列表页）: 添加、修改、查看、审核、作废、反审核、打印等，如无权限直接屏蔽该按钮。
2. 当路由改变时，我们需要动态的监听该页面是否具有权限，可在 router.afterEach 钩子函数中设置（ router/index.js ）
3. 将获取到的权限存放到本地存储里，相应在页面里获取本地存取的权限值然后控制页面上按钮的显示状态。

• 页面使用方法

  
  /**
  1. 在 created 或者 mounted 钩子函数初始化时获取
  2. 在template模板中给按钮绑定权限
  **/
  data(){
      return {
          authority: {},
      }
  },
  created() {
      this.authority = JSON.parse(localStorage.getItem("authority")); 
  } 
  

  
  <!-- template -->
  <el-button icon="el-icon-circle-plus-outline" @click="salesAddF" v-if="authority.b_add == 1">新增</el-button>
  <el-button icon="el-icon-delete" @click="deleteF" v-if="authority.b_del == 1">删除</el-button> 
  

  
  // router/index.js
  import Vue from "vue";
  import axios from "@/sever/https";
  import Router from "vue-router";  
  Vue.use(Router);
  const router = new Router({ 
      base: '/tomcat/',
      routes: [{
              path: "/login",
              name: "登录页面",
              component: login,
          },
          ...],
      ]
  });
  router.beforeEach((to, from, next) => { 
      var objArr = str.split("/", 3); 
      if (to.matched.some(r => r.meta.requireAuth)) {
          if (store.state.system_app.token) {  
              //登录状态当监测到路由变化，则去请求进入页面的权限接口
                  axios({
                      method: "get",
                      url: "xxxRuleApiUrl",
                      params: { code: objArr[2] }
                  }).then(res => {
                      if (res.data.code == 200) { 
                          if (res.data.data.is_role == 'Y') {
                             //如果该页面设有权限则将权限详情先存于本地
                             window.localStorage.removeItem("authority")
                              let authority = JSON.stringify(res.data.data.role_list); 
                              localStorage.authority = authority；                                next();
                          } else {
                              // 未有页面访问权限
                              next({
                                  path: "/isRole",
                                  query: {
                                      redirect: to.fullPath
                                  }
                              });
                          } 
                          next();
                      }
                  });
  
          } else {
              next({
                  path: "/login",
                  query: {
                      redirect: to.fullPath
                  }
              });
          }
      } else {
          next();
      }
  }); 
  export default router; 
  

(二) 各组件间传递数据

1. 点击 vuex官网
2. 项目中引入了vuex，使组件间传值更加方便，避免使用中间件 bus 等
3. 如果是简单的子父传参，建议使用 $parent / $children / $emit / $attrs / $refs.name 来减少代码量，并更易于读写，避免污染全局（灵活运用）
4. 项目中大量运用到 vuex 的主要是解决列表页、新增页、修改页、查看页的来回跳转

例，使用vuex存储变量，切换新增修改查看页面

• 页面调用方法

  
  // 使用方法：调用 ACTION 的salesorderIndexACT方法，改变modulename为Index，
  // 切换组件到首页并更新视图
  // salesorderAdd.vue
  import { mapActions, mapGetters } from "vuex";
  methods:{
      ...mapActions([
        "salesorderAdd",
        "salesorderIndexACT"
      ]),
      goBack() {
      // 回到