Restaurant Management System Project With VueJS
We propose to build a software project that can efficiently handle and manage various activities of a restaurant and all these activities will be happening under the supervision of the administrator. The businesses in restaurants are now growing constantly. At the same time, the need for managing its operations and tasks arises. The best way to optimize these activities is growing the business online as well. Today’s generation encourages high-tech services especially over the Internet. Hence the project is developed proficiently to help restaurant owners automate their business operations. This project serves the best way of maintaining customer’s information and caters their needs.
Folder Structure In Project
Signup page
Code:- Components/SignUp.vue
<template>
<div class="register">
<img alt="resto logo" class="logo" src="../assets/logo.png" />
<h1>Welcome To Mr. Mangos</h1>
<input
type="text"
v-model="name"
placeholder="Enter The Name"
name="name"
/>
<input
type="text"
v-model="email"
placeholder="Enter The Email"
name="email"
/>
<input
type="text"
v-model="password"
placeholder="Enter The Password"
name="password"
/>
<button v-on:click="SignUp()">Sign Up</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "SignUp",
data() {
return {
name: "",
email: "",
password: "",
};
},
methods: {
async SignUp() {
let result = await axios.post("http://localhost:3000/signup", {
name: this.name,
email: this.email,
password: this.password,
});
localStorage.setItem("user-info", JSON.stringify(result.data));
this.$router.push({ name: "Home" });
},
},
};
</script>
<style>
.logo {
width: 100px;
}
.register input {
width: 300px;
height: 40px;
padding-left: 20px;
display: block;
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid green;
font-family: "Lato", sans-serif;
}
.register button {
width: 320px;
height: 40px;
border: 1px solid green;
color: white;
background-color: green;
font-family: "Lato", sans-serif;
}
</style>
Login Page
code:components/Login.js
<template>
<div class="register">
<img alt="resto logo" class="logo" src="../assets/logo.png" />
<h1>Welcome To Mr. Mangos</h1>
<input
type="text"
v-model="email"
placeholder="Enter The Email"
name="email"
/>
<input
type="text"
v-model="password"
placeholder="Enter The Password"
name="password"
/>
<button v-on:click="login()">Login</button>
<p>
<router-link to="/sign-up">Sign Up</router-link>
</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Login",
data() {
return {
email: "",
password: "",
};
},
methods: {
async login() {
let result = await axios.get(`http://localhost:3000/users?email=${this.email}&password=${this.password}`, {
});
if(result.status == 200 && result.data.length > 0)
{
localStorage.setItem('user-info',JSON.stringify(result.data));
this.$router.push({name:"Home"});
}
},
},
mounted()
{
let user = localStorage.getItem('user-info');
if(user)
{
this.$router.push({name:"Home"});
}
}
};
</script>
Code : routes.js
import Home from "./components/Home.vue";
import SignUp from "./components/SignUp.vue";
import Login from "./components/Login.vue";
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
name: "Home",
component: Home,
path: "/",
},
{
name: "SignUp",
component: SignUp,
path: "/sign-up",
},
{
name:"Login",
component:Login,
path:"/login",
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Code Main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./routes";
createApp(App)
.use(router)
.mount("#app");
Yes
ReplyDelete