写文章

电商管理项目登录页面完成详细流程

吐槽君 分类：javascript

1. 电商项目的基本业务

1.电商后台管理系统功能

image.png

2. 电商后台管理系统开发模式采用前后端分离

1.前端项目技术栈

  • Vue
  • Vue-router
  • Element-UI
  • Axios
  • Echarts

2. 后端项目技术栈（了解内容）

  • Node.js
  • Express
  • Jwt 模拟session登录功能
  • Mysql
  • Sequelize

3. 项目初始化

1. 安装vue-cli 参考我安装了@vue-cli@4.5.9

2. 通过vue脚手架创建项目

  • 在目录下vue ui
  • 注意：配置的时候选择vue2.x

image.png

3. 配置路由

4. 配置Element-UI

这里需要注意在建立项目的时候选择vue2.x不然Element-UI不兼容vue3.x会报错参考 参考
在插件里面选择安装 element
image.png

5. 配置axios库

在依赖中安装axios
image.png

6. 初始化git远程仓库&将本地项目托管到Github或者码云

  • 码云使用，配置公钥
  • 创建仓库
  • 根据提示去把本地文件推送到远程仓库，与git类似；

7. 配置后台需要的数据

  • 安装phpStudy..
  • 但是导入数据的时候出错了，导入不进去
  • 重新安装最新版本 参考安装
  • 安装完成之后导入数据，然后测试后台文件是否可用；D:\web_study\vue_project\vue_api_server下面使用powershell，然后npm install 安装依赖，之后再启动项目node app.js;
  • 查看电商管理后台API接口文档；
  • 测试接口是否可用 通过Postman这个软件进行测试，如下图所示

image.png

3. 登录退出功能

1.登录业务流程

A. 登录状态保持
1)如果服务器和客户端同源，建议可以使用cookie或者session来保持登录状态
2)如果客户端和服务器跨域了，建议使用token进行维持登录状态。
这里使用token，因为有跨域，token原理：
image.png
B. 登录逻辑
在登录页面输入账号和密码进行登录，将数据发送给服务器
服务器返回登录的结果，登录成功则返回数据中带有token
客户端得到token并进行保存，后续的请求都需要将此token发送给服务器，服务器会验证token以保证用户身份

2.登录业务相关技术点

3. 登录页面布局

通过Element-UI组件实现布局

  • el-form
  • el-form-item
  • el-input
  • el-button
  • 字体图标

在开始项目之前先在vue_shop文件夹下面打开终端git status查看下当前工作目录是否干净；再通过git checkout -b login创建新的分支并且切换到login分支；

1. 删除不需要的组件；

在删除之后link以下不然会报错，都是一些代码格式错误；

2. 创建登录组件login

在components下面新建一个Login.vue文件，然后去router下面的index.js文件导入Login组件import Login from './components/Login.vue'，{ path: '/login', component: Login }；然后去App.vue下面写入

image.png
在地址栏下面输入http://localhost:8080/#/login 检测页面效果

3. 登录页面布局

让登录组件有背景色，给登录组件的模板里面的div一个class="login_container"但是这个时候会报错，

Can't resolve 'less-loader' in 'D:\web_study\vue_project\vue_shop'

所以我们要去安装less-loder 和less安装完成之后需要重新运行项目，但是还是会报错：

image.png
less-loader安装的版本过高
之后 再重新启动，但是背景色并没有充满全屏，所以html body设置样式，在src下面的assets下面新建文件夹css然后再建全局样式global.css;

image.png
写完之后在入口文件main.js中导入样式表；然后给login_container加高度撑满全屏；
然后开始登录页面的细节布局（详情看代码啦）；
按需要导入element UI
之前忘记下载element UI了所以出现了一些问题，我重新新建了项目，然后现在到了按需引入；在plugins中的element.js中导入Form FormItem Input出现了错误用lint修复了；

import { Button, Form, FormItem, Input } from 'element-ui'

继续写样式、布局，导入字体图标：将fonts文件放到assets下面，然后按照说明使用；main.js中导入图标
如果==和===规则报错参考

4. 登录部分数据绑定

给表单form绑定loginForm属性，并且在行为区data里面定义loginForm,然后给输入框密码框分别绑定loginForm.username loginForm.passworld

5. 登录部分的表单验证参考element ui表单验证

element ui表单验证

5. 登录组件实现表单重置参考element ui表单重置

给表单ref属性

6. 登录前进行预验证

在向服务器发送请求前需要先进行预验证，在main.js入口文件写入：

import axios from 'axios'
Vue.prototype.$http = axios;
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

在发送请求之后先接收数据看看，然后再取res.data，登录弹窗提示，Message需要挂载到Vue上面所以用Vue.prototype.$message=Message

7. 登录token 保存

  1. 登录成功之后的token保存到sessionStorage中，因为项目中除了登录之外的其他API接口再没有登录的情况下不能访问，必须登录之后才能访问；token只应该再当前网站打开期间生效所以保存在sessionStorage中。
  2. 通过编程式导航跳转到后台主页，路由地址是/home。
  3. 登录状态才能看到home页面，没有登录就跳到登录页面，路由导航守卫；在路由文件中写入:
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to将要访问的路径
  // from表示从哪个路径跳转而来
  // next 是一个函数表示放行
  if (to.path === '/login') {
    return next()
  } else {
    // 获取token
    const tokenStr = window.sessionStorage.getItem('token')
    if (!tokenStr) {
      return next('/login')
    } else {
      next()
    }
  }
})

8. 登录退出 token清除

  1. 在Home组件中写入
<script>
export default {
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

9. 提交登录功能组件到仓库中

  1. 先把Login子分支合并到主分支，然后把主分支推送到云端仓库，
  2. 把login子分支再推送到云端仓库
1. git add .
2. git commit -m "完成了提交登录功能"
3. git checkout master
4. git branch
5. git merge login
6. git push
7. git checkout login
8. git branch
9. git push -u origin login

回复

我来回复

  • 暂无回复内容