Vue.js项目

Vue.js项目：包含了项目分析：目录结构、用户登录模板实现、关于密钥说明、路由导航守卫等类容，可收藏。

Vue.js项目(jt)

• 项目分析
  • 目录结构
  • 关于main.js的说明
    • 概念: VUE 引入组件的概念
    • 组件好处: 封装CSS样式/封装JS样式/HTML代码片段. xxxx.vue命名.
    • 用法: 父子组件参数传递: 需要使用 Vue.prototype.http =axios 以后使用 http = axios 以后使用http=axios以后使用http.xxx 发起Ajax请求.
  • 用户登录模块实现
    • 加密算法MD5
      • MD5加密算法,只能由明文转化为密文. 不可以反向编译.
  • 关于秘钥说明
    • 用于系统判断正在操作业务的用户已经登录
      • 动态生成秘钥: UUID
  • Session
    • 1. Session 称之为 会话控制 技术
    • 2. Session生命周期, 会话结束 对象销毁.
    • 3. Session的数据存储在内存中.
    • 4. Session只可以临时存储数据.不能永久存储.
  • Cookie
    • 1. 类型: 小型文本文件.
    • 2. 文件通常是加密的.
    • 3. cookie 可以临时或者永久存储.
  • 路由导航守卫
    • 前端通过拦截器 控制用户是否登录.
  • 关联查询
    • 查询所有一级菜单和一级菜单所对应的二级菜单 要求关联查询
• 功能实现原理
  • 用户管理模块
    • 关于直接使用http.xxx 发起Ajax请求.
      • 引入vue组件 main.js 在里面 $http=axios全局定义
    • 关于用户登录业务实现
      • 在表单区域定义 ref表单引用对象 :model是表格中封装的对象
      • 使用加密算法md5将前段发过来的密码这一类的明文转为密文
      • 动态生成UUID秘钥 让系统使用秘钥判定你是否需要登陆
        • 关于秘钥的储存,Session和Cookie
    • 关于系统首页跳转
      • 在路由中添加import以及path 如果需要在本界面中展示时,使用children嵌套
    • 关于路由导航守卫
      • 前端通过拦截器 控制用户是否登录.
    • 关于关联查询
      • 查询所有一级菜单和一级菜单所对应的二级菜单 要求关联查询
    • 关于Ajax如何实现异步调用
      • 核心组件: Ajax 引擎!!!
    • 关于父子组件嵌套
      • 先定义父级组件 然后router-view 进行占位,然后通过children属性定义父子关系的结构. 当点击子组件时,会在父级组件的router-view中展现子组件.
    • 关于用户列表展现
      • 需要分页查询,含头不含尾
        • 利用子查询的方式实现数据获取 典型一对多
    • 关于用户的文本输入框,可能有值,也可能没值
      • 后端服务器中应该使用动态Sql的方式实现数据的查询.
    • 关于用户新增操作
      • *密码进行加密 *添加状态码信息 *添加创建时间/修改时间 *完成入库操作 xml方式
    • 关于#{}占位符
      • 原理: mybatis在进行单值传递时(int等基本类型/string) 取值时名称任意 底层通过下标[0]获取的数据和名称无关.
    • 关于node.js和vue脚手架的关系
      • 1. node.js 作用Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。
      • 2. VUE脚手架 是前端开发模拟后端设计的一种开发框架体系 xxx.vue
      • 3. VUE.js 是将javascript封装的高级渐进式的JS的框架
    • 关于elementUI的导入步骤
      • 导入组件
        • import { Button } from 'element-ui'
      • 对外声明组件
        • Vue.use(Button)
    • 关于请求的的方式以及接收的方式
      • 1.常规请求方式 get/delete ?key=value&key2=value2
      • 2.post/put data: JS对象 后端接收@RequestBody
      • 3.restFul风格 /url/arg1/arg2/arg3 使用对象接收
    • 关于常见运行时异常 常见检查异常(编译异常)
    • 关于Spring控制事务
      • Spring中提供了注解@Transactional 用来控制事务, 常见业务 增/删除/修改一般需要事务控制. 查询一般不用.
        • 规则: 1. Spring中的事务注解 默认条件下只处理运行时异常.如果遇到检查异常(编译异常)事务控制没有效果. 2. 注解的属性控制 rollbackFor = IOException.class , 遇到某种异常实现事务的回滚 noRollbackFor = 遇到某种异常事务不回滚. readOnly = true 该操作是只读的,不能修改. 公告/合同等
    • 关于Spring 全局异常处理机制
      • 先定义全局异常处理类
      • @RestControllerAdvice //标识Controller层 返回值JSON串
      • @ExceptionHandler(value = RuntimeException.class)
    • 关于Mybatis-Plus
      • 在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。
      • 导入jar包
      • 编辑POJO对象
        • @TableName//对象与表一一对应 如果对象名和表名一致则表名可以省略@TableId(type = IdType.AUTO) 主键自增 @TableField(value = "name") 如果名称与属性一致则注解可以省略
      • 继承BaseMapper
      • 修改YML配置文件
  • 商品分类业务
    • 关于获取商品分类信息
      • 查询3级分类菜单数据 要求三层结构嵌套
        • 复杂方法:先查询获取一级列表,获取一级ID,根据父级ID查询二级列表 以此类推 优化方法:利用Map集合封装所有的数据库记录 1.遍历所有的数据信息. 2.获取每一个parentId的值.
    • 关于商品分类删除操作
      • 当删除节点为父级时,应该删除自身和所有的子节点
  • 实现商品图片上传
    • 关于图片上传的JS
      • 1. action: 代表图片上传的地址url 2. file-list: 图片列表数据的集合[{name:"xx",url:"xxx"},{}] 3. 钩子函数: 满足某些条件时触发. 4. on-preview 当点击已上传列表的信息时触发 5. on-remove 当移除列表中的图片时触发
    • 关于文件上传组件说明
      • 1.action: 上传图片地址 http://localhost:8091/xxx/xxx 2.on-preview 点击图片时触发 3.on-remove 移除图片时触发 4.on-success 图片上传成功时触发 5.multiple 可以支持多张图片上传 6.drag 是否允许拖拽
    • 关于实现图片上传
      • 一般前端向后端服务器发送字节信息.由外到内实现数据传输.采用输入流信息. InputStream file使用字节流的弊端::1.必须手动关闭, 2.代码操作繁琐底层代码的实现.
      • SpringMVC高级API MultipartFile 专门处理IO流操作(注意事项: MultipartFile 默认支持1M的数据)
    • 关于图片上传的问题总结
      • 1.完成图片类型校验 jpg|png|gif.... 2.防止恶意程序 a.exe.jpg 3.将图片分目录存储 3.1.按照类型分 理论可以但是得多分配几个 3.2.按照时间划分. yyyy/MM/dd 4.自定义文件名称. 利用UUID充当图片名称.
• 登录页面:前端发来用户名和密码,后端用对象接收之后返回一个字符串,判断字符串是否有值,之后将用户密码加密,再赋值给对象,之后发起查询请求,然后查询数据库判断是否对应有值