移动端的简单登陆页设计

刚进公司师傅给的小任务不会做，希望大lao给个思路或者样例代码，感谢感谢

需要设计一个登录页面，当前项目已经开发完成，只是需要一个登录页。页面里有用户名和密码两个输入框和登录按钮，密码需要以md5值传入，验证用户名和密码的接口也也开发好。
问题：前端页面怎么把参数传入后端的接口里？用的什么技术？
只会原生html没学过框架怎么实现这个页面的用户密码验证，需要哪些技术？

找其他功能参考一下，看下别的接口怎么调用传参的。
最简单的方式，参数拼接在地址栏后面这个会吧

问问你师傅需要用框架还是用普通得html去调用如果html得化ajax是最方便得了，或者是表单提交如果有限制就最好采用框架 vue得话应该是基本都用得

原生js请求需要用到XMLHttpRequest对象

具体使用建议看一下（最后一节项目内使用链接获取信息）：https://blog.csdn.net/yolo_link/article/details/126135626

一般 vue里用的是 axios 。你axios post 传参就行，用法看看文档 https://www.axios-http.cn/docs/intro
加密的话需要引入 md5 的插件
npm install js-md5
https://blog.csdn.net/qianxizq/article/details/121159150

既然叫的出是师傅，那就虚心请教，vue也有例子一看就会，接口的话有没有接口文档，没有的话就问清楚，提交方式post还是get ，返回的数据格式是什么，返回结果的判定是什么，不然一头雾水的做，怎么有效率

axios fetch 原生的XMLHttpRequst,这几个关键词搜搜，满大街都是

移动端？h5还是app 或者是小程序看一下相关的文档框架都有封装请求的可以看看其它页面是怎么交互的

引入axios
params是 json格式的参数
url是接口

axios.post(url,params).then(response => {
console.log(response);
})
.catch(function (error) { // 请求失败处理
console.log(error);
})



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous"
        integrity="sha512-PhuYrdDBtBeUjY7KTmjRYFFadw8uXXdTmzZyhCHZewYsqZJ0pxFCwU528jRoil42LXMW3ksegQT5zdjkfiR1IA=="
        src="https://lib.baomitu.com/vue/2.7.7/vue.min.js"></script>
    <script crossorigin="anonymous"
        integrity="sha512-rozBdNtS7jw9BlC76YF1FQGjz17qQ0J/Vu9ZCFIW374sEy4EZRbRcUZa2RU/MZ90X2mnLU56F75VfdToGV0RiA=="
        src="https://lib.baomitu.com/axios/0.27.2/axios.js"></script>
</head>

<body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

    <div id="app">
        用户名:<input type="text" v-model="name">
        密码:<input type="text" v-model="password">
        <button @click="submit()">提交</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: '',
                password: ''
            },
            methods: {
                submit() {
                    console.log(this.name, this.password);
                    alert('用户名:' + this.name + ',' + '用户密码:' + this.password);
                    // get请求
                    axios.get("http://192.168.1.220:9000/api/get", {
                        params: {
                            name: this.name,
                            password: md5(this.password)
                        }
                    }).then(res => {
                        console.log(res);
                    }).catch(function (error) {
                        console.log("error init." + error)
                    });
                    // post请求
                    axios.post("http://192.168.1.220:9000/api/get", {
                        name: this.name,
                        password: md5(this.password) 
                    }).then(res => {
                        console.log(res);
                    }).catch(err => {
                        console.log(err)
                    })

                }
            }
        })
    </script>
</body>

</html>

找下其他的功能实现。看怎么调用后端接口的，搞懂后，复制原来接口的函数代码，修改下对应的后端调用接口地址和传递的参数数量、类型，一样的方式传递到登录接口就可以了。
传递参数如果需要md5的话，直接在传递前转换一下就可以了。

用Vue还是啥？如果用的是Vue话，可以封装一下axios，然后导出axios，之后调用axios，之后利用axios去调用后端登录注册接口，比如看你公司用是put 还是post还是get，基本流程是这样的，如果是post，基本是用对象，那这里注意配置跨域，虽然后端会配，但是一般前端也会做处理！

既然是 vue项目使用了axios，那肯定是封装了axios。可以参照项目中其他方式接口是怎么写的。md5加密使用npm install js-md5 引入进行加密就好。
还有你看到其他评论里面说的 session，我估计是跟token 是一样的道理，这里也可以参考其他接口，如果其他接口都没有加这个session，那估计就是封装axios的时候处理过了，不过一般来说 token 一般都是登录的时候才能获取，做的登录接口为啥还要传递这个 session呢？

下面这段代码是每次请求前添加 token的


import axios from "axios"; 
import store from "@/store";
import router from "@/router";  
const service = axios.create({
  timeout: 40 * 1000,
});
service.interceptors.request.use(
  async (config) => {
    if (store.getters.token) { // 这里是登录成功后 把 token储存到 vuex ； 判断vuex有没有 token
      config.headers.Authorization = `Bearer ${store.getters.token}`
      return config
    }else {
  await store.dispatch('user/lgout');
  router.push('/user/login') // 跳到登录
}
  },
  (error) => {
    return Promise.reject(error);
  }
);