1.如何建立一个前端程序用来接受网页上的数据访问

经过之前对于前端的相关知识的学习，我们开始动手做一个简单的项目。我们要求，可以从前端发送自己的登入的用户名给后端，并且由后端来判断登入是否成功。

以下是我们项目的基本结构：

前端登入代码：

<script setup>
        import {ref,reactive} from 'vue'
        import {useRouter} from 'vue-router'
        const router = useRouter()

        import{ defineUser}  from '../store/userStore.js'
        let sysUser = defineUser()
        import request  from '../utils/request'

        let loginUser =reactive({
                username:"",
                userPwd:""
        })

       let usernameMsg =ref("")
       let userPwdMsg =ref("")


       function checkUsername(){
            let usernameReg= /^[a-zA-Z0-9]{5,10}$/
            if(!usernameReg.test(loginUser.username)){
                usernameMsg.value="格式有误"
                return false
            }
            usernameMsg.value="OK"
            return true
       }

       function checkUserPwd(){
            let userPwdReg = /^[0-9]{6}$/

            if(!userPwdReg.test(loginUser.userPwd)){
                userPwdMsg.value="格式有误"
                return false
            }

            userPwdMsg.value="OK"
            return true
       }

       async function login(){
            // 表单数据格式都正确再提交
            let flag1 =checkUsername()
            let flag2 =checkUserPwd()
            if(!(flag1 && flag2)){
                return 
            }
           let {data} = await request.post("user/login",loginUser)
           if(data.code == 200 ){
                alert("登录成功")
                console.log(data)
                // 获得登录的用户信息,更新到pinia中
                sysUser.uid =data.data.loginUser.uid
                sysUser.username = data.data.loginUser.username
                // 跳转到showSchedule
                router.push("/showSchedule")
           } else if( data.code == 503){
                alert("密码有误")

           }else if (data.code == 501 ){
                alert("用户名有误")
           }else {
                alert("未知错误")
           }
           
       }


</script>

<template>
    <!-- <img src="public\image\backgroundofloginandregist.jpg" alt="背景图片" class="background-image" /> -->
    <div class="login-container">
    <div class="login-input">
      <label for="username">账号</label>
      <input class="ipt" 
                    type="text" 
                    v-model="loginUser.username"
                    @blur="checkUsername()">
                    <span id="usernameMsg" v-text="usernameMsg"></span>
    </div>
    <div class="login-input">
      <label for="password">密码</label>
      <input class="ipt" 
                    type="password" 
                    v-model="loginUser.userPwd"
                    @blur="checkUserPwd()">
                    <span id="userPwdMsg" v-text="userPwdMsg"></span>
      <a href="#" class="forgot-password">忘记密码?</a>
    </div>
    <div class="login-actions">
        <router-link class="register-button" to="/regist">
                     <button class="register-button">注册</button>
        </router-link>
      
       <!-- <button class="register-button"  >注册</button> -->
      <!-- <input class="register-button" type="button" value="重置"> -->
                    <!-- <router-link to="/regist">
                      <button class="register-button">去注册</button>
                    </router-link> -->
      <input class="login-button" type="button" @click="login()" value="登录">
      <!-- <button class="login-button">登录</button> -->
    </div>
  </div>
  <div>
    <!-- <h3 class="ht">请登录</h3> -->
        <!-- <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" 
                    type="text" 
                    v-model="loginUser.username"
                    @blur="checkUsername()">
                    <span id="usernameMsg" v-text="usernameMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" 
                    type="password" 
                    v-model="loginUser.userPwd"
                    @blur="checkUserPwd()">
                    <span id="userPwdMsg" v-text="userPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="button" @click="login()" value="登录">
                    <input class="btn1" type="button" value="重置">
                    <router-link to="/regist">
                      <button class="btn1">去注册</button>
                    </router-link>
                </td>
            </tr>
        </table> -->
        

  </div>
</template>

<!-- <style scoped>
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;
        }
        .ipt{
            border: 0px;
            width: 50%;
        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
        }
        #usernameMsg , #userPwdMsg {
            color: gold;
        }
        .buttonContainer{
            text-align: center;
        }
</style> -->
<style scoped>
.login-container {
  width: 450px;
  margin: 150px auto 0; /* 增加上边距 */
  padding: 40px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
}

.login-input {
  margin-bottom: 15px;
}

.login-input label {
  display: block;
  margin-bottom: 5px;
  color: #777;
}

.login-input input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.forgot-password {
  display: block;
  text-align: right;
  margin-top: 5px;
  color: #3498db;
  text-decoration: none;
}

.login-actions {
  display: flex;
  justify-content: space-between;
}

.register-button,
.login-button {
  width: 45%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.register-button {
  background-color: #f1f1f1;
}

.login-button {
  background-color: #3498db;
  color: #fff;
}

</style>

运行之后的结果图：

登入组件

<script setup>
    import {ref,reactive} from 'vue'
    /* 导入发送请求的axios对象 */
    import request from'../utils/request'

    import {useRouter} from 'vue-router'
    const router = useRouter()

    let registUser = reactive({
        username:"",
        userPwd:""
    })
    let usernameMsg=ref('')
    let userPwdMsg=ref('')
    let reUserPwdMsg=ref('')
    let reUserPwd=ref('')
    async function checkUsername(){
        let usernameReg= /^[a-zA-Z0-9]{5,10}$/
        if(!usernameReg.test(registUser.username)){
            usernameMsg.value="格式有误"
            return false
        }
        // 发送异步请求   继续校验用户名是否被占用
        let {data} = await request.post(`user/checkUsernameUsed?username=${registUser.username}`)
        if(data.code != 200){
            usernameMsg.value="用户名占用"
            return false
        }
        usernameMsg.value="可用"
        return true
    }

    function checkUserPwd(){
        let userPwdReg = /^[0-9]{6}$/
        if(!userPwdReg.test(registUser.userPwd)){
            userPwdMsg.value="格式有误"
            return false
        }
        userPwdMsg.value="OK"
        return true
    }

    function checkReUserPwd(){
        let userPwdReg = /^[0-9]{6}$/
        if(!userPwdReg.test(reUserPwd.value)){
            reUserPwdMsg.value="格式有误"
            return false
        }
        if(registUser.userPwd != reUserPwd.value){
            reUserPwdMsg.value="两次密码不一致"
            return false
        }
        reUserPwdMsg.value="OK"
        return true
    }

    // 注册的方法
    async function regist(){
        // 校验所有的输入框是否合法
        let flag1 =await checkUsername()
        let flag2 =await checkUserPwd()
        let flag3 =await checkReUserPwd()
        if(flag1 && flag2 && flag3){
          let  {data}= await request.post("user/regist",registUser)
          if(data.code == 200){
            // 注册成功跳转 登录页
            alert("注册成功,快去登录吧")
            router.push("/login")
          }else{
            alert("抱歉,用户名被抢注了")
          }
        }else{
            alert("校验不通过,请求再次检查数据")
        }
    }

    function clearForm(){
        registUser.username=""
        registUser.userPwd=""
        usernameMsg.value=""
        userPwdMsg.value=""
        reUserPwd.value=""
        reUserPwdMsg.value=""

    }


</script>

<template>
  <!-- <div>
    <h3 class="ht">请注册</h3>

    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <td>请输入账号</td>
            <td>
                <input class="ipt" 
                  id="usernameInput" 
                  type="text" 
                  name="username" 
                  v-model="registUser.username"
                  @blur="checkUsername()">

                <span id="usernameMsg" class="msg" v-text="usernameMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>请输入密码</td>
            <td>
                <input class="ipt" 
                id="userPwdInput" 
                type="password" 
                name="userPwd" 
                v-model="registUser.userPwd"
                @blur="checkUserPwd()">
                <span id="userPwdMsg" class="msg" v-text="userPwdMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>确认密码</td>
            <td>
                <input class="ipt" 
                id="reUserPwdInput" 
                type="password" 
                v-model="reUserPwd"
                @blur="checkReUserPwd()">
                <span id="reUserPwdMsg" class="msg" v-text="reUserPwdMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td colspan="2" class="buttonContainer">
                <input class="btn1" type="button" @click="regist()" value="注册">
                <input class="btn1" type="button" @click="clearForm()" value="重置">
                <router-link to="/login">
                  <button class="btn1">去登录</button>
                </router-link>
            </td>
        </tr>
    </table>
  </div> -->
  <div class="register-container">
    <div class="register-input">
      <label for="phone">+86</label>
      <input type="text" id="phone" placeholder="请输入手机号" />
      <button class="verify-button">获取验证码</button>
    </div>
    <div class="register-input">
      <label for="verification">验证码</label>
      <input type="text" id="verification" placeholder="请输入验证码" />
    </div>
    <div class="register-actions">
      <button class="register-button">登录/注册</button>
    </div>
  </div>
</template>
<!-- <style scoped>
       .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;

        }
        .ipt{
            border: 0px;
            width: 50%;

        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;

        }
        .msg {
            color: gold;
        }
        .buttonContainer{
            text-align: center;
        }
</style>
 -->
 <script>
 export default {
   name: 'RegisterComponent',
 };
 </script>
 
 <style scoped>
 .register-container {
   width: 300px;
   margin: 200px auto 0;
   padding: 30px;
   border: 1px solid #ccc;
   border-radius: 8px;
   background-color: #fff;
 }
 
 .register-input {
   display: flex;
   align-items: center;
   margin-bottom: 15px;
 }
 
 .register-input label {
   flex: 0 0 auto;
   margin-right: 10px;
   color: #777;
 }
 
 .register-input input {
   flex: 1 1 auto;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
 
 .verify-button {
   flex: 0 0 auto;
   margin-left: 10px;
   padding: 8px 10px;
   border: none;
   border-radius: 4px;
   background-color: #3498db;
   color: #fff;
   cursor: pointer;
 }
 
 .register-actions {
   display: flex;
   justify-content: center;
 }
 
 .register-button {
   width: 100%;
   padding: 10px;
   border: none;
   border-radius: 4px;
   background-color: #3498db;
   color: #fff;
   cursor: pointer;
 }
 </style>

其中负责检查用户名是否被占用的代码

async function checkUsername(){
        let usernameReg= /^[a-zA-Z0-9]{5,10}$/
        if(!usernameReg.test(registUser.username)){
            usernameMsg.value="格式有误"
            return false
        }
        // 发送异步请求   继续校验用户名是否被占用
        let {data} = await request.post(`user/checkUsernameUsed?username=${registUser.username}`)
        if(data.code != 200){
            usernameMsg.value="用户名占用"
            return false
        }
        usernameMsg.value="可用"
        return true
    }

let {data} = await request.post(`user/checkUsernameUsed?username=${registUser.username}`)这句代码负责给后端发送一个post请求，使用路径传参的方式，输入用户名给后端进行联调。

其中 在utils/request.js里面记录了。前端程序要如何发送请求，给后端的那个端口号，比如以下的代码。

import axios from 'axios'

//  创建instance实例
const instance = axios.create({
    baseURL:'http://localhost:8080/'
   
})

//  添加请求拦截
instance.interceptors.request.use(
    // 设置请求头配置信息
    config=>{
        //处理指定的请求头
        
        return config
    },
    // 设置请求错误处理函数
    error=>{
    
        return Promise.reject(error)
    }
)
// 添加响应拦截器
instance.interceptors.response.use(
    // 设置响应正确时的处理函数
    response=>{
      
        return response
    },
    // 设置响应异常时的处理函数
    error=>{
        return Promise.reject(error)
    }
)
// 默认导出
export default instance

        结合utils/request.js和let {data} = await request.post(`user/checkUsernameUsed?username=${registUser.username}`)的代码。我们可以知道实际上前端发送的请求。http://localhost:8080/user/checkUsernameUsed?username=${registUser.username}。

        由上，就是我们的最简单的前端访问后端的全过程，在后端我们详细地介绍。后端如何处理前端发过来的数据。