nodejs+vue+element+eachers构建开源项目大型连续剧（5）前端请求封装，完成用户注册。

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

        在前端项目开发中一个好的请求封装可以给我们带来诸多便利减少了代码重复优化了问题处理等。那接下来我们一起学习一下怎么做到对一个请求的简单封装吧。主要通过对axios请求的二次封装实现页面的请求以及必要的优化。

一、引入axios

        学习第一步安装加引入。押韵哈哈哈

        安装axios

npm install axios

        新建utils文件夹下request.js文件用于请求的封装初始化的封装后面我们一步步来。

import axios from axios
const service=axios.create({
    baseURL: '',//请求地址
    timeout: 1000,//请求超时时间如果超给改时间会中断
    // headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})
//添加请求拦截器
service.interceptors.request.use( (config)=> {
    // 在发送请求之前做些什么
    return config;
  },  (error)=> {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

  //添加响应拦截器
  service.interceptors.response.use( (response)=> {
    // 对响应数据做点什么
    return response;
  },  (error)=> {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default service

        大家会发现url是空的在开发中这个url一般都是动态的更加环境去切换的这个地方需要插播一个小知识关于.env文件的使用。

二、关于.env文件的使用

        1.模式

                在vue-cli中模式是一个重要的概念默认情况下有三个模式。

                对于下面所说的命令大家可以看一下项目中的package.json文件一看就明白了

  1. development 模式用于 vue-cli-service serve
  2. production 模式用于 vue-cli-service build 和 vue-cli-service test:unit
  3. test 模式用于 vue-cli-service test:unit

development模式对应我们开发环境对应的命令是 serve命令也就是说我们启动项目后就在development模式下运行

production模式对应打包命令build。打包后在production模式下运行

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如如果你想要在构建命令中使用开发环境变量

vue-cli-service build --mode development

                总结可以通过命令动态配置配置对于模式下对应那些配置。

                我们一般通过.env文件进行请求地址的配置例如存在多个地址的情况可以通过命令进行灵活配置。

        2.process.env环境对象

                process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看如下图所示。

                在不同的模式会有不同的环境变量

在 development 模式下 NODE_ENV 的值会被设置为 “development”
在 production模式下 NODE_ENV 的值会被设置为 “production” 

        3..env文件的执行顺序

.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件

研发环境 加载顺序.env .env.development 同一个变量名 后者会覆盖前者
生产环境 加载顺序.env .env.production 同一个变量名 后者会覆盖前者

三、配置开发环境下的请求地址

        因为我们现在是在开发模式所以在.env.development文件中配置我们需要请求的地址如下。

        对应的ip需要填写服务器ip和对应端口号

# just a flag
NODE_ENV = 'development'

# base api
 VUE_APP_BASE_API = 'http://10.0.0.165:9588'

        然后我们上面的请求url就可以拿到对应的值了

const service=axios.create({
    baseURL: process.env.VUE_APP_BASE_API,//请求地址
    timeout: 10000,//请求超时时间如果超给改时间会中断
    // headers: {'X-Custom-Header': 'foobar'}//自定义请求头
})

        然后我们建立api文件夹进行接口的模块化区分不同模块对应不同的模块js。

         进行一个get请求进行封装是否成功的测试

import request from "@/utils/request";

export function list(){
    return request({
        url: `/api/list`,
		method: "get"
    })
}

         这是第一集用于测试服务器开发get请求的接口当时我们测试是成功的。因为测试所以我们怎么简单怎么来主要是测试是否成功。

        在app.vue页面进行一个简单的请求

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import {list} from '@/api/list'
export default {
  created(){
    list().then(res=>{
      console.log(res);
    })
  }
}
</script>
<style lang="less">

@import "@/assets/style/reset.css";
</style>

        然后重点来了哈哈哈哈报错了告诉我跨域了然后就大结局了再见了各位。

           

        然而并没有结束让我们一起解决跨域吧

        前端后台跨域了你解决下

        后端自己解决前端配置代理不会么

        前端离职不干了

        现在我们是后端了作为一个前端喜欢的后端我只能说我来搞交给我虽然前后端都是我呜呜呜

四、后端通过cors解决跨域

        其实对于后端来说解决跨域很简单只需要使用CORS就可以了一共需要两步

        第一步安装cors

yarn add cors

npm install cors

npm和yarn都可以哈yarn安装快一点各凭喜好

        第二步使用cors()解决跨域

        以下是nodejs服务器端的代码app.js文件中引入并使用

//引入

const cors = require('cors')

//使用

app.use(cors())

        然后再继续请求试一下发现跨域就这样解决了。

 五、关于跨域的相关知识

    cors又称跨域资源共享由一系类HTTP响应头组成这些HTTP响应头决定浏览器是否组织前端JS代码跨域获取资源实际情况是前端同意请求服务器同意响应浏览器不同意这门亲事

    浏览器的同源安全策略端口、域名、协议有一个不同就不能通信默认会阻止网页“跨域”获取资源但如果接口服务器配置了CORS相关的响应头就可以解除浏览器端的跨域访问限制。就好像服务器拿着彩礼来了浏览器就同意的这门亲事。

     CORS主要在服务器端配置客户端无需做任何处理。cors有兼容性2022年可忽略不不计主要是低版本服务器的兼容性。

      

六、前端页面开发

页面展示

 

代码

页面

<template>
  <div class="login">
    <div id="login_box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="verification" v-if="!loginstate">
          <el-input
            v-model="ruleForm.verification"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="loginstate" @click="login"
            >登录</el-button
          >
          <el-button type="primary" v-else @click="login">注册</el-button>
          <el-button @click="loginstate = !loginstate">切换{{ loginstate?'注册':'登录' }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reguser } from "@/api/login";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.verification !== "") {
          this.$refs.ruleForm.validateField("verification");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //当前的状态true为登录
      loginstate: true,
      ruleForm: {
        username: "",
        password: "",
        verification: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        verification: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    login() {
      //用来判断是登录还是注册
      const { loginstate } = this;
      const { username, password } = this.ruleForm;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //验证成功
          if (loginstate) {
            //登录
          } else {
            //注册
            const data = {
              username,
              password,
            };
            reguser(data).then((res) => {
              const {code,data}=res.data
              if(code===200){
                this.loginstate=true
                this.$message.success('用户注册成功请登录。');
              }else{
                this.$message.error(data);
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg")
    no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#login_box {
  width: 20vw;
  background-color: #00000060;
  margin: auto;
  margin-top: 15%;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
}
</style>

 

后面发现请求后后台获取不到我们传递的body参数因为axios默认传递的post参数格式是application/json所以我们需要进行一定的配置

通过body-parser解决上述问题代码记得先安装

//导入express
const express = require('express')
//引入cors解决跨域问题
const cors = require('cors')
//用于解决fromdata格式数据获取不到的问题
const bodyParser = require('body-parser');
//创建web服务器
const app = express()
//解决跨域
app.use(cors())
//数据JSON类型
app.use(bodyParser.json());
//解析post请求数据
app.use(bodyParser.urlencoded({ extended: false }));
//将文件部署到服务器
app.use(express.static('img'))
//配置解析表单数据(application/x-www-form-urlencoded)格式的中间件
app.use(express.urlencoded({ extended: false }))
const userRouter = require("./router/user")
app.use('/api', userRouter)
// 通过ap.listen进行服务器的配置并启动服务器接收两个配置参数一个是对应的端口号一个是启动成功的回调函数
app.listen(9588, () => {
    console.log('服务器启动成功');
})

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: NodeJSvue
返回列表

上一篇：Go语言设计与实现 -- Channel

下一篇：Spring——最全Spring目录

“nodejs+vue+element+eachers构建开源项目大型连续剧（5）前端请求封装，完成用户注册。” 的相关文章

Vue.js学习笔记1年前 (2023-02-02)
非常流行的vue库，看这一篇就够了1年前 (2023-02-02)
VUE|后台管理项目——动态路由权限管理1年前 (2023-02-02)
Vue技术教程（2023-1-9）1年前 (2023-02-02)
vue3 项目篇商场 之 初始化项目1年前 (2023-02-02)
vue全家桶-vuex1年前 (2023-02-02)
vue3使用svg图标多种方式1年前 (2023-02-02)
vue文本点击样式设置1年前 (2023-02-02)
vue中实现后台系统权限管理的功能1年前 (2023-02-02)
【手写 Vue2.x 源码】第三十五篇 - 组件部分 - Vue.component 实现1年前 (2023-02-02)

阿里云国际版