fix vue example ports

closes #624

Cargo.lock

@@ -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"

cors/backend/Cargo.toml

@@ -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

cors/backend/src/main.rs

@@ -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)

cors/frontend/src/app.vue

@@ -1,22 +1,49 @@
 <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"
+        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>
+      <button id="submit" @click="signup">Sign up</button>
 
-          <div id="user-info">
+      <div id="user-info">
-              <p>Click Above 'Sign up' Button <br> Then Get Your Signup Info!</p>
+        <p>
-              <p>email : {{ email }}</p>
+          Click Above 'Sign up' Button <br />
-              <p>username : {{ username }}</p>
+          Then Get Your Signup Info!
-              <p>password : {{ password }}</p>
+        </p>
-          </div>
+        <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 () {
+  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>
 
@@ -76,26 +104,26 @@ export default {
   padding-top: 33px;
 }
 #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;
   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%;
+  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 {
-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 {
   width: 250px;
@@ -141,9 +170,9 @@ cursor: pointer;
   padding-top: 44px;
 }
 @media only screen and (min-width: 600px) {
-    #content  {
+  #content {
-      margin: 0 auto;
+    margin: 0 auto;
-      padding-top: 100px;
+    padding-top: 100px;
   }
 }
 </style>

databases/mysql/Cargo.toml

@@ -4,11 +4,11 @@ version = "1.0.0"
 edition = "2021"
 
 [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"
-env_logger = "0.10"
+env_logger.workspace = true
-log = "0.4"
+log.workspace = true
 mysql = "24"
-serde = { version = "1", features = ["derive"] }
+serde.workspace = true