项目总结 【电商后台管理系统】

电商后台管理系统:首先大的功能是用户管理、权限管理、商品管理、订单管理、数据统计。

1、用户管理下面是用户列表,

  用户列表中的问题:

1)状态和操作是什么做的

首先是在element中的ui设计,template,v-slot(作用域插槽)

涉及到做弹窗,用的是el-dialog

 

 2、权限管理下面是角色列表和权限列表

 用到了树形空间el-tree。 

 

权限列表

el-tag 是标签 

 

 

一、 如何进行登录页面的预校验,实现登录

登录组件预验证,通过调用表单的validate函数

对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise

通过ref拿到表单的引用,然后访问引用对象this.$refs.loginFormRef,再直接调用validate函数,若直接打印valid,返回true或false

登录组件根据预验证决定是否发起请求

发起请求需要对应的axios包,在main.js中配置axios

import axios from 'axios'

axios.defaults.baseURL = 'http://api.shop.feishuai521.cn/api/private/v1/'

Vue.prototype.$http = axios //全局配置

通过this.$http.post('login', this.loginForm)发起请求

 注意:登录组件弹框提示,用message,需要全局挂载

二、登录之后要做什么

 将登录成功之后的token,保存到客户端的sessionStorage中,会话期间的存贮机制

  因为项目中除了登录之外的其他api接口,必须在登录之后才能访问

  token只应在当前网站打开期间生效,所以将token保存在sessionStorage中

 通过编程式导航实现页面跳转

三、路由导航守卫控制权限

home页面只有在登录之后才能进入,如果清除了token,用户没有登录,但是直接通过url访问特定页面,需要重新导航到登录页面,export default router之前挂载路由导航守卫

router.beforeEach((to, from, next) => {
  // to 将访问哪一个路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数,表示放行
  //   next() 放行 next('/login') 强制跳转
  if (to.path === '/login') return next()
  // 从sessionStorage中获取到保存的token
  const token = window.sessionStorage.getItem('token')
  if (!token) return next('/login')
  next()
})

四、如何退出登录

 在Home.vue中

 

五、什么是树形控件

 

 el-row栅格布局,行;el-col

六、分页效果是怎么实现的在(P146 商品列表的分页功能)

<!--  分页区-->
      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 9, 11, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

 

订单列表的分页框: 

 

七、使用axios,创建get、post请求

八、ajax的使用

九、项目中遇到了什么问题

跨域问题,如何解决的

Access to XMLHttpRequest at 'http://127.0.0.1:8080/api/private/v1/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

配置代理 新建vue.config.js文件  配置  

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {

测试接口是否正常工作  先在powershell终端打开文件夹 安装依赖 npm install

然后运行node app.js    这里有报错  

数据库未访问成功  Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost' (using password: YES)

 这里和自己导入的数据库配置成一样才可以成功

 

十、项目中印象最深的什么

  • 4
    点赞
  • 66
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值