JustDoIt - 项目
type: channel
link: https://www.wangmanyuan.com/tag/%E9%A1%B9%E7%9B%AE/
items: 商品分类
items: 用户信息
items: 后台基本布局
items: vue电商业务概述

商品分类
type: item
date: 2022-10-28T23:15:01+00:00
description: A.新建分支goods_cate新建分支goods_cate并推送到码云git checkout -b goods_categit push -u origin goods_cateB.创建子级路由创建categories子级路由组件并设置路由规则import Cate from './components/goods/Cate.vue' path: '/home', component: Home, redirect: '/welcome', children: [ { path: "/welcome", component: Welcome }, { path: "/users", component: Users }, { path: "/rights", component: Rights }, { path: "/roles", component: Roles }, { path: "/categories", component: Cate } ] C.添加组件基本布局在Cate.vue组件中添加面包屑导航以及卡片视图中的添加分类按钮 商品分类 <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>商品管理</el-breadcrumb-item> <el-breadcrumb-item>商品分类</el-breadcrumb-item> </el-breadcrumb> <el-card> <el-row> <el-col> <el-button type="primary">添加分类</el-button> </el-col> </el-row> </el-card> D.请求分类数据请求分类数据并将数据保存在data中 E.使用插件展示数据使用第三方插件vue-table-with-tree-grid展示分类数据1).在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装2).打开main.js，导入vue-table-with-tree-gridimport TreeTable from 'vue-table-with-tree-grid'.....Vue.config.productionTip = false//全局注册组件 Vue.component('tree-table', TreeTable) 3).使用组件展示分类数据 <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false"> </tree-table> 在数据中添加columns: columns: [ {label:'分类名称',prop:'cat_name'} ] F.自定义数据列使用vue-table-with-tree-grid定义模板列并添加自定义列//先在columns中添加一个列 columns: [ {label:'分类名称',prop:'cat_name'}, //type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok) {label:'是否有效',prop:'',type:'template',template:'isok'}, {label:'排序',prop:'',type:'template',template:'order'}, {label:'操作',prop:'',type:'template',template:'opt'} ] <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag> <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag> <el-tag size="mini" type="warning" v-else>三级</el-tag> <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button> <el-button size="mini" type="danger" icon="el-icon-d…

用户信息
type: item
date: 2022-10-23T03:23:26+00:00
description: 1.修改用户信息A.为用户列表中的修改按钮绑定点击事件B.在页面中添加修改用户对话框，并修改对话框的属性C.根据id查询需要修改的用户数据//展示编辑用户的对话框 async showEditDialog(id) { //发送请求根据id获取用户信息 const { data: res } = await this.$http.get('users/' + id) //判断如果添加失败，就做提示 if (res.meta.status !== 200) return this.$message.error('获取用户信息失败') //将获取到的数据保存到数据editForm中 this.editForm = res.data //显示弹出窗 this.editDialogVisible = true } D.在弹出窗中添加修改用户信息的表单并做响应的数据绑定以及数据验证 <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px"> <el-form-item label="用户名"> <el-input v-model="editForm.username" disabled></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="editForm.email"></el-input> </el-form-item> <el-form-item label="电话" prop="mobile"> <el-input v-model="editForm.mobile"></el-input> </el-form-item> </el-form> 数据绑定以及验证：//控制修改用户对话框的显示与否 editDialogVisible: false, //修改用户的表单数据 editForm: { username: '', email: '', mobile: '' }, //修改表单的验证规则对象 editFormRules: { email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { validator: checkEmail, message: '邮箱格式不正确，请重新输入', trigger: 'blur' } ], mobile: [ { required: true, message: '请输入手机号码', trigger: 'blur' }, { validator: checkMobile, message: '手机号码不正确，请重新输入', trigger: 'blur' } ] } E.监听对话框关闭事件，在对话框关闭之后，重置表单<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed"> editDialogClosed(){ //对话框关闭之后，重置表达 this.$refs.editFormRef.resetFields() } F.在用户点击确定按钮的时候，验证数据成功之后发送请求完成修改editUser() { //用户点击修改表单中的确定按钮之后，验证表单数据 this.$refs.editFormRef.validate(async valid => { if (!valid) return this.$message.error('请填写完整用户信息') //发送请求完成修改用户的操作 const { data: res } = await this.$http.put( 'users/' + this.editForm.id, this.editForm ) //判断如果修改失败，就做提示 if (res.meta.status !== 200) return this.$message.error('修改用户失败') //修改成功的提示 this.$message.success('修改用户成功') //关闭对话框 this.editDialogVisible = false //重新请求最新的数据 this.getUserList() }) } 2.删除用户在点击删除按钮的时候，我们应该跳出提示信息框，让用户确认要进行删除操作。如果想要使用确认取消提示框，我们需要先将提示信息框挂载到vue中。A.导入MessageBox组件，并将MessageBox组件挂载…

后台基本布局
type: item
date: 2022-10-22T20:09:37+00:00
description: 打开Home.vue组件，进行布局：<el-container class="home-container"> <el-header>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> 默认情况下，跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式，如：.home-container { height: 100%; } .el-header{ background-color:#373D41; } .el-aside{ background-color:#333744; } .el-main{ background-color:#eaedf1; } 2.顶部布局，侧边栏布局 <el-container class="home-container"> <el-header> 电商后台管理系统 <el-button type="info" @click="logout"> 退出 </el-button> </el-header> <el-container> <el-aside width="200px"> <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> 导航一 <el-menu-item index="1-4-1"> 子菜单一 </el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main>Main</el-main> </el-container> </el-container> 3.axios请求拦截器后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限在main.js中添加代码，在将axios挂载到vue原型之前添加下面的代码//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息 axios.interceptors.request.use(config=>{ //为请求头对象，添加token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem("token") return config }) 4.请求侧边栏数据 通过v-for双重循环渲染左侧菜单<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id"> {{item.authName}} <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id"> {{subItem.authName}} </el-menu-item> </el-submenu> </el-menu> 5.设置激活子菜单样式通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标在数据中添加一个iconsObj：iconsObj: { '125':'iconfont icon-user', '103':'iconfont icon-tijikongjian', '101':'iconfont icon-shangpin', '102':'iconfont icon-danju', '145':'iconfont icon-baobiao' } 然后将图标类名进行数据绑定，绑定iconsObj中的数据：为了保持左侧菜单每次只能打开一个，显示其中的子菜单，我们可以在el-menu中添加一个属性unique-opened或者也可以数据绑定进行设置(此时true认为是一个bool值，而不是字符串) :unique-opened=…

vue电商业务概述
type: item
date: 2022-10-08T05:20:34+00:00
description: 客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)2.项目初始化A.安装Vue脚手架B.通过脚手架创建项目C.配置路由D.配置Element-UI:在插件中安装，搜索vue-cli-plugin-elementE.配置Axios：在依赖中安装,搜索axios(运行依赖)F.初始化git仓库G.将本地项目托管到github或者码云中3.码云相关操作A.注册登录码云账号B.安装git在Windows上使用Git，可以从Git官网直接下载安装程序进行安装。测试命令：git --versionC.点击网站右上角“登录”，登录码云，并进行账号设置D.在本地创建公钥：在终端运行：ssh-keygen -t rsa -C "xxx@xxx.com"E.找到公钥地址：Your identification has been saved in /c/Users/My/.ssh/id_rsa.Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub.当我们创建公钥完毕之后，请注意打印出来的信息“Your public key has been saved in”/c/Users/My/.ssh/id_rsa.pub : c盘下面的Users下面的My下面的.ssh下面的id_rsa.pub就是我们创建好的公钥了E.打开id_rsa.pub文件，复制文件中的所有代码，点击码云中的SSH公钥，将生成的公钥复制到公钥中G.测试公钥：打开终端，输入命令ssh -T git@gitee.comH.将本地代码托管到码云中点击码云右上角的+号->新建仓库I.进行git配置：打开项目所在位置的终端，进行git仓库关联4.配置后台项目A.安装phpStudy并导入mysql数据库数据B.安装nodeJS，配置后台项目,从终端打开后台项目vue_api_server然后在终端中输入命令安装项目依赖包：npm installC.使用postman测试api接口5.实现登录功能A.登录状态保持如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态如果客户端和服务器跨域了，建议使用token进行维持登录状态。B.登录逻辑：在登录页面输入账号和密码进行登录，将数据发送给服务器服务器返回登录的结果，登录成功则返回数据中带有token客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。C.添加新分支login，在login分支中开发当前项目vue_shop：打开vue_shop终端，使用git status确定当前项目状态。确定当前工作目录是干净的之后，创建一个分支进行开发，开发完毕之后将其合并到mastergit checkout -b login然后查看新创建的分支：git branch确定我们正在使用login分支进行开发然后执行vue ui命令打开ui界面，然后运行serve，运行app查看当前项目效果发现现在是一个默认页面，我们需要进行更改，打开项目的src目录，点击main.js文件（入口文件）import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') 再打开App.vue(根组件)，将根组件的内容进行操作梳理(template中留下根节点，script中留下默认导出，去掉组件，style中去掉所有样式) <router-view></router-view> 再打开router.js(路由)，将routes数组中的路由规则清除，然后将views删除，将components中的helloworld.vue删除import Vue from 'vue' import Router from 'vue-router' Vu…