vue_shop项目记录一|青训营笔记

lsm
130 阅读3分钟

vue_shop项目记录一|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

项目初始化

  • 创建项目所在目录中 cmd ->vue ui 打开vue项目管理器 -->指定文件夹创建项目-->
  • 项目预设中选择 router，linter/Formatter,使用配置文件
  • 选择Standar config
  • 配置UI组件库 打开项目仪表盘--插件--添加插件----vue-cli-plugin-element---右下脚安装--将fullimport改为import on demand 完成安装即可
  • 配置axios 选中依赖--安装依赖-- 搜索axios 安装即可
  • 配置git远程仓库 创建仓库--根据提示cmd全局设置---在项目文件中 shift+右键打开powerShell 将文件commit (git add .----git commit -m"add files")最后通过最后的提示分别输入即可
  • 后台项目的环境安装配置
  • 开发中 若要开发一个新功能先要创建一个新的分支开发完成后再将分支合并 gitcheckout -b name

登录/退出功能

  1. 如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态 如果客户端和服务器跨域了，建议使用token进行维持登录状态。

  2. 原理：在登录页面输入账号和密码进行登录，将数据发送给服务器

  3. 服务器返回登录的结果，登录成功则返回数据中带有token 客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份。

  4. 登录功能实现

    • component文件夹中创建Login.vue

    • 设置路由规则 router.js中 并使用路由占位符在App.vue中占位

    • 布局

      • 设置全局css并引入到main.js中

      • elementui

      • 如果elementui中没有需要的图标 则导入第三方组件 如阿里

      • 使用时只需将font文件粘贴到assets文件夹中 后根据demo_index.html 选择fontclass 根据提示在main.js中引入 在需要使用的地方粘贴图标名

        import './assets/font/iconfont.css'

    • 使用elementui表单组件渲染表单区域并且实现数据双向绑定通过method自带方法利用Ref的方法获取实例对象并调用方法实现重置和表单预验证

    • 预验证结果为true则发起axios请求

      • import axios from 'axios'
// 设置axios请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 将axios挂载到￥http上是每个组件都可使用
Vue.prototype.$http = axios
Vue.use(axios)
      • 请求后台数据首先要启动app.js 即启动api接口 找到文件存放位置并打开powershell 执行 node ./app.js
      • 打开数据库
      • 请求成功后返回promise对象则通过 async 和await 得到响应对象 并通过解构赋值直接获取服务器返回数据
      • 弹窗提示是否登陆成功 elementui里的消息提示里有可以直接使用的
      • 将token值通过window.sessionStorage.setItem('token',....)存到页面中
      • 利用this.$router.push跳转页面
      • 路由导航守卫控制访问权限：为路由对象，添加beforeEach导航守卫 必须在router实例对象之后
      • 退出功能 即清楚token的记录并跳转到登陆页面
      • 开发完成后将 login分支与master合并 git merge 注：首先需要切换到master分支
      • 最后通过git push即可推送到git仓库
      • 将login分支推送到仓库中 首先需切换到login分支 通过git push -u origin login

    • 补充：

      • display:flex; justify-content:flex-end; 表示按底部或右边对齐 space-between:表示第一个在行首最后一个在末尾
      • aline-item:center使弹性盒子居中显示（竖直方向） 而不是默认的适应父盒子的大小
      • 按照elslint语法规范直接格式化代码的方法
      • letter-spacing：控制字符间距例：letter-spacing:2em
avatar
文章
阅读
粉丝