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

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

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

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

注册的业务

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

登录业务

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

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

4. 退出登录
5. 导航守卫

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

• 全局守卫：你的项目当中只要发生路由变化，守卫就能监听到。
  举例子：紫禁城【皇帝、太后、妃子】，紫禁城大门守卫全要排查
• 路由独享守卫：
  举例子：紫禁城【皇帝、太后、妃子】，是相应的【皇帝、太后、妃子】路上守卫
• 组件内守卫：
  举例子：我要去皇帝屋子，已经到了皇帝屋子的外面，也有守卫

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

6. 获取交易页面用户信息
   用户登陆了才可以获取用户地址信息，不登录没办法获取到的

7. 交易页面完成（商品清单）
   动态展示服务器数据完成

8. 提交订单
   （1）先把支付静态组件先搞定
   （2）点击提交订单按钮的时候，还需要向服务器发一次请求【把支付一些信息传递给服务器】

9. 获取支付信息（不再使用vuex）
   （1）别在生命周期函数中使用async
   （2）获取支付信息

10. elementUI使用+ 按需引入
    已经学过的组件库：React(Vue): antd[PC] antd-mobile[移动端]
    Vue: ElementUI[PC] vant[移动端的]
    （1）elementUI按需引入，配置文件发生变化，项目需要重新启动的

个人中心

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

npm i vue-lazyload@1.3.3 -S
1

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

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

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

Vue.use(VeeValidate)
1
2
3
4
5
6

第二步：提示信息

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

第三步：基本使用

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

1
2
3
4
5
6
7

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

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

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

productionSourceMap: false
1

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

nginx配置

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

location / {
	root	/root/
	index	index.html;
	try_files $uri $uri/ /index.html;
}
1
2
3
4
5

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

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

10. nginx服务器跑起来

service nginx start 
1