山东建设银行怎么招聘网站,微信公众平台账号注册,建设工程资讯哪个网站好,建网站有哪些步骤再梳理一遍
一、商品后台管理系统
1. 功能
1.1 服务端情况
开启了CORS跨域支持需要授权的 API #xff0c;必须在请求头中使用 Authorization 字段提供token 令牌#xff08;axios拦截器#xff09;baseUrl#xff0c;接口地址#xff1a;http://localhost:8888/api/…再梳理一遍
一、商品后台管理系统
1. 功能
1.1 服务端情况
开启了CORS跨域支持需要授权的 API 必须在请求头中使用 Authorization 字段提供token 令牌axios拦截器baseUrl接口地址http://localhost:8888/api/private/v1/
token令牌在服务端生成当登录成功时post请求返回的用户信息里包含了这一元素
1.1.1 axios发ajax请求
Axios通过promise实现对ajax技术的一种封装ajax只能访问同源的请求。axios并没有install 方法所以是不能使用vue.use()方法的。为了不在每个文件都引用一次axios将它改造成vue插件。
npm安装axios发请求
1使用
axios.get(/user?ID12345).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});2 改造为vue插件 plugins/http.js
import axios from axios
const httpHelper {}
// 配置Vue插件
httpHelper.install function fn (Vue) {axios.defaults.baseURL http://127.0.0.1:8888/api/private/v1Vue.prototype.$http axios
}
export default httpHelpermain.js里安装插件 import http from /plugins/http.js
Vue.use(http)1.1.2 拦截器 – 向服务端发请求需要token
httpAxios.install function (Vue) {const instance axios.create({baseURL: http://127.0.0.1:8888/api/private/v1})
instance.interceptors.request.use(function (config) {if (config.url.toLowerCase() ! login) {const token sessionStorage.getItem(token)config.headers.Authorization token}return config}, function (error) {return Promise.reject(error)})Vue.prototype.$http instance
}1.1.3 路由导航守卫 – 权限控制
路由的前置守卫 router.js
router.beforeEach((to, from, next) {console.log(to, from)if (to.name login) {next()} else {const token sessionStorage.getItem(token)if (!token) {router.push({ name: login })Message.warning(请先登录)return}next()}
})1.1.4 使用async和await
handleLogin () {this.$http.post(login, this.formData).then((res) {const data res.dataconst {meta: {status, msg}} dataif (status 200) {const token data.data.tokensessionStorage.setItem(token, token)this.$message.success(msg)} else {this.$message.error(msg)}})
}async handleLogin () {const res await this.$http.post(login, this.formData)const data res.dataconst { meta: { status, msg } } dataif (status 200) {const token data.data.tokensessionStorage.setItem(token, token)this.$message.success(msg)} else {this.$message.error(msg)}
}外层方法使用async关键字await最近的外层函数要加上async发请求代码前加 await省略.then
1.2 自定义组件
以自定义面包屑组件子组件为例父组件使用到面包屑的组件向子组件传值。 子组件
template!-- 面包屑 --el-breadcrumb separator/el-breadcrumb-item :to{ path: / }首页/el-breadcrumb-itemel-breadcrumb-item{{this.level1}}/el-breadcrumb-itemel-breadcrumb-item{{this.level2}}/el-breadcrumb-item/el-breadcrumb
/template
script
export default {name: my-bread,props: [level1, level2]
}
/script父组件
my-bread level1权限管理 level2角色列表/my-bread1.3 登录
组件el-form 表单:rules“rules” 表单验证show-password登录按钮的点击事件 1表单验证是否通过 2通过设置token跳转到主页头像css设置水平居中全局监听enter键把监听事件绑定到document上当(that.$route.path ‘/login’) (e.keyCode 13)触发登录方法
1.4 主页
布局头部左侧导航菜单主体
1.4.1 头部退出
删除token sessionStorage.clear()跳转到登录页 this.$router.push({name: login})
1.4.2 左侧菜单 – 权限控制
el-aside - el-menu:router 开启路由模式设置el-menu-item的index值 为路由标识动态渲染不同身份登录权限控制
一级菜单和子菜单之间是并列关系在知道有几级菜单的情况下思考如果不知道有几级菜单
el-menu :unique-openedtrue :routertrueel-submenu :indexitem1.order.toString() v-for(item1,i) in menus :keyitem1.idtemplate slottitlei :classiconlist[i]/ispan{{item1.authName}}/span/templateel-menu-item :indexitem2.path v-foritem2 in item1.children :keyitem2.idi classel-icon-menu/ispan{{item2.authName}}/span/el-menu-item/el-submenu
/el-menu1.5 系统功能
1.5.1 用户管理 - 用户列表 - 增删改查
展示现有用户数量 GET增加用户名、密码、邮箱、手机新增后重新加载页面 POST删除删除后重新加载页面 PUT修改DELETE 1改基本信息手机、邮箱 2改角色关系到权限组件 面包屑、搜索框、表格、分页组件、switch状态转换
1.5.1.1 显示、搜索的处理
显示 在created的时候调用this.getUserList()拿到res的数据赋值给data里的userlist
const res await this.$http.get(users?query${this.query}pagenum${this.pagenum}pagesize${this.pagesize})搜索
el-input cleargetUserList v-modelquery clearable keyup.enter.nativegetUserList键盘抬起时/输入框清空时依然是触发getUserList该方法内部通过双向数据绑定的query进行传参查询接口文档中query参数可以为空为空时显示全量信息。
1.5.1.2 slot-scope“scope” 参数传递 el-table-column label用户状态template slot-scopescope!-- scope.row就是当前绑定的数据对象 --el-switch changehandleSwitchChange(scope.row) v-modelscope.row.mg_state active-color#13ce66inactive-color#ff4949/el-switch/template
/el-table-column1.5.1.3 添加完成清空文本框
for (const key in this.formData) {this.formData[key]
}1.5.1.4 编辑用户显示已有信息
编辑按钮所在行通过slot-scopescope将被编辑用户信息传给方法editUser通过初始化form显示用户信息的el-form所绑定的内容展示
editUser(user) {this.dialogFormVisibleEdit truethis.form user
}el-dialog title编辑用户 :visible.syncdialogFormVisibleEditel-form :modelformel-form-item label用户名 el-input v-modelform.username disabled/el-input/el-form-item/el-form
/el-dialog1.5.1.5 下拉框-显示当前用户角色
select标签有多个option有selected属性的option会默认选中被选中的option的value值就是select的value值当选择了其他角色时select的value值也会随之改变 获取当前编辑用户的角色id双向绑定给select的value既处理了显示又处理了角色分配。
1.5.2 权限管理 - 权限列表、角色列表
1.5.2.1 权限列表
一到三级权限的名词展示可以作为后台的文档数据不必作为一项功能
1.5.2.2 角色列表
添加角色简单提交编辑、删除简单slot-scope传参、delete请求分配角色tag权限展示表格展开行
【难点1】 三级权限展示树形结构row、col的结构
请求角色列表的产物因此数据包含在getRoleList的返回值里。 理解el-row和el-col的关系两者包含成为一维。 el-row :gutter20el-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-colel-col :span6div classgrid-content bg-purple/div/el-col
/el-row{data: [{id: 30,roleName: 主管,roleDesc: 技术负责人,children: [{id: 101,authName: 商品管理,path: null,children: [{id: 104,authName: 商品列表,path: null,children: [{id: 105,authName: 添加商品,path: null}]}]}]}],
}代码怎么写
先纵向看有几个一级权限就应当v-for循环出几行再横向看每个el-row里拿一个el-col现实出当级权限另一个el-col再作为一个整体来看再看成一行两列
el-row v-for(item1,i) in scope.row.children :keyi classexpand!-- 第一列中放一级标签 --el-col :span4!-- 可移除标签这里展示一级标签,绑定取消权限方法 --el-tag classexpand closable closedelRight(item1.id,scope.row){{item1.authName}}/el-tag/el-colel-col :span20!-- 第二列也是一行两列 --el-row v-for(item2,index) in item1.children :keyindex!-- 第二行第一列中放二级标签 --el-col :span4el-tag classexpand typesuccess closable closedelRight(item2.id,scope.row){{item2.authName}}/el-tag/el-colel-col :span20el-tag classexpand closedelRight(item3.id,scope.row) closable typewarningv-for(item3,indexInner) in item2.children :keyindexInner{{item3.authName}}/el-tag/el-col/el-row/el-col
/el-row【难点2】 分配权限树形结构el-tree 全选、半选如何展示 展开所有的权限树形结构自带的属性default-expand-all显示先勾选上拥有的三级权限三层forEach获得所有三级权限的集合赋值给checklistArr :default-checked-keyschecklistArr提交需要获取所有的一、二、三级权限的集合全选半选传参修改
显示
editRight(role) {// checklist权限的集合是个树形结构this.checklist role.childrenthis.currentRoleId role.idvar tmpArr []this.checklist.forEach(item1 {var item2 item1.childrenitem2.forEach(item2 {var item3 item2.childrenitem3.forEach(item3 {tmpArr.push(item3.id)})})})this.checklistArr tmpArr
}提交
async confirmRole() {let arr1 this.$refs.mytree.getCheckedKeys()let arr2 this.$refs.mytree.getHalfCheckedKeys()let arr [...arr1, ...arr2]const res await this.$http.post(roles/${this.currentRoleId}/rights, { rids: arr.join(,) })
}1.5.3 商品管理 - 列表、分类参数、商品分类
1.5.3.1 商品分类
分类接口设计 重要参数typetype2返回一层、二层分类type3返回前三层分类
1.【难点3】树形组件element-tree-grid在表格中的运用组件选择、配置
表格样式树形结构 【是否有效】【级别】【操作】字段组件选择由于第一列的el-table-column要展示为树形结构因此使用组件element-tree-gridall props of el-table-column are supported在获取到三级商品分类后element-tree-grid只需要绑定好对应的属性即可显示。
el-tree-grid treeKeycat_id parentKeycat_pid levelKeycat_level childKeychildren propcat_namelabel分类名称
/el-tree-grid2.【难点4】级联选择器-添加分类理解接口type参数
由于最细添加的是三级分类或者添加一级、二级分类因此级联选择器只用展示一、二级的父类请求分类接口type2value / v-model 选中项绑定值是一个数组级联选择器的handleChange方法能获取到最接近一层的父类参数分类id配置级别和分类名称组成一个obj作为参数发POST请求 handleChange(value) {console.log(value);}1.5.3.2 【难点5】分类参数 – 只允许为三级分类设置参数
级联选择器 type3 展示出三级分类动态涉及列表展开、静态参数
如何限定只让第三级被选中 handleChange () {if (this.selectedOptions.length ! 3) {this.$message.warning(商品只能添加到三级分类)this.selectedOptions.length 0}}1.5.3.3 【难点6】什么时候渲染出参数tabs标签页改造
在el-tab-pane里含了el-table–绑定dynamicAttrs el-button 在点击了级联选择器器之后渲染出动、静态参数
async handleChange() {if (this.value.length 3) {if (this.active 1) {// 动态参数const res await this.$http.get(categories/${this.value[2]}/attributes?selmany)this.dynamicAttrs res.data.datathis.dynamicAttrs.forEach((item) {// 把attr_vals转为数组类型item.attr_vals item.attr_vals.split(,)})} else if (this.active 2) {const res1 await this.$http.get(categories/${this.value[2]}/attributes?selonly)this.staticAttrs res1.data.data}}
}1.5.3.4 【体现功能】商品列表 - 1000条数据 商品参数数据格式 参数名–参数值可能有多个 data: [{attr_id: 1,attr_name: cpu,cat_id: 22,attr_sel: only,attr_write: manual,attr_vals: 2G,4G,8G}],查询名称、价格、重量、参数管理添加商品详细描述名称、价格、重点、数量、分类、参数、属性、图片步骤条组件纵向tabs组件需要包裹在el-form里并列关系上传图片饿了么Upload组件、百度Web Uploader富文本编辑器功能上的bug商品列表不能显示图片接口没返回这个字段bug2数据库表设计时时间字段长度太短导致时间不正确令人汗颜 改了表字段的数据类型可能不是最合适但是时间显示正常了。创建时间的时候还是以1970位默认值。
1. 上传图片 – 拓展检测文件格式性能
请求上传接口需要设置token这里不是发axios请求
el-upload
actionhttp://47.xxx.1xx.7:8888/api/private/v1/upload
:headersheader
:on-removehandleRemove
:on-successhandleSuccess
:file-listfileList
list-typepictureel-button sizesmall typeprimary点击上传/el-buttondiv slottip classel-upload__tip只能上传jpg/png文件且不超过500kb/div
/el-uploadheader: {Authorization: sessionStorage.getItem(token)
}2. 富文本编辑器组件 vue-quill-editor
quill-editor v-modelform.goods_introduce/quill-editor1.5.4 订单管理
1.5.5 数据统计
2. 框架选择 – vue
容易上手reactJSX学习成本vue模板任何合乎规范的 HTML 都是合法的 Vue 模板。可以在单文件组件里完全控制 CSS将其作为组件代码的一部分。vue-cli核心插件供了各种用途的模板。体积一个包含了 Vuex Vue Router 的 Vue 项目 (gzip 之后 30kB) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。当某个组件的状态发生变化时系统能精确知晓哪个组件确实需要被重渲染。组件的依赖是在渲染过程中自动追踪的
3. 组件库
3.1 elementUI
3.1.1 vue-cli安装插件
vue create mypro
cd mypro
vue add element这里选择的是按需引入 观察项目文件夹中多了plugins-element.js 默认按需引入只引入了{Button组件} 可以减小体积修改代码
3.1.2 echarts
4. 项目结构 一般脚手架都应当有以下的几个功能
自动化构建代码比如打包、压缩、上传等功能本地开发与调试并有热替换与热加载等功能本地接口数据模拟css 模块化拓展语言、预处理器saas、lesscss 不是编程语言所以不能声明变量、函数不能做判断、循环和计算也不能嵌套检查并自动矫正不符合规范的代码并优化代码格式
定义好项目的目录结构
解耦代码尽量去耦合这样代码逻辑清晰也容易扩展分块按照功能对代码进行分块、分组并能快捷的添加分块、分组编辑器友好需要更新功能时可以很快的定位到相关文件并且这些文件应该是很靠近的而不至于到处找文件
5. 亮点
权限、商品分类涉及到多层级的树形结构权限控制
