6、订单管理功能及分析视图
项目仓库：https://github.com/changeclass/vue-shop 时间线 <el-timeline> <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time" > {{ activity.context }} </el-timeline-item> </el-timeline> ECharts基本使用 安装ECharts的依赖包 在组件中导入 参照文档使用 <template> <div> <!-- 面包屑导航 --> <el-breadcrumb separator=" ...
5、商品列表功能开发
项目仓库：https://github.com/changeclass/vue-shop UI实现 时间格式化问题：可以设置一个全局的过滤器，对时间进行过滤 // 定义全局过滤器 Vue.filter('dataFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + 1 + '').padStart(2, '0') const hh = (dt.getHours() + 1 + '').padStart(2, '0') const mm = (dt.getMinutes() + 1 + '').padStart(2, '0') const ss = (dt.getSeconds() + 1 + '').padStart(2, '0') ...
4、分类管理功能开发
项目仓库：https://github.com/changeclass/vue-shop UI 树形表格插件 插件地址：https://github.com/MisterTaki/vue-table-with-tree-gird 安装依赖 在入口文件导入插件并注册 import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table', TreeTable) 使用 <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border ></tree-table> 使用具名插槽 在此插件中使用模板渲染第二 ...
3、权限管理功能开发
项目仓库：https://github.com/changeclass/vue-shop 创建子分支并推送 git checkout -b rights git push -u origin rights 权限管理标签 根据不同等级分配不同颜色的标签。 <el-table :data="rightsList" border stripe> <el-table-column type="index"></el-table-column> <el-table-column label="权限名称" prop="authName"></el-table-column> <el-table-column label="路径" prop="path"></el-table-column> <el-table-column label="权限等级" prop="level"> <template v-slot="scoped"> <el-tag v-if="sco ...
2、用户列表功能开发
项目仓库：https://github.com/changeclass/vue-shop 主页布局 主页布局使用ElementUI提供的布局。 <el-container class="home-container"> <!-- 头部区域 --> <el-header> <el-button type="info" @click="logout">退出</el-button> </el-header> <!-- 页面主体 --> <el-container> <!-- 侧边栏 --> <el-aside width="200px">Aside</el-aside> <!-- 页面右侧 --> <el-main>Main</el-main> </el-container> </el-container> ElementUI提供的组件，其组件名就是他的class名，因 ...
1、项目初始化登录功能开发
项目仓库：https://github.com/changeclass/vue-shop 项目初始化 安装脚手架 通过VUE脚手架创建项目 安装Element-ui组件库、 添加插件处安装 配置axios库 安装依赖处安装 将项目托管在GitHub中 后台配置 MySQL Node.js 后端API项目地址：https://github.com/changeclass/Tzk/tree/master/2020-11/vue-api 登录与退出 保持用户登录状态有两种方法：第一种：利用Cookie和Session，但这种方式存在跨域问题。第二种：利用token，这种方式可以避免跨域问题 登录页面的开发 通过子分支进行开发 git checkout -b login 删除不要的组件 创建登录组件 在components中新建一个Login.vue文件。 <template> <div>登录组件</div> </template> <script> e ...
浅谈蘑菇丁自动打卡
项目说明 对于本项目第一次是基于圈x的每日任务实现的自动签到，因为圈x要跑多个签到脚本，但后来由于各种原因最终放弃了使用圈x在本地跑。因此修改为利用GitHubActions自动完成打卡任务。 项目地址：MoGuDingAutoCheckIn 食用方式任选下面两种中的一个即可。 快速开始-Coding 使用Coding的原因主要是因为GitHub自动任务存在延迟，几分钟，几小时甚至不执行。因此建议使用Coding。 这里不会讲解如何注册Coding，请自行了解。 新建项目 选择代码托管项目 然后名称路径随便写即可。 新建代码仓库 按照下图提示输入对应的内容 项目地址：https://e.coding.net/imtzk/mogudingAuto/code.git 是否导入成功 导入成功后你应该看到类似这样的界面 开启持续继承功能 点击项目左下角的项目设置 打开持续集成功能 返回到主页面 添加自动任务 接下来你将在主页面左边导航栏看到一个持续集成的选择，选择他并选择构建计划。 选择最下方的自定义构建过程 构建计划名随便写即可。 ...
6、ES6模块化和webpack打包
ES6模块化 安装babel包 yarn add @babel/core @babel/cli @babel/preset-env @babel/node 安装@babel/polyfill依赖包 yarn add @babel/polyfill 根目录创建文件babel.config.js const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60", chrome: "67", safari: "11.1", }, }, ], ]; module.exports = { presets }; 运行命令 npx babel-node file 导入模块 import $ from "jquery" 按需导入与导出 import { name } from 'file.js' 大 ...
5、VUE前端路由
路由的基本概念 VueRouter基本使用 官方地址：https://router.vuejs.org/zh/ 引入相关库文件 VueRouter依赖于vue，因此需要先引入vue <script src="../js/vue.js"></script> <script src="../js/vue-router_3.0.2.js"></script> 添加路由链接 <router-link to='/user'>user</router-link> <router-link to='/register'>register</router-link> router-link标签会被渲染成a标签，to属性则会被渲染成href属性。 添加路由填充位 <router-view></router-view> 定义路由组件 const User = { template: '<div>User组件</div>' } const Register = { ...
