vue_shop项目构建笔记

发表于 | 分类于 ， ， ， ， ， | 本文总阅读量 次
字数统计: 1.3k | 阅读时长 ≈ 5

插件和依赖的区别

依赖

运行时开发时都需要用到的jar包，比如项目中需要一个json的jar包，就需要一个依赖，这个依赖在项目运行时也需要，因此在项目打包时需要把这些依赖也打包进项目里

插件

在项目的开发时需要，但是在项目运行时不需要，因此在项目开发完成后就不需要把插件打包进项目中。

Vue packages version mismatch版本问题的解决

初始化我的vue_shop项目的时候，出现了以下的错误：

1
2
3
4
5
error in .src/components/mobile/SeniorDetail.vue
Module build failed: Error:
Vue packages version mismatch:
vue@2.5.13
vue-template-compiler@2.5.17

根据提示，是版本不匹配的问题，直接将我的本地全局的vue进行更新就好了，也就是直接在终端运行npm i -g vue就完成了vue的升级。

登录/退出功能

登录业务流程

  • 在登录页面输入用户名和密码
  • 调用后台接口进行验证
  • 通过验证之后，根据后台的响应状态跳转到项目主页

登录业务的相关技术点

  • http是无状态的
  • 通过cookie在客户端记录状态
  • 通过session在服务端记录状态
  • 通过token方式维持状态

如果前端和后端不存在跨域问题，推荐只有cookie和session结合的方式，如果前端和服务器之间存在跨域问题推荐使用token方式。

登录–token原理分析

  • 客户端->服务器：登录页面输入用户名和密码进行登录
  • 服务器->客户端：服务器验证通过之后生成该用户的token并返回
  • 客户端：存储该token
  • 客户端->服务器：后续所有的请求都携带该token发送请求
  • 服务器会验证token是否通过

功能实现

  • 通过Element-UI组件实现布局
    • el-form
    • el-form-item
    • el-input
    • el-button
    • 字体图标

退出功能实现原理

基于token的方式实现退出比较简单，只需要销毁本地的token即可，这样后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面。

1
2
3
4
//清空token 
window.sessionStorage.clear()
//跳转登录页
this.$router.push('/login')

报错

格式问题

1、换行

1
error  Newline required at end of file but not found

原因就是需要在子组件的末尾添加换行。
并且在子组件中有一些空行也是不允许的
2、出现错误如下：

1
Missing space before function parentheses

解决办法：修改项目根目录下.eslintrc.js文件，在rules节点下增加"space-before-function-paren": 0,,再次运行即可

路由导航首位控制访问权限

如果用户没有登录，但是直接通过url访问特定页面，需要重新导航到登录页面。

1
2
3
4
5
6
7
8
9
10
//为路由对象，添加beforeEach导航守卫
router.beforeEach((to,from,next) => {
	//如果用户访问的登录页直接放行
	if(to.path === '/login') return next()
	//从sessionStorage中获取到保存的token值
	const tokenStr = window.sessionStorage.getItem('token')
	//没有token，强制跳转到登录页
	if(!tokenStr) return next('/login')
	next()
	})
1
2
3
4
5
6
7
8
9
10
11
router.beforeEach((to, from, next) => {
  // to表示将要访问的路径
  // from代表从哪个路径跳转而来
  // next是一个函数，表示放行
  // next()放行   next('/login')强制放行
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

通过接口获取菜单数据

通过axios请求拦截器添加token，博正拥有获取数据的权限

1
2
3
4
5
6
//axios请求拦截，相当于是一个预处理器，预处理这次请求
axios.interceptors.request.use(config => {
	//为请求头对象，添加token验证的authorization字段
	config.headers.Authorization = window.sessionStorage.getItem('token')
	return config
	})
  • 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
  • 使用 HTTP Status Code 标识状态
  • 数据返回格式统一使用 JSON

权限管理

权限管理业务分析

通过axios请求拦截器添加token，博正拥有获取数据的权限权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。
就是给用户不同的角色，而不同的角色拥有不同的权限，只要一个用户拥有该角色，那么他就拥有该角色对应的权限。

使用elementUI中的cascader插件出现的问题

步骤跟着视频中的走，但是最后出现的结果就是显示出来的级联选择框出现了空白和高度不够的情况，最后找到的解决办法 就是，在全局的css样式也就是global.css文件中给el-cascader-panel添加高度。最后添加的代码就是：

1
2
3
.el-cascader-panel {
	height: 200px;
}

参数管理

商品参数用于显示商品的固定的特征信息，可以通过电商平台商品详情页面直观的看到。

安装配置vue-qill-editor

这款插件是用来安装在项目中进行网页内富文本编辑

-------------本文结束感谢您的阅读-------------