阿里云开发训练营Day7

最新推荐文章于 2023-01-31 20:00:59 发布

往事如烟隔多年

最新推荐文章于 2023-01-31 20:00:59 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/mdzz14/article/details/107968208

版权

Midway Serverless 一体化应用开发

创建应用

选择实验室，解决方案选择Midway Serverless OTS数据库示例

加载依赖

npm run dev

引入文件

修改项目 public/index.html 文件内容如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Todo List</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/index.tsx 内容如下

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom';

export default function App() {

  const [name,setName] = useState('')
  const [password,setPassword] = useState('')

  const handleSubmit = () => {
    console.log('name is',name)
    console.log('password is',password)
    fetch(`/api/register?name=${name}&password=${password}`)
    //.then(resp => console.log(resp.status))
    .then(resp => resp.json())
    .then(resp => {
      if(resp.success){
        alert(`用户${resp.message}注册成功`);
      }
    })
  }

  const handleLogin = () => {
    console.log('name is',name)
    console.log('password is',password)
    fetch(`/api/login?name=${name}&password=${password}`)
    .then(resp => resp.json())
    .then(resp => {
      if(resp.success === true){
        alert(`登录成功，用户名:${resp.message}`);
      }else{
        alert(`登录失败,${resp.message}`);
      }
    })
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full">
        <div>
          <img className="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="Workflow" />
          <h2 className="mt-6 text-center text-3xl leading-9 font-extrabold text-gray-900">
            注册或者登录
            </h2>
        </div>
        <form className="mt-8" action="#" method="POST">
          <input type="hidden" name="remember" defaultValue="true" />
          <div className="rounded-md shadow-sm">
            <div>
              <input
                onChange={e=>{
                  setName(e.target.value)
                }}
                aria-label="Email address" name="email" type="email" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5" placeholder="Email address" />
            </div>
            <div className="-mt-px">
              <input
                onChange={e=>{
                  setPassword(e.target.value)
                  console.log("当前账号：",e.target.value)
                }}
                aria-label="Password" name="password" type="password" required className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5" placeholder="Password" />
            </div>
          </div>
          <div className="mt-6">
            <button  type="button" onClick={handleSubmit} className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
              </span>
                注册
              </button>
          </div>
          <div className="mt-6">
            <button type="button"  onClick={handleLogin} className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
              <span className="absolute left-0 inset-y-0 flex items-center pl-3">
              </span>
                登录
              </button>
          </div>
        </form>
      </div>
    </div>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

在 src/apis 目录下新建 user.ts文件用于注册、登录功能实现

import { Func, Inject, Provide } from '@midwayjs/decorator';

@Provide()
export class UserService {

  @Inject()
  ctx;

  @Inject()
  db;

  @Func('user.register')
    async register() {
    const {name, password } = this.ctx.query;
     const results = {
      success:false,
      message:''
    };
    const flag = await this.db.query(`insert into login(user,pwd) values('${name}', '${password}')`);
    if(flag.length>0){
      results.success = true;
      results.message = name;
    }else{
      results.message = '注册失败';
    }
    return results;
  }

  @Func('user.login')
    async login() {
    const {name, password } = this.ctx.query;
    const results = {
      success:false,
      message:''
    };
    const flag = await this.db.query(`select * from login where user = '${name}' and pwd = '${password}'`);
    if(flag[0].length > 0){
      results.success = true;
      results.message = name;
    }else{
      results.message = '用户名或密码错误';
    }
    return results;
  }
}

数据库配置

修改 src/apis/config 目录下的 config.default.ts 文件内容或在环境管理中配置

访问测试

启动

npm run dev

测试

往事如烟隔多年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿里云开发训练营Day7

Midway Serverless 一体化应用开发创建应用选择实验室，解决方案选择Midway Serverless OTS数据库示例加载依赖npm run dev引入文件修改项目 public/index.html 文件内容如下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" hr..
复制链接

扫一扫