注册的业务、登录业务、个人中心、nginx配置【VUE项目】

登录与注册静态组件-（处理共用图片资源问题）

登录与注册功能（git）：必须要会的技能

登录与注册的静态组件
assets文件夹----全部组件共用的静态资源
在样式当中也可以使用@符号【src别名】，切记在前面加上~

注册的业务

注册业务 || 登录业务中表单验证先不处理【后期会处理】
获取验证码接口地址： /api/user/passport/sendCode/{phone} get

登录业务

注册—通过数据库存储用户信息（名字、密码）
登录—登录成功的时候，后台为了区分你这个用户是谁-服务器下发一个token【令牌：唯一标识符】
登录接口：不完美，一般登录成功服务器会下发token，前台持久化存储token【带着token找服务器要用户信息进行展示】
登录过后首页用户信息的展示
（1）当用户注册完成，用户登录【用户名+密码】向服务器发请求（组件派发action：userLogin），登录成功获取到token，存储于仓库当中（非持久化的），路由跳转到home首页
（2）因此在首页当中（mounted）派发action（getUserInfo）获取用户信息，以及动态展示header组件内容。
（3）一刷新home首页，获取不到用户信息（token：vuex非持久化存储）
（4）持久化存储token
（5）存在一些问题

问题1：多个组件展示用户信息需要在每一个组件的mounted中触发 this.$store.dispatch(“getUserInfo”); 不行
问题2：用户已经登录了，就不应该再回登录页面

退出登录
导航守卫

“导航”：表示路由正在发生改变。进行路由跳转
“守卫”：你把它当作 “紫禁城护卫”

全局守卫：你的项目当中只要发生路由变化，守卫就能监听到。
举例子：紫禁城【皇帝、太后、妃子】，紫禁城大门守卫全要排查

路由独享守卫：
举例子：紫禁城【皇帝、太后、妃子】，是相应的【皇帝、太后、妃子】路上守卫

组件内守卫：
举例子：我要去皇帝屋子，已经到了皇帝屋子的外面，也有守卫

比如：用户已经登陆，用户不应该还能回到login页面

获取交易页面用户信息
用户登陆了才可以获取用户地址信息，不登录没办法获取到的
交易页面完成（商品清单）
动态展示服务器数据完成
提交订单
（1）先把支付静态组件先搞定
（2）点击提交订单按钮的时候，还需要向服务器发一次请求【把支付一些信息传递给服务器】
获取支付信息（不再使用vuex）
（1）别在生命周期函数中使用async
（2）获取支付信息
elementUI使用+ 按需引入
已经学过的组件库：React(Vue): antd[PC] antd-mobile[移动端]
Vue: ElementUI[PC] vant[移动端的]
（1）elementUI按需引入，配置文件发生变化，项目需要重新启动的

个人中心

个人中心完成
面试的时候：是否封装过组件（分页器、日历）
个人中心当中：分页器
全局守卫
未登录访问，交易相关（trade）、支付相关（pay，paysuccess）、用户中心（center）相关跳转到登录页面
组件内守卫
只有从购物车界面才能跳转到交易页面（创建订单）
只有从交易页面（创建订单）页面才能跳转到支付页面
只有从支付页面才能跳转到支付成功页面
图片懒加载
https://www.npmjs.com/package/vue-lazyload
安装插件：

npm i vue-lazyload@1.3.3 -S

vee-validate 基本使用
第一步：插件安装与引入

npm i vee-validate@2 --save 安装的插件安装2版本的

import Vue from 'vue'
import VeeValidate from 'vee-validate'
//中文的提示信息
import zh_CN from '...vee-validate/dist/locale/zh_CN'Vue.use(VeeValidate)

第二步：提示信息

// 表单验证
VeeValidate.Validator.localize('zh_CN', {meaasges: {...zh_CN.meaasges,is: (field) => `${field}必须与密码相同` //修改内置规则的message，让确认密码和密码相同},attributes: {// 给校验的 field 属性名映射中文名称phone: '手机号',code: '验证码',password: '密码',password1: '确认密码',isCheck: '协议'}
})

第三步：基本使用

        <input placeholder="请输入你的手机号" v-model="phone" name="phone" v-validate="{required: true, regex:/^1\d{10}$/ }" :class="{invalid: errors.has('phone')}"/>

// 自定义校验规则
VeeValidate.Validator.extend("agree", {validate: (value) => {return value},getMessage: (field) => field + "必须同意"
})

      const success = await this.$validator.validateAll();全部验证

路由懒加载
打包上线
打包：npm run build
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知时哪里的代码错误。
有了 map 就可以向未加密的代码一样，准确的输出是哪一行哪一列有错误。
所以该文件如果项目不需要是可以去除掉
vue.config.js 配置

productionSourceMap: false

购买服务器
1.阿里云 2.腾讯云
8. 设置安全组，让服务器一些端口号打开
9. 利用xshell工具登陆服务器

nginx配置

xshell进入根目录下/etc
进入etc目录，这个目录下有一个nginx目录，进入到这个目录【已经安装过nginx：如果没有安装过，只有四五个文件】】
如果想nginx：yum install nginx
安装完nginx服务器以后，你会发现在nginx目录下多了一个nginx.conf文件，在这个文件中进行配置
vim nginx.conf 进行编辑，主要添加如下两项：
（1）解决第一个问题：为什么访问服务器ip地址就可以访问到项目

location / {root /root/index index.html;try_files $uri $uri/ /index.html;
}

（2）解决第二个问题：项目的数据来自于http://gmall-h5-api.atguigu.cn

location /api {proxy_pass http://gmall-h5-api.atguigu.cn;
}

nginx服务器跑起来

service nginx start

注册的业务、登录业务、个人中心、nginx配置【VUE项目】相关推荐

nginx配置vue项目500_一个Nginx部署多个vue前端项目总结
摘要: 近来接手了一个二次开发的前后端分离模式的项目,其中在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在一个Nginx下部署2 ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
nginx部署vue项目，给访问路径加前缀
Nginx安装与启动去官网下载nginx压缩包,解压到电脑合适位置,我这放在D盘,目录是D:\nginx-1.21.6, 在这个路径,直接输入cmd,打开命令行,启动命令: nginx.exe 或者 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
新装linux系统(centOs7)使用nginx驱动vue项目
新装linux系统(centOs7)使用nginx驱动vue项目配置linux环境 centos安装nginx 安装nginx前首先要确认系统中安装了gcc.pcre-devel.zlib-deve ...
服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
使用Dockerfile+nginx配置前端项目
使用Dockerfile+nginx配置前端项目创建文件: ├── default.conf ├── Dockerfile ├── html │ ├── index2.html │ └── inde ...
Ubuntu 下搭建 Nginx 部署 vue 项目
Ubuntu 下搭建 Nginx 部署 vue 项目上一篇:Ubuntu 下部署 SpringBoot 第一步: Ubuntu 上安装 nodejs 执行 apt install nodejs 命令 ...
Centos+Nginx部署Vue项目
Centos+Nginx部署Vue项目 1.项目打包生成dist文件夹在项目根目录下打开cmd窗口,输入命令 npm run build //生成dist文件夹 2.将dist文件夹上传到cento ...
Nginx 部署 Vue 项目刷新页面出现404
问题使用Vue.框架,利用vue-route编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会 ...

注册的业务、登录业务、个人中心、nginx配置【VUE项目】

登录与注册静态组件-（处理共用图片资源问题）

注册的业务

登录业务

个人中心

nginx配置

注册的业务、登录业务、个人中心、nginx配置【VUE项目】相关推荐

最新文章

热门文章