# jc_vue_admin_octemp

**Repository Path**: justchange_development_frame/jc_admin_frame

## Basic Information

- **Project Name**: jc_vue_admin_octemp
- **Description**: vue - 后台管理模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-12-16
- **Last Updated**: 2022-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 使用方式


```
# 安装
npm i

# 运行
npm run dev

# 打包
npm run build
```


## 目录结构


1. src  -- 内容目录
   1. api  -- 请求存放处
      1. public.js  -- 通用请求
      1. api-type.js -- 封装好的各种请求
      1. folder -- 对应模块的请求
   2. assets -- 静态资源
   2. component -- 公共组件
   2. config -- 全局配置
      1. element-ui  --  ui框架配置
      1. permission -- 路由守卫配置
      1. request -- axios 请求配置
      1. setting -- 系统设置
   5. directive --  自定义指令
   5. icons -- 图表库
   5. layout  --  布局
   5. mixins  --  全局mixins
   5. router  --  路由
   5. store  --  vuex
   5. styles  --  样式
   5. utils  --  工具、函数
   5. views  --  视图
   5. template -- 模版
2. public -- 公共资源
2. tests -- 测试
2. node_modules -- 模块包
2. vue.config.js -- webpack 配置文件



## 文件命名规范


### 文件夹
#### components
文件夹内，使用大驼峰<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618213345854-c94f7de4-e3d0-4348-ac99-3e8459565aee.png#align=left&display=inline&height=54&margin=%5Bobject%20Object%5D&name=image.png&originHeight=54&originWidth=239&size=3579&status=done&style=none&width=239)<br />

#### 纯小写
由下划线连接 <br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618213137638-9a98dbb8-a14f-4651-b9fb-8015f76fd474.png#align=left&display=inline&height=32&margin=%5Bobject%20Object%5D&name=image.png&originHeight=32&originWidth=332&size=2937&status=done&style=none&width=332)<br />
<br />

### 文件
#### components

1. index.vue，内部主组件为小写的index

![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618213429806-518458ce-4ef9-44cf-bd90-a79d8e4d1c81.png#align=left&display=inline&height=81&margin=%5Bobject%20Object%5D&name=image.png&originHeight=81&originWidth=206&size=5365&status=done&style=none&width=206)

2. 大驼峰，eg： RichText / RichText.vue

![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618216905984-acb693ec-e964-4a29-98ec-598951ebd351.png#align=left&display=inline&height=60&margin=%5Bobject%20Object%5D&name=image.png&originHeight=60&originWidth=259&size=4832&status=done&style=none&width=259)<br />

#### views：

1. 页面文件：小驼峰 ，eg： views / roleSystem.vue
1. 页面拆分的文件，如页面内部组件，大驼峰，eg：views / role / components / RoleForm.vue

![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618217276951-4b477cf0-cd53-4625-b0c0-935536e7e2fe.png#align=left&display=inline&height=429&margin=%5Bobject%20Object%5D&name=image.png&originHeight=429&originWidth=320&size=31566&status=done&style=none&width=320)
#### Mixins
 大驼峰<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618217289160-7d5b4ac6-79c9-4d06-b71f-e0a005ed9cf9.png#align=left&display=inline&height=112&margin=%5Bobject%20Object%5D&name=image.png&originHeight=112&originWidth=271&size=5142&status=done&style=none&width=271)
#### 其余
横杠连接 （ - ），如js文件<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618217308612-4578498c-8440-481b-9437-d681c4fc1916.png#align=left&display=inline&height=52&margin=%5Bobject%20Object%5D&name=image.png&originHeight=52&originWidth=248&size=3782&status=done&style=none&width=248)<br />
<br />

### 文件内
#### js
函数名、变量名都为小驼峰<br />

#### css
class名都由横杠连接<br />

### 注意事项
#### 可更改文件 & 文件夹

1. vue.config.js - 修改端口
1. /views - 新增编写的页面
1. /template - 复制已有模版
1. /api - 新增模块对应的api请求
1. /router - 新增路由



## 整体流程

1. 更改项目接口访问路径 （如果项目已经运行需要重新run）
1. 运行项目
1. **在views文件夹里新增页面文件**
   1. 新建一级模块文件夹 （如官网管理）
   1. 在新建的一级模块文件夹里再新建二级模块文件夹 （如轮播图管理）
   1. 在二级模块文件夹里新建对应文件 （如轮播图列表、新增轮播图、修改轮播图）
4. 在router文件夹里新增对应路由文件
   1. 在router文件夹的modules文件里新建JS文件（如官网管理）
   1. 编写官网管理路由对象
   1. 在router文件夹的index.js 文件里引入编写好的路由对象
   1. 将引入的路由对象放到 asyncRouters 数组里
   1. 在页面的菜单管理里新增对应的一二级菜单（存入数据库）
5. 查看对应页面是否出现在侧边栏
5. 确认进入页面是否正常访问
5. 编写新增的页面文件
5. 在api文件夹里新增api请求文件
   1. 新增一级模块文件夹（如官网管理）
   1. 在一级模块文件夹里新建二级模块js文件（如轮播图管理）
   1. 编写api
9. 在页面文件里引入对应的api并使用
9. 测试



## 实操: 例子
### 运行项目
```
npm run dev
```
###
### 新增页面文件
views文件夹新增 一级模块 & 二级模块 & 对应文件<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618220062459-8383cc3a-cdbf-447a-b67f-267f2e7b8839.png#align=left&display=inline&height=161&margin=%5Bobject%20Object%5D&name=image.png&originHeight=161&originWidth=270&size=7196&status=done&style=none&width=270)<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618219991982-57db1dc3-bf5c-4545-9114-fb2701b01a97.png#align=left&display=inline&height=688&margin=%5Bobject%20Object%5D&name=image.png&originHeight=688&originWidth=323&size=52859&status=done&style=none&width=323)<br />

### 新增路由文件
![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618220186815-4c90937b-0eae-4cca-a6d3-8fe8dd175444.png#align=left&display=inline&height=196&margin=%5Bobject%20Object%5D&name=image.png&originHeight=196&originWidth=286&size=10583&status=done&style=none&width=286)
### 路由对象引入并注册
![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618220237146-ec2e6104-6ca8-4e8a-9fad-a797314927e7.png#align=left&display=inline&height=71&margin=%5Bobject%20Object%5D&name=image.png&originHeight=71&originWidth=702&size=15053&status=done&style=none&width=702)
### 新增api文件
![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618220432138-d84ab9cc-6707-4b31-a32c-d17ab1e29e38.png#align=left&display=inline&height=248&margin=%5Bobject%20Object%5D&name=image.png&originHeight=248&originWidth=293&size=12217&status=done&style=none&width=293)
### 在对应页面文件引入使用
### ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1118265/1618220513113-732e0c67-d656-49ac-898a-52214a01597a.png#align=left&display=inline&height=34&margin=%5Bobject%20Object%5D&name=image.png&originHeight=34&originWidth=710&size=8952&status=done&style=none&width=710)
### 页面文件代码
#### addressList.vue
```vue
<!--
 * @Author: ocass
 * @Date: 2021-04-06 14:05:30
 * @LastEditTime: 2021-04-09 15:59:45
 * @LastEditors: ocass
 * @Description: 后台管理表格模板
 * @FilePath: /zchx_admin/src/views/website/address/addressList.vue
-->
<template>
  <div class="table-list">
    <table-layout>
      <template #header>
        <el-button size="small" type="primary" class="add-btn" @click="addFunc">
          新增网点
        </el-button>
      </template>

      <template #main>
        <el-table
          ref="table"
          :data="viewTableData"
          height="100%"
          style="width: 100%; min-heihgt: 500px"
          :header-cell-style="setRowStyle"
          border
        >
          <el-table-column type="index" label="网点编号" width="100" />

          <el-table-column
            prop="addressName"
            label="网点名称"
            min-width="130"
          />
          <el-table-column
            prop="addressDetail"
            label="详细地址"
            min-width="200"
          />

          <el-table-column label="管理" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                plain
                @click="updateFunc(scope)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                plain
                @click="deleteFunc(scope)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template #footer>
        <div class="pagination">
          <!-- <div class="batch-operation">
            <el-button>默认按钮</el-button>
            <el-button>默认按钮</el-button>
            <el-button>默认按钮</el-button>
          </div> -->
          <el-pagination
            background
            :current-page="page.pageNum"
            :total="page.totalCount"
            :page-size="page.pageRow"
            :page-sizes="pageConfig.sizes"
            :layout="pageConfig.layout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </table-layout>
  </div>
</template>

<script>
import TableLayout from "@/layout/slot/TableLayout.vue";
import { formatTime, getObjNonNull } from "@/utils/index";
import { Page } from "@/mixins/Page";
import { getAddressList, deleteAddress } from "@/api/website/address";
export default {
  components: { TableLayout },
  mixins: [Page],
  data() {
    return {
      baseRowStyle:
        "background:#f2f2f2;border:1px solid #e9e9e9;border-top:none;border-right:none",
      mainHeight: null,
      tableData: [],
    };
  },
  computed: {
    viewTableData() {
      return this.tableData.map((data) => {
        return {
          ...data,
        };
      });
    },
  },
  created() {
    this.getPageList();
  },
  mounted() {},
  methods: {
    addFunc() {
      this.$router.push({ name: "websiteAddressAdd" });
    },
    updateFunc({ row: data, $index: index }) {
      const rowData = JSON.stringify(this.tableData[index]);
      this.$router.push({ name: "websiteAddressUpdate", query: { rowData } });
    },
    deleteFunc({ row: data, $index: index }) {
      deleteAddress(data.addressId).then((res) => {
        if (res.code == 100) {
          this.$message.success("删除成功");
          this.getPageList();
        }
      });
    },
    getPageList() {
      getAddressList(this.page).then((res) => {
        this.page.totalCount = res.info.totalCount;
        this.tableData = res.info.list;
      });
    },
    setRowStyle({ row, column, rowIndex, columnIndex }) {
      const style =
        rowIndex == 0
          ? this.baseRowStyle
          : this.baseRowStyle + "border-left:none";
      return style;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./../../../styles/tools.less");

.table-list {
  .w(100%);
  .h(100%);

  .pagination {
    .w(100%);
    .h(100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .fvhc();
  }
}
</style>

// 修改element ui 分页样式
<style lang="less" scoped>
/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  width: 35px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
}

/deep/ .el-pagination .el-select .el-input,
/deep/ .el-pagination span:not([class*="suffix"]),
/deep/ .el-input--mini .el-input__inner {
  height: 35px;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  border: none;
}
</style>

// 按钮
<style lang="less" scoped>
.pagination {
  /deep/ .el-button {
    padding: 9.5px 20px;
    span {
      color: #999;
    }

    &:hover {
      span {
        color: #409eff;
      }
    }
  }
}

/deep/ .el-button {
  // padding: 9.5px 20px;
}
</style>

```
#### addressAdd.vue
```vue
<template>
  <div class="address-add">
    <update-page-layout title="新增网点">
      <address-form @inspectSuccess="addAddress"></address-form>
    </update-page-layout>
  </div>
</template>

<script>
import UpdatePageLayout from "@/layout/slot/UpdatePageLayout.vue";
import AddressForm from "./components/AddressForm.vue";
import { addAddress } from "@/api/website/address";
export default {
  components: { UpdatePageLayout, AddressForm },
  methods: {
    addAddress(form) {
      addAddress(form).then((res) => {
        if (res.code == 100) {
          this.$message.success("新增成功");
          this.$router.back();
        }
      });
    },
  },
};
</script>

<style>
</style>

```
#### addressUpdate.vue
```vue
<template>
  <div class="address-add">
    <update-page-layout title="修改产品">
      <address-form
        :formData="formData"
        type="update"
        @inspectSuccess="updateAddress"
      ></address-form>
    </update-page-layout>
  </div>
</template>

<script>
import UpdatePageLayout from "@/layout/slot/UpdatePageLayout.vue";
import AddressForm from "./components/AddressForm.vue";
import { updateAddress } from "@/api/website/address";
export default {
  components: { UpdatePageLayout, AddressForm },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    updateAddress(form) {
      updateAddress(form).then((res) => {
        if (res.code == 100) {
          this.$message.success("修改成功");
          this.$router.back();
        }
      });
    },
  },
  created() {
    const { rowData } = this.$route.query;
    this.formData = JSON.parse(rowData);
  },
};
</script>

<style>
</style>

```
#### address -> AddressForm.vue
```vue
<template>
  <div class="product-form">
    <el-form
      class="form"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="网点名称" prop="addressName">
        <el-input
          size="small"
          v-model="form.addressName"
          placeholder="网点名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="网点地址" prop="addressDetail">
        <el-input
          size="small"
          v-model="form.addressDetail"
          placeholder="请输入网点地址"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="inspectStatus">{{
          judgeBtnText
        }}</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  createRuleRequired,
  createRuleCustom,
  createRuleValueLength,
  isPasswd,
} from "@/utils/validate";
export default {
  components: {},
  props: {
    formData: {
      type: Object,
    },
    type: {
      type: String,
      default: "add",
    },
  },
  watch: {
    formData: {
      handler(val) {
        if (!val) return;
        Object.keys(val).map((key) => {
          this.$set(this.form, key, val[key]);
        });
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    judgeBtnText() {
      const maps = {
        add: "立即创建",
        update: "立即修改",
      };
      return maps[this.type];
    },
  },
  data() {
    return {
      form: {
        addressDetail: "",
        addressName: "",
      },
      rules: {
        addressName: [
          createRuleRequired("网点名为必填项", "blur"),
          createRuleValueLength([1, 20], "blur"),
        ],
        addressDetail: [
          createRuleRequired("网点地址为必填项", "blur"),
          createRuleValueLength([1, 40], "blur"),
        ],
      },
    };
  },
  methods: {
    inspectStatus() {
      return new Promise((resolve, reject) => {
        this.$refs.form
          .validate()
          .then(() => {
            this.$emit("inspectSuccess", this.form);
            resolve({
              data: this.form,
              status: true,
            });
          })
          .catch((err) => {
            resolve({
              data: this.form,
              status: false,
            });
          });
      });
    },

    back() {
      this.$router.back();
    },
  },
};
</script>


<style lang="less" scoped>
.product-form {
  padding: 30px;

  .form {
    margin: 0 auto;
    max-width: 600px;
  }
}
</style>

```


### 路由文件代码
#### address.js
```javascript
/* Layout */
import Layout from "@/layout";
import SecLayout from "@/layout/secIndex";

const activeMenu = {
  product: "/website_sys/product",
  job: "/website_sys/job",
  news: "/website_sys/news",
  address: "/website_sys/address",
  banner: "/website_sys/banner"
};


export const website = {
  path: "/website_sys",
  name: "websiteSys",
  redirect: "/website_sys/product",
  component: Layout,
  meta: { title: "官网管理", icon: "el-icon-setting" },
  children: [
    {
      path: "address",
      name: "websiteAddress",
      component: SecLayout,
      redirect: "/website_sys/address/list",
      meta: { title: "网点管理", breadcrumb: false },
      children: [
        {
          path: "list",
          name: "websiteAddressList",
          hidden: true,
          component: () => import("@/views/website/address/addressList"),
          meta: { title: "网点管理列表", activeMenu: activeMenu.address }
        },
        {
          path: "add",
          name: "websiteAddressAdd",
          hidden: true,
          component: () => import("@/views/website/address/addressAdd"),
          meta: { title: "新增网点", activeMenu: activeMenu.address }
        },
        {
          path: "update",
          name: "websiteAddressUpdate",
          hidden: true,
          component: () => import("@/views/website/address/addressUpdate"),
          meta: { title: "修改网点", activeMenu: activeMenu.address }
        }
      ]
    },
  ]
}

```


### 请求文件代码
#### address.js
```javascript
import { Post, FormPost } from "./../api-type"

/** 获取地址列表
 * @param {*} page
 * @author: ocass
 * @return {*}
 * @example:
 */
export function getAddressList(page) {
  return FormPost("/address/selectAddressList", page);
}


/** 新增网点
 * @param {*} address
 * @author: ocass
 * @return {*}
 * @example:
 */
export function addAddress(address) {
  return FormPost("/address/addAddress", address)
}


/** 修改网点
 * @param {*} address
 * @author: ocass
 * @return {*}
 * @example:
 */
export function updateAddress(address) {
  return FormPost("/address/updateAddress", address)
}


/** 删除网点
 * @param {*} addressId
 * @author: ocass
 * @return {*}
 * @example:
 */
export function deleteAddress(addressId) {
  return FormPost("/address/deleteAddress", { addressId })
}

```