前言

本文主要是博主记录学习vue-element-admin、el-admin-web、Zjmzxfzhl-web等开源框架，以及自己后台的实现。

vue-element-admin

1
path: 'edit/:id(\\d+)',
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 组件名
<template>
  <div>
    <MyComponent title="<MyComponent> as label name"></MyComponent>
    <my-component title="<my-component> as label name"></my-component>
  </div>
</template>

import MyComponent from MyComponent.vue
...
// 采用局部注册时，在 components 选项中定义你想要使用的组件
components: {    
    MyComponent
},

unique-opened

1
2
3
render: function(h) {
    return h() // avoid warning message
}

el-admin-web

项目运行

文档地址

Gitee地址

文档地址

后端项目运行

安装好对应的环境：JDK、Redis、Maven，使用idea打开项目自动导入Maven的相关依赖，laragon启动连接Navicat新建eladmin表然后导入对应的sql脚本，启动redis再使用idea跑起项目。

具有的可以参考b站视频与文档教程

前端项目正常运行

安装好Node.js环境，下载对应的依赖包

项目学习

首先是布局

登录：

vue的native修饰符

vue的路由base: process.env.BASE_URL,

vuex的modules

Cookies的操作（引入js-cookie）

svg图片

同一接口传递的post、get、delete不同来实现，使用vuex来接受三个值

自定义指令

@跳转运行webpack配置（设置里面先禁用再重启）

git commit 覆盖 git commit –amend -m “xxx”

Zjmzxfzhl-web

项目运行

  1. 安装好对应的环境：JDK、Redis、Maven

  2. laragon启动连接Navicat新建表然后导入对应的sql脚本

    1
    2
    3
    // application-dev.yml这里修改数据库账号密码
    username: root
    password:

  3. 启动redis

  4. 使用idea打开项目自动导入Maven的相关依赖，项目启动有这个报错

    • 导入jar失败

      1
      2
      3
      4
      5
      Cannot resolve com.zjmzxfzhl:zjmzxfzhl-common-security:1.0.0-SNAPSHOT
      Cannot resolve com.zjmzxfzhl:zjmzxfzhl-common-log:1.0.0-SNAPSHOT
      Cannot resolve com.zjmzxfzhl:zjmzxfzhl-common-sys-api:1.0.0-SNAPSHOT
      Cannot resolve com.zjmzxfzhl:zjmzxfzhl-common-mybatis:1.0.0-SNAPSHOT
      Cannot resolve com.zjmzxfzhl:zjmzxfzhl-common-redis:1.0.0-SNAPSHOT

      解决：下载zjmzxfzhl-common项目https://gitee.com/zjm16/zjmzxfzhl-common

项目学习

解决一个每次打开parser-dialog预览最新的表单时候不渲染DOM、直接加入v-if。

public的有个static，暂时不研究。

api文件中的下载接口

axios的下载接口，添加responseType: ‘blob’，成功后判断response.type的’application/json’（目前不知道具体有什么用）使用a标签下载即可。

组件Breadcrumb 中引用了path-to-regexp，具体用法不知道。

使用了一个v-if和v-else，不知道考虑了什么情况。

悟空CRM系统

启动后端：

下载phpstudy使用，将项目下载后放在phpstudy的WWW目录下。（名称与网站域名一致）

软件使用：

修改文件config > database.php(没有文件就重命名database_tamplate.php)，

数据库名（database）、用户名（username）、密码（password）即可。

启动需要开启redis（本地命令行加上phpstudy中域名管理中的php扩展勾选redis）

启动前端：

修改config>index中的host为localhost，暂时修改target为线上的地址:http://demo11.5kcrm.net/（使用本地的会有部分请求失败）。如要使用本地的修改环境变量BASE_API为/index.php/。

vue尚硅谷前台

视频地址

直接此电脑上的地址栏输入cmd可以快速进入该目录

配置别名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src文件夹的别名的设置
// 创建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

在路由处添加meta元信息，配合v-if即可实现底部、头部显示和隐藏。

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

使用lodash，接收返回一个函数

1
2
3
4
// 使用自定义属性
<a data-categoryName="mm"></a>
// 需要小写
let {categoryname} =  event.target.dataset

mockjs使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 先准备模拟的数据
// 把mock数据需要的图片放置于public文件夹中！
// listContainer中的轮播图的数据的json文件
[
   {id:1,imgUrl:'xxxxxxxxx'}, 
   {id:2,imgUrl:'xxxxxxxxx'}, 
   {id:3,imgUrl:'xxxxxxxxx'}, 
]

//引入mockjs模块（mockServe.js文件）
import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';
//mock数据:第一个参数请求地址   第二个参数：请求数据
Mock.mock("/mock/banner",{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor});

//引入MockServer.js----mock数据（main.js文件）
import "@/mock/mockServe";

swiper基本的使用

1
2
3
4
5
6
7
8
9
10
11
12
/* Swiper在Vue项目中使用完美解决方案
问题：v-for,在遍历来自于Vuex（数据:通过ajax向服务器发请求，存在异步）*/
watch: {
  list: {
    immediate: true,
    handler() {
      this.$nextTick(() => {
        // 实例化swiper
      });
    },
  },
}

参数合并

1
2
3
4
5
6
7
8
//判断：如果路由跳转的时候，带有params参数，捎带脚传递过去
if (this.$route.params) {
  loction.params = this.$route.params;
  //动态给location配置对象添加query属性
  loction.query = query;
  //路由跳转
  this.$router.push(loction);
}

请求发起如果参数是undefined，并不会在data参数中。

1
2
3
4
5
6
7
// 路由滚动行为
const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})
1
2
3
4
5
6
7
8
9
//简化数据而生
const getters = {
  //路径导航简化的数据
  categoryView(state) {
    //比如:state.goodInfo初始状态空对象，空对象的categoryView属性值undefined
    //当前计算出的 categoryView属性值至少是一个空对象，假的报错不会有了。
    return state.goodInfo.categoryView || {};
  },
}

vue-admin后台实现

参考资料：https://www.bilibili.com/video/BV1QU4y1E7qo?spm_id_from=333.999.0.0

ele 按需引用