actix/examples
1
0
Fork 0
mirror of https://github.com/actix/examples synced 2024-11-27 16:02:57 +01:00
Code Issues Releases Wiki Activity

fix vue example ports

Browse Source 
closes #624
This commit is contained in:
Rob Ede 2023-07-17 22:26:11 +01:00
parent da976e0415
commit f3cf37bb0d
No known key found for this signature in database
GPG Key ID: 97C636207D3EF933
5 changed files with 151 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Cargo.lock generated
View File

@ -491,17 +491,6 @@ dependencies = [
"syn 1.0.109", "syn 1.0.109",
] ]
[[package]]
name = "actix-web-cors"
version = "1.0.0"
dependencies = [
"actix-cors",
"actix-web",
"env_logger",
"serde",
"serde_json",
]
[[package]] [[package]]
name = "actix-web-lab" name = "actix-web-lab"
version = "0.19.1" version = "0.19.1"
@ -2296,6 +2285,18 @@ version = "0.8.4"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e496a50fda8aacccc86d7529e2c1e0892dbd0f898a6b5645b5561b89c3210efa" checksum = "e496a50fda8aacccc86d7529e2c1e0892dbd0f898a6b5645b5561b89c3210efa"
[[package]]
name = "cors"
version = "1.0.0"
dependencies = [
"actix-cors",
"actix-web",
"env_logger",
"log",
"serde",
"serde_json",
]
[[package]] [[package]]
name = "cpufeatures" name = "cpufeatures"
version = "0.2.9" version = "0.2.9"

5
cors/backend/Cargo.toml
View File

@ -1,5 +1,5 @@
[package] [package]
name = "actix-web-cors" name = "cors"
version = "1.0.0" version = "1.0.0"
edition = "2021" edition = "2021"
@ -8,5 +8,6 @@ actix-web = { workspace = true, features = ["rustls"] }
actix-cors.workspace = true actix-cors.workspace = true
env_logger.workspace = true env_logger.workspace = true
serde = { version = "1.0", features = ["derive"] } log.workspace = true
serde.workspace = true
serde_json.workspace = true serde_json.workspace = true

8
cors/backend/src/main.rs
View File

@ -1,17 +1,21 @@
use std::io;
use actix_cors::Cors; use actix_cors::Cors;
use actix_web::{http::header, middleware::Logger, App, HttpServer}; use actix_web::{http::header, middleware::Logger, App, HttpServer};
mod user; mod user;
#[actix_web::main] #[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")); 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 || { HttpServer::new(move || {
App::new() App::new()
.wrap( .wrap(
Cors::default() Cors::default()
.allowed_origin("http://localhost:8080") .allowed_origin("http://localhost:8081")
.allowed_methods(vec!["GET", "POST"]) .allowed_methods(vec!["GET", "POST"])
.allowed_headers(vec![header::AUTHORIZATION, header::ACCEPT]) .allowed_headers(vec![header::AUTHORIZATION, header::ACCEPT])
.allowed_header(header::CONTENT_TYPE) .allowed_header(header::CONTENT_TYPE)

219
cors/frontend/src/app.vue
View File

@ -1,22 +1,49 @@
<template> <template>
<div id="app"> <div id="app">
<div id="content"> <div id="content">
<div id="title"> <div id="title">
<a to="#">SignUp</a> <a to="#">SignUp</a>
</div> </div>
<input type="text" name="username" placeholder="Username" v-model="Username" required /> <input
<input type="text" name="email" placeholder="E-mail" v-model="Email" required /> type="text"
<input type="password" name="password" placeholder="Password" v-model="Password" required/> name="username"
<input type="password" name="confirm_password" placeholder="Confirm password" v-model="ConfirmPassword" required/><br/> placeholder="Username"
v-model="Username"
<button id="submit" @click="signup">Sign up</button> 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"> <button id="submit" @click="signup">Sign up</button>
<p>Click Above 'Sign up' Button <br> Then Get Your Signup Info!</p>
<p>email : {{ email }}</p> <div id="user-info">
<p>username : {{ username }}</p> <p>
<p>password : {{ password }}</p> Click Above 'Sign up' Button <br />
</div> Then Get Your Signup Info!
</p>
<p>email : {{ email }}</p>
<p>username : {{ username }}</p>
<p>password : {{ password }}</p>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -24,48 +51,49 @@
<script> <script>
export default { export default {
name: 'app', name: 'app',
data () { data() {
return { return {
Username: '', Username: '',
Email: '', Email: '',
Password: '', Password: '',
ConfirmPassword: '', ConfirmPassword: '',
email: '', email: '',
username: '', username: '',
password: '' password: '',
} }
}, },
methods: { methods: {
signup () { signup() {
let username = this.Username let username = this.Username
let email = this.Email let email = this.Email
let password = this.Password let password = this.Password
let confirm_password = this.ConfirmPassword let confirm_password = this.ConfirmPassword
let data = { let data = {
username: username, username: username,
email: email, email: email,
password: password, password: password,
confirm_password: confirm_password confirm_password: confirm_password,
} }
fetch('http://localhost:8000/user/info', { fetch('http://localhost:8080/user/info', {
body: JSON.stringify(data), body: JSON.stringify(data),
headers: { headers: {
'content-type': 'application/json' 'content-type': 'application/json',
}, },
method: 'POST', method: 'POST',
}).then(response => response.json()) })
.then(json => { .then((response) => response.json())
console.log(json) .then((json) => {
this.email = json.email console.log(json)
this.username = json.username this.email = json.email
this.password = json.password this.username = json.username
}) this.password = json.password
.catch((e) => { })
console.log(e) .catch((e) => {
}) console.log(e)
} })
} },
},
} }
</script> </script>
@ -76,26 +104,26 @@ export default {
padding-top: 33px; padding-top: 33px;
} }
#title { #title {
padding: 0.5rem 0; padding: 0.5rem 0;
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
background-color:bisque; background-color: bisque;
text-align: center; text-align: center;
} }
input[type="text"], input[type='text'],
input[type="password"] { input[type='password'] {
margin: 6px auto auto; margin: 6px auto auto;
width: 250px; width: 250px;
height: 36px; height: 36px;
border: none; border: none;
border-bottom: 1px solid #AAA; border-bottom: 1px solid #aaa;
font-size: 16px; font-size: 16px;
} }
#submit { #submit {
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
width: 250px; width: 250px;
height: 33px; height: 33px;
background-color:bisque; background-color: bisque;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
@ -103,37 +131,38 @@ input[type="password"] {
transition: 0.1s ease; transition: 0.1s ease;
cursor: pointer; cursor: pointer;
} }
input[type="checkbox"] { input[type='checkbox'] {
margin-top: 11px; margin-top: 11px;
} }
dialog { dialog {
top: 50%; top: 50%;
width: 80%; width: 80%;
border: 5px solid rgba(0, 0, 0, 0.3); border: 5px solid rgba(0, 0, 0, 0.3);
} }
dialog::backdrop{ dialog::backdrop {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
} }
#closeDialog { #closeDialog {
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
font-size: 1rem; font-size: 1rem;
padding: 0.4rem 0.8em; padding: 0.4rem 0.8em;
background: #eb9816; background: #eb9816;
border-bottom: 1px solid #f1b75c; border-bottom: 1px solid #f1b75c;
color: white; color: white;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
#closeDialog:hover, #closeDialog:focus { #closeDialog:hover,
opacity: 0.92; #closeDialog:focus {
cursor: pointer; opacity: 0.92;
cursor: pointer;
} }
#user-info { #user-info {
width: 250px; width: 250px;
@ -141,9 +170,9 @@ cursor: pointer;
padding-top: 44px; padding-top: 44px;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
#content { #content {
margin: 0 auto; margin: 0 auto;
padding-top: 100px; padding-top: 100px;
} }
} }
</style> </style>

12
databases/mysql/Cargo.toml
View File

@ -4,11 +4,11 @@ version = "1.0.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
actix-web = "4" actix-web.workspace = true
chrono = { version = "0.4.26", default-features = false, features = ["std", "clock"] } chrono.workspace = true
derive_more = "0.99.7" derive_more.workspace = true
dotenv = "0.15" dotenv = "0.15"
env_logger = "0.10" env_logger.workspace = true
log = "0.4" log.workspace = true
mysql = "24" mysql = "24"
serde = { version = "1", features = ["derive"] } serde.workspace = true