preface

Living out the twinkling of an eye is 100 days, from the last article is about three months ago 😂, inertia is greater than the consciousness for the three months are decadent, plus a bit busy in my work, if the update article habit to put off, while writing techniques are not going well, habit is good, at least in the don’t move I am afraid is will pass, Just have time to finish most of the things before today, delete, delete, change and sort out, to share with you;

This article is actually my front-end management system before the back-end project, if you are interested in koA +mysql project combat front-end project address here 👉 point I jump

Why don’t I implement the client system instead of the admin background? 😥 actually there are some things not you want to how how, at first I thought the Node will Vue I can write their own project (a light spray), don’t just learn front a treasure, when a fish see class, no backend address mock all by herself, actually otherwise, is the biggest difficulty do-it-yourself project data, Where does the data come from? Besides, the client’s requirements for data are still relatively high. If you want to make a view of the past, it is not easy to get some.

Project preview

Say so long mouth all dry, first to dig friends to see this management system roughly look like

The project structure

Directory structure is modeled after vue-element-admin design, have to say that big big is very strong, most folders should be able to see at a glance is used for what, the following list is not easy to confirm and distinguish

  • libs: put some tool methods, request secondary encapsulation
  • layout: Removes the rest of the area content from the central table area
  • plugins: At present, it is introduced on demandelementSome other tripartite plug-ins can be put in later

Project key

Begin important link, half catty teach eight two 😂, I dare to speak to see you dare to listen not?

internationalization

Vue project internationalization mainly depends on the i18n plugin 👉 here, you can clone the code down to look at the local folder; My approach is to maintain Chinese and English separately and integrate them in a file, and finally put them in main.js to register this plug-in.

// Directory: local/lang/ en-us.js
export default {
  button: "button"
}
// Directory: local/lang/ zh-cn.js
export default {
  button: "Button"
}
Copy the code
// local/index.js
// Import the plugin first
import Vue from "vue";
import VueI18n from "vue-i18n";
// Import internationalized content
import customZhCn from "./lang/zh-CN";
import customUsEn from "./lang/en-US";
// Load element on demand
import enLocale from "element-ui/lib/locale/lang/en";
import zhLocale from "element-ui/lib/locale/lang/zh-CN";
import ElementLocale from "element-ui/lib/locale";

Vue.use(VueI18n);
// Here is the language to get the browser
const navLang = navigator.language;
// If yes, use the browser
const localLang = navLang === "zh-CN" || navLang === "en-US" ? navLang : false;
let lang = localLang ? lang = localLang : "zh-CN";
// merge all the language objects
const messages = {
  "zh-CN": Object.assign(zhLocale, customZhCn),
  "en-US": Object.assign(enLocale, customUsEn)
};
const i18n = new VueI18n({
  locale: lang,
  messages
});
// Element's official website
ElementLocale.i18n((key, value) = > i18n.t(key, value));
// Finally register in main.js
export default i18n;
Copy the code

$t(‘button’) {{$t(‘button’)}} $t(‘button’) {$t(‘button’)}}

Recursive sidebar

In/layout/Sidebar/index. The routing information is transferred in a vue to sidenar – item component

<sildebar-item
  v-for="route in routes"
  :key="route.path"
  :item="route"
  :base-path="route.path"
></sildebar-item>
Copy the code

Use recursive code in/layout/Sidebar/SidebarItem vue; I’m going to make a copy of the code here, remove the ones that don’t work with recursion and add a comment;

<template> <! -- Hide is the routing information used to determine whether this is displayed --><div v-if=! "" item.hide"><! Methods (children and no hide) return true 2, ShowingChildren: true 3; isHasOneChild: true 4; showingChildren: 0;<template
      v-if=" isHasOneChild(item.children, item) && (! onlyOneChild.children || onlyOneChild.noShowingChildren) "
    > 
      <! -- condition true always execute code here -->
      <el-menu-item :index="resolvePath(onlyOneChild.path)"></el-menu-item>
    </template>
    <el-submenu v-else :index="resolvePath(item.path)">
      <! -- essentially calling itself, but remember that the component must have the name property 5, else is calling itself again, and it's a loop, so it keeps recursively calling the data and children, until it's empty -->
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        :base-path="resolvePath(child.path)"
      />
    </el-submenu>
  </div>
</template>
<script>
import { isExternal } from "@/libs/util";

export default {
  name: "SidebarItem".props: {
    // route object
    item: {
      type: Object.required: true
    },
    basePath: {
      type: String.default: ""}},data() {
    return {
      onlyOneChild: {}}; },methods: {
    // Interface subroute array and route item
    isHasOneChild(children = [], route) {
      const showingChildren = children.filter(item= > {
        if (item.hide) {
          return false;
        } else {
          this.onlyOneChild = item;
          return true; }});// If children has only one default display children
      if (showingChildren.length === 1) {
        return true;
      }
      // If no children show themselves
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ... route,path: "".noShowingChildren: true };
        return true;
      }

      return false;
      / / summary:
      // 1, children with hide return fasle
      // 2, children have no hide returns true and assigns routing information to onlyOneChild
      // 3, showingChildren with length 1 is true
      // 4, showingChildren's length is 0 is true but onlyOneChild is assigned
    },
    resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath;
      }
      if (isExternal(this.basePath)) {
        return this.basePath;
      }
      return path.resolve(this.basePath, routePath); }}};Copy the code

ElementTable secondary encapsulation

The main implementation of secondary encapsulation of table is to receive an object, set the basic default value for table during initialization, and use external parameters if there are changes in the parameters transmitted externally, and combine the parameters required by pagination component with table. The next time you use it, it will default to pagination, exposing methods inside the component that will update the table after passing or changing data. You can have a look at the code, personal feel it very detailed annotation 😂 / components/proTable/index. The vue/components/proTable/Pagination. Vue

Project start

Since this project is a pure front-end project without mock, if you want to start it, you have to clone my back-end project. It is strongly recommended to start the back-end first, create a few pieces of data at will, and then start the front-end.

Pay attention to modify the proxy address in vue.config.js file when starting the front end; NPM install NPM Run Serve

Finally feel dig friends watch, and consciously like manual funny end scatter flowers!!