mirror of
https://github.com/actix/examples
synced 2024-11-23 14:31:07 +01:00
Rob Ede
parent
da976e0415
commit
f3cf37bb0d
23
Cargo.lock
generated
23
Cargo.lock
generated
@ -491,17 +491,6 @@ dependencies = [
|
||||
"syn 1.0.109",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "actix-web-cors"
|
||||
version = "1.0.0"
|
||||
dependencies = [
|
||||
"actix-cors",
|
||||
"actix-web",
|
||||
"env_logger",
|
||||
"serde",
|
||||
"serde_json",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "actix-web-lab"
|
||||
version = "0.19.1"
|
||||
@ -2296,6 +2285,18 @@ version = "0.8.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e496a50fda8aacccc86d7529e2c1e0892dbd0f898a6b5645b5561b89c3210efa"
|
||||
|
||||
[[package]]
|
||||
name = "cors"
|
||||
version = "1.0.0"
|
||||
dependencies = [
|
||||
"actix-cors",
|
||||
"actix-web",
|
||||
"env_logger",
|
||||
"log",
|
||||
"serde",
|
||||
"serde_json",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "cpufeatures"
|
||||
version = "0.2.9"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
[package]
|
||||
name = "actix-web-cors"
|
||||
name = "cors"
|
||||
version = "1.0.0"
|
||||
edition = "2021"
|
||||
|
||||
@ -8,5 +8,6 @@ actix-web = { workspace = true, features = ["rustls"] }
|
||||
actix-cors.workspace = true
|
||||
|
||||
env_logger.workspace = true
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
log.workspace = true
|
||||
serde.workspace = true
|
||||
serde_json.workspace = true
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
use std::io;
|
||||
|
||||
use actix_cors::Cors;
|
||||
use actix_web::{http::header, middleware::Logger, App, HttpServer};
|
||||
|
||||
mod user;
|
||||
|
||||
#[actix_web::main]
|
||||
async fn main() -> std::io::Result<()> {
|
||||
async fn main() -> io::Result<()> {
|
||||
env_logger::init_from_env(env_logger::Env::default().default_filter_or("info"));
|
||||
|
||||
log::info!("starting HTTP server at http://localhost:8080");
|
||||
|
||||
HttpServer::new(move || {
|
||||
App::new()
|
||||
.wrap(
|
||||
Cors::default()
|
||||
.allowed_origin("http://localhost:8080")
|
||||
.allowed_origin("http://localhost:8081")
|
||||
.allowed_methods(vec!["GET", "POST"])
|
||||
.allowed_headers(vec![header::AUTHORIZATION, header::ACCEPT])
|
||||
.allowed_header(header::CONTENT_TYPE)
|
||||
|
||||
@ -1,22 +1,49 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="content">
|
||||
<div id="title">
|
||||
<a to="#">SignUp</a>
|
||||
</div>
|
||||
<input type="text" name="username" placeholder="Username" v-model="Username" required />
|
||||
<input type="text" name="email" placeholder="E-mail" v-model="Email" required />
|
||||
<input type="password" name="password" placeholder="Password" v-model="Password" required/>
|
||||
<input type="password" name="confirm_password" placeholder="Confirm password" v-model="ConfirmPassword" required/><br/>
|
||||
|
||||
<button id="submit" @click="signup">Sign up</button>
|
||||
<div id="app">
|
||||
<div id="content">
|
||||
<div id="title">
|
||||
<a to="#">SignUp</a>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
v-model="Username"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="E-mail"
|
||||
v-model="Email"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
v-model="Password"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
placeholder="Confirm password"
|
||||
v-model="ConfirmPassword"
|
||||
required
|
||||
/><br />
|
||||
|
||||
<div id="user-info">
|
||||
<p>Click Above 'Sign up' Button <br> Then Get Your Signup Info!</p>
|
||||
<p>email : {{ email }}</p>
|
||||
<p>username : {{ username }}</p>
|
||||
<p>password : {{ password }}</p>
|
||||
</div>
|
||||
<button id="submit" @click="signup">Sign up</button>
|
||||
|
||||
<div id="user-info">
|
||||
<p>
|
||||
Click Above 'Sign up' Button <br />
|
||||
Then Get Your Signup Info!
|
||||
</p>
|
||||
<p>email : {{ email }}</p>
|
||||
<p>username : {{ username }}</p>
|
||||
<p>password : {{ password }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -24,48 +51,49 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
Username: '',
|
||||
Email: '',
|
||||
Password: '',
|
||||
ConfirmPassword: '',
|
||||
data() {
|
||||
return {
|
||||
Username: '',
|
||||
Email: '',
|
||||
Password: '',
|
||||
ConfirmPassword: '',
|
||||
|
||||
email: '',
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
signup () {
|
||||
let username = this.Username
|
||||
let email = this.Email
|
||||
let password = this.Password
|
||||
let confirm_password = this.ConfirmPassword
|
||||
let data = {
|
||||
username: username,
|
||||
email: email,
|
||||
password: password,
|
||||
confirm_password: confirm_password
|
||||
}
|
||||
fetch('http://localhost:8000/user/info', {
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
method: 'POST',
|
||||
}).then(response => response.json())
|
||||
.then(json => {
|
||||
console.log(json)
|
||||
this.email = json.email
|
||||
this.username = json.username
|
||||
this.password = json.password
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
}
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
signup() {
|
||||
let username = this.Username
|
||||
let email = this.Email
|
||||
let password = this.Password
|
||||
let confirm_password = this.ConfirmPassword
|
||||
let data = {
|
||||
username: username,
|
||||
email: email,
|
||||
password: password,
|
||||
confirm_password: confirm_password,
|
||||
}
|
||||
fetch('http://localhost:8080/user/info', {
|
||||
body: JSON.stringify(data),
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
method: 'POST',
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((json) => {
|
||||
console.log(json)
|
||||
this.email = json.email
|
||||
this.username = json.username
|
||||
this.password = json.password
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -76,26 +104,26 @@ export default {
|
||||
padding-top: 33px;
|
||||
}
|
||||
#title {
|
||||
padding: 0.5rem 0;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
background-color:bisque;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
background-color: bisque;
|
||||
text-align: center;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
margin: 6px auto auto;
|
||||
width: 250px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #AAA;
|
||||
border-bottom: 1px solid #aaa;
|
||||
font-size: 16px;
|
||||
}
|
||||
#submit {
|
||||
#submit {
|
||||
margin: 10px 0 20px 0;
|
||||
width: 250px;
|
||||
height: 33px;
|
||||
background-color:bisque;
|
||||
background-color: bisque;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
@ -103,37 +131,38 @@ input[type="password"] {
|
||||
transition: 0.1s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
input[type='checkbox'] {
|
||||
margin-top: 11px;
|
||||
}
|
||||
dialog {
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
border: 5px solid rgba(0, 0, 0, 0.3);
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
border: 5px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
dialog::backdrop{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
dialog::backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#closeDialog {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
padding: 0.4rem 0.8em;
|
||||
background: #eb9816;
|
||||
border-bottom: 1px solid #f1b75c;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
padding: 0.4rem 0.8em;
|
||||
background: #eb9816;
|
||||
border-bottom: 1px solid #f1b75c;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
#closeDialog:hover, #closeDialog:focus {
|
||||
opacity: 0.92;
|
||||
cursor: pointer;
|
||||
#closeDialog:hover,
|
||||
#closeDialog:focus {
|
||||
opacity: 0.92;
|
||||
cursor: pointer;
|
||||
}
|
||||
#user-info {
|
||||
width: 250px;
|
||||
@ -141,9 +170,9 @@ cursor: pointer;
|
||||
padding-top: 44px;
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
#content {
|
||||
margin: 0 auto;
|
||||
padding-top: 100px;
|
||||
#content {
|
||||
margin: 0 auto;
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,11 +4,11 @@ version = "1.0.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
actix-web = "4"
|
||||
chrono = { version = "0.4.26", default-features = false, features = ["std", "clock"] }
|
||||
derive_more = "0.99.7"
|
||||
actix-web.workspace = true
|
||||
chrono.workspace = true
|
||||
derive_more.workspace = true
|
||||
dotenv = "0.15"
|
||||
env_logger = "0.10"
|
||||
log = "0.4"
|
||||
env_logger.workspace = true
|
||||
log.workspace = true
|
||||
mysql = "24"
|
||||
serde = { version = "1", features = ["derive"] }
|
||||
serde.workspace = true
|
||||
|
||||
Loading…
Reference in New Issue
Block a user